DEV Community: Nabilla Trisnani

Step 3: Setup Backend

Nabilla Trisnani — Tue, 31 Mar 2026 14:14:15 +0000

Installation

For my backend, I’m going to use Prisma. This is my first time ever to use Prisma, so… any feedbacks are welcome. Anyway, let’s move to the first step.

1. Install Prisma

npm install prisma --save-dev
npm install @prisma/client
npm install @prisma/adapter-pg
npm install pg

2. Init Prisma

npx prisma init

It will create something like this:

prisma/
    schema.prisma

Inside the schema.prisma, it will look something like this:

generator client {
  provider = "prisma-client"
  output   = "../src/generated/prisma"
}

datasource db {
  provider = "postgresql"
}

3. Setup Database

Since I’m using PostgreSQL, in the .env file, I’m going to change it to something like this:

DATABASE_URL="postgresql://USER:PASSWORD@localhost:5432/NAMA_DB"

For example:

DATABASE_URL="postgresql://postgres:123456@localhost:5432/mydb"

Don’t forget to run PostgreSQL and create the database. For this project, I’m going to create the database by running:

CREATE DATABASE note_taking_app;

That line is going to create a database called note_taking_app.

Once everything is set, run this command to open Prisma Studio GUI

npx prisma studio

Basic Test

For basic test, I’m going to create a table called “Users” and create a seed for the table.

In the prisma/schema.prisma add these lines:

model Users {
  id    Int     @id @default(autoincrement())
  name  String
  email String  @unique
}

Let’s breakdown those lines.

model Users: is the name of the table. If you want to change the name of the table, change the Users to anything that you like.
id Int @id @default(autoincrement()): column id with integer as data type. @id @default(autoincrement()) means that it is the primary key with auto increment (ex: 1, 2, 3, 4, …)
name String: column name with string as data type.
email String @unique: column email with String as data type. @unique means the value of email must be different from one another (unique).

Another thing that I like to mention is if you want to create a column that is optional, you can add question mark at the end of the data type. For example, if you want to create column name as optional, you can:

model Users {
  id    Int     @id @default(autoincrement())
  name  String?
  email String  @unique
}

But for this test, I’m going to make everything required.

After you input the code above, run this command to create the table in database:

npx prisma migrate dev --name create_user

Then run:

npx prisma generate

Create Seed

For this step, I’m going to try to create seed. First, don’t forget to run this command before you start.

npx prisma generate

Once you’re done running that command, create seed.ts in:

prisma/
    seed.ts

Inside the seed.ts, copy this code:

import "dotenv/config";
import { Pool } from "pg";
import { PrismaPg } from "@prisma/adapter-pg";
import { PrismaClient } from '../src/generated/prisma/client'
const connectionString = `${process.env.DATABASE_URL}`;
const pool = new Pool({ connectionString });
const adapter = new PrismaPg(pool);
const prisma = new PrismaClient({ adapter });

async function main() {
    const user = await prisma.user.create({
        data: {
            name: "Jane",
            email: "jane@email.com"
        }
    })

    console.log(user)
}

main()
    .then(() => {
        console.log("Seed User done")
    })
    .catch((e) => {
        console.error(e)
    })
    .finally(async () => {
        await prisma.$disconnect()
    })

Or, if you want insert multiple object, you can do it like this:

import "dotenv/config";
import { Pool } from "pg";
import { PrismaPg } from "@prisma/adapter-pg";
import { PrismaClient } from '../src/generated/prisma/client'
const connectionString = `${process.env.DATABASE_URL}`;
const pool = new Pool({ connectionString });
const adapter = new PrismaPg(pool);
const prisma = new PrismaClient({ adapter });

async function main() {
    const user = await prisma.user.createMany({
        data: [
            {
                name: "Jane",
                email: "jane@email.com"
            },
            {
                name: "John",
                email: "john@email.com"
            },
        ]
    })

    console.log(user)
}

main()
    .then(() => {
        console.log("Seed User done")
    })
    .catch((e) => {
        console.error(e)
    })
    .finally(async () => {
        await prisma.$disconnect()
    })

After seed.ts is set, let’s move to prisma.config.ts. Change the file to this:

import "dotenv/config";
import { defineConfig } from "prisma/config";

export default defineConfig({
  schema: "prisma/schema.prisma",
  migrations: {
    path: "prisma/migrations",
    seed: "tsx prisma/seed.ts", //add this
  },
  datasource: {
    url: process.env["DATABASE_URL"],
  },
});

Then run:

npx prisma db seed

If there’s an error during the seeding process, or if the new data doesn’t appear in the table, run this command:

npm install -D tsx
npx prisma generate

then run the seed command again.

After everything is done, the data should appear like this:

I’m not gonna lie, this step is a challenge for me because as I said earlier, this is my first ever time to use Prisma. After reading through the docs, I can finally create not just one, but two tables. As always, I’ll be more than happy to get any feedback that you can give me.

Thanks for coming by and Peace ✌

Author

Github: @NabillaTrisnani
LinkendIn: Nabilla Trisnani
Twitter: @NabillaTrisnani

Step 2: Slicing

Nabilla Trisnani — Mon, 30 Mar 2026 19:22:11 +0000

Layout

For the base layout, it’s going to be like this:

Here’s the detail:

Navbar:

Title (All Notes/Archived Notes) and its total
Searchbar
Theme switcher
Setting button

Sidebar:

Section 1:
- Logo
- Button to show all notes
- Button to show archived notes
Section 2:
- List of all tags

Note List:

Button to add new note
List of all notes or archived notes

Detail:

Title
Tags
Last Edited Date
Textarea for the note
Footer for button submit and cancel

Action:

Button delete
Button archive

Exited? I know you do. Stick with me.

Preview

Here’s the full preview using light theme:

And this is using dark theme:

You can checkout my repo for the full code, but we’re going to go through the key parts for the slicing.

Dropdown

I’m going to use dropdown for Navbar, TipTap Menu Bar, and Tags. The concept is to show the dropdown when the trigger is clicked. And when the outside of the dropdown is clicked, the dropdown is closed.

The difference between the dropdown in Navbar and Tags and TipTap Menu Bar is that when I click the content inside TipTap Menu Bar dropdown, it should automatically closed.

Here’s the snippet for the Navbar:

export default function Navbar() {
        //state for dropdown
    const [open, setOpen] = useState(false);

        //useRef to detect click outside
    const ref = useRef<HTMLDivElement>(null);

        //handle click outside
    useEffect(() => {
        function handleClickOutside(e: MouseEvent) {
                //check if the click is from outside or not
            if (ref.current && !ref.current.contains(e.target as Node)) {
                setOpen(false);
            }
        }

                //everytime the click is outside, it runs the handleClickOutside function
        document.addEventListener("mousedown", handleClickOutside);
        return () => document.removeEventListener("mousedown", handleClickOutside);
    }, []);

    return (
            // ref must be ont the parent element
        <div ref={ref} className="flex justify-between items-center py-4 px-6 border-b-[1.5px] border-light-secondary-background dark:border-gray-500">
            ...

            <div className="relative">
                                {/* button trigger */}
                <button
                    onClick={() => setOpen(!open)}
                    className="group/setting hover:cursor-pointer hover:bg-light-highlight hover:text-white py-2 px-3 rounded-lg"
                >
                    <i className="bi bi-gear text-5 text-light-text-primary dark:text-white group-hover/setting:text-white"></i>
                </button>

                {/* show the dropdown when the state "open" is true */}
                {open && (
                    <div className="absolute right-0 border border-[1.5px] border-light-secondary-background dark:border-gray-500 bg-white dark:bg-dark-background rounded-lg p-2">
                        <div className="flex gap-2 items-center">
                            <span className="size-[30px] flex items-center justify-center rounded-full bg-light-highlight text-light-text-primary">N</span>
                            <div>
                                <p className="text-sm truncate text-ellipsis">Nabilla Trisnani</p>
                                <p className="text-xs">nabillatrisnani@gmail.com</p>
                            </div>
                        </div>
                        <hr className="my-3 border-t-[1.5px] border-light-secondary-background dark:border-gray-500" />
                        <button className="bg-red-500 hover:cursor-pointer text-white font-medium px-2 py-1 rounded-lg text-sm min-w-30 w-full">Logout</button>
                    </div>
                )}
            </div>
        </div>
    )
}

For the Tags:

export default function Detail() {
    const ref = useRef<HTMLDivElement>(null);
    const [open, setOpen] = useState(false);
    const [tags, setTags] = useState<Tag[]>([
        { id: 1, name: "Tag 1", color: { id: 1, name: "Red", classBackground: "bg-rose-400 dark:bg-rose-500", textBackground: "text-rose-400 dark:text-rose-500", borderBackground: "border-rose-400 dark:border-rose-500" } },
    ]);

    useEffect(() => {
        function handleClickOutside(e: MouseEvent) {
            if (ref.current && !ref.current.contains(e.target as Node)) {
                setOpen(false);
            }
        }

        document.addEventListener("mousedown", handleClickOutside);
        return () => document.removeEventListener("mousedown", handleClickOutside);
    }, []);

    return (
        <div className="flex w-full">
                ...

            <div ref={ref} className="relative">
                <div
                    onClick={() => setOpen(prev => !prev)}
                    className="h-full w-full"
                >
                    {/* <p className="text-sm text-gray-300">Click here to add tags</p> */}

                    <div className="flex flex-wrap gap-2">
                        {
                            tags.map((tag: Tag, index: number) => {
                                return (
                                    <span key={index}
                                        className={`flex items-center px-1 py-[1px] ${tag.color.classBackground} text-xs text-light-text-primary dark:text-white rounded-sm`}
                                    >
                                        {tag.name}
                                        <i className="bi bi-x-lg ml-2"></i>
                                    </span>
                                )
                            })
                        }
                    </div>
                </div>

                {open && (
                    <div className="absolute z-9 border-[1.5px] border-light-secondary-background dark:border-gray-500 rounded-lg">
                        <div className="flex flex-wrap bg-gray-100 dark:bg-gray-700 rounded-t-lg p-2 gap-2">
                            {
                                tags.map((tag: Tag, index: number) => {
                                    return (
                                        <span key={index}
                                            className={`flex items-center px-1 py-[1px] ${tag.color.classBackground} text-xs text-light-text-primary dark:text-white rounded-sm`}
                                        >
                                            {tag.name}
                                            <i className="bi bi-x-lg ml-2"></i>
                                        </span>
                                    )
                                })
                            }
                            <input type="text" className="text-xs ml-2 outline-0" placeholder="Type Tag Name Here" />
                        </div>
                        <div className="bg-white dark:bg-dark-background py-2 rounded-b-lg">
                            <p className="text-xs mb-2 px-2">Select an option or create a new one</p>
                            {
                                tagsData.map((tag: Tag, index: number) => {
                                    return (
                                        <div key={index} className="py-1 px-2 hover:bg-light-secondary-background/50 dark:hover:bg-dark-secondary-background/10">
                                            <span
                                                className={`block w-max px-1 py-[1px] ${tag.color.classBackground} text-xs text-light-text-primary dark:text-white rounded-sm`}
                                            >
                                                {tag.name}
                                            </span>
                                        </div>
                                    )
                                })
                            }
                        </div>
                    </div>
                )}
            </div>

            ...
        </div>
    )

TipTap Menu Bar

export const MenuBar = ({ editor }: { editor: Editor | null }) => {
    const ref = useRef<HTMLDivElement>(null);
    const [activeDropdown, setActiveDropdown] = useState<"text" | "list" | "clear" | null>(null);

    const toggleDropdown = (name: "text" | "list" | "clear") => {
        setActiveDropdown(activeDropdown === name ? null : name);
    };

    const handleAction = (callback: () => void) => {
        callback();
        setActiveDropdown(null);
    };

    const editorState = useEditorState({
        editor,
        selector: menuBarStateSelector,
    })

    useEffect(() => {
        function handleClickOutside(e: MouseEvent) {
            if (ref.current && !ref.current.contains(e.target as Node)) {
                setActiveDropdown(null)
            }
        }

        document.addEventListener("mousedown", handleClickOutside);
        return () => document.removeEventListener("mousedown", handleClickOutside);
    }, []);

    if (!editor) return null;

    return (
        <div ref={ref} className="control-group text-sm bg-white dark:bg-dark-background">
            <div className="button-group flex gap-2 flex-wrap bg-white dark:bg-dark-background">

                {/* TEXT DROPDOWN */}
                <div className="relative">
                    <div onClick={() => toggleDropdown("text")} className="flex items-center gap-2 cursor-pointer">
                        <i className="text-base bi bi-type"></i>
                        <i className="text-xs bi bi-chevron-down"></i>
                    </div>

                    {activeDropdown === "text" && (
                        <ul className="absolute left-0 z-9 w-max border border-[1.5px] border-light-secondary-background dark:border-gray-500 bg-white dark:bg-dark-background rounded-lg p-2">
                            <li>
                                <button onClick={() => handleAction(() => editor.chain().focus().setParagraph().run())}>
                                    <i className="text-base bi bi-paragraph"></i> Paragraph
                                </button>
                            </li>

                            {[1, 2, 3, 4, 5, 6].map((level) => (
                                <li key={level}>
                                    <button
                                        onClick={() =>
                                            handleAction(() =>
                                                editor.chain().focus().toggleHeading({ level }).run()
                                            )
                                        }
                                        className={editorState?.[`isHeading${level}` as keyof typeof editorState] ? 'is-active' : ''}
                                    >
                                        <i className={`text-base bi bi-type-h${level}`}></i> Heading {level}
                                    </button>
                                </li>
                            ))}
                        </ul>
                    )}
                </div>
            </div>
        </div>
    )
}

Here’s the difference between the dropdown in Navbar, Tags, and TipTap Menu Bar:

How to manage the dropdown

Navbar and Tags

const [open, setOpen] = useState(false);

TipTap Menu Bar

const [activeDropdown, setActiveDropdown] = useState<"text" | "list" | "clear" | null>(null);

The state in Navbar and Tags only handle one dropdown whille TipTap Menu Bar handle multiple dropdown. Navbar with Boolean as value, then Enum for TipTap Menu Bar.

Scalable toggle logic

Before:

setOpen(!open)

After:

const toggleDropdown = (name) => {
    setActiveDropdown(activeDropdown === name ? null : name);
};

Meaning:

When you click the trigger, it’s going to open the dropdown
When you click the trigger again, it’s going to close the dropdown
When you click other dropdown trigger, it’s going to close the initial dropdown and open the other one.

Close after action

const handleAction = (callback: () => void) => {
    callback();
    setActiveDropdown(null);
};

This one is the most prominent one. Why? Because in Navbar and Tags, it doesn’t automatically close after you click an action in their dropdown. However, when you click an action from TipTap Menu Bar, the dropdown automatically close.

Toggle Sidebar

For the sidebar toggle, the idea is to hide the sidebar when the button is clicked. The button is in the Navbar and the Sidebar is a different component.

Here’s the snippet for the button in the Navbar, Sidebar, and the page.tsx.

Trigger button

interface NavbarProps {
    toggleShowSidebar: () => void;
}

export default function Navbar({
    toggleShowSidebar,
}: NavbarProps) {

    return (
        <button
            onClick={toggleShowSidebar}
            className="group/sidebar hover:cursor-pointer hover:bg-light-highlight hover:text-white py-2 px-3 rounded-lg"
        >
            <i className="bi bi-layout-sidebar text-5 text-light-text-primary dark:text-white group-hover/sidebar:text-white"></i>
        </button>
    )
}

Sidebar

interface SidebarProps {
    show: boolean;
}

export default function Sidebar({
    show = true,
}: SidebarProps) {
    return (
        <div className={`${show ? "block" : "hidden"} w-[17vw] h-screen p-4 border-r-[1.5px] border-light-secondary-background dark:border-gray-500 shrink-0`}>
            ...
        </div>
    )
}

page.tsx

export default function Home() {
  const [show, setShow] = useState(true);

  const toggleShowSidebar = () => {
    setShow((prev) => !prev);
  }

  return (
    <>
      <div className="bg-white dark:bg-dark-background min-h-screen flex">
        <Sidebar show={show} />
        <main className="flex-1">
          <Navbar toggleShowSidebar={toggleShowSidebar} />
        </main>
      </div>
    </>
  );
}

toggleShowSidebar in Navbar is a prop for function toggleShowSidebar in Home. In Sidebar, it has prop “show” to trigger the class “hidden” and “block”.

Theme Switcher

For the theme switcher, I’m going to use next-themes. I did set it up in the first chapter, but in this chapter, I’m going to improve it. With it, I’m going to create a simple button in Navbar to trigger the theme. When the theme is light, when you click the button, it’s going to change to dark theme, and vice versa. Simple right?

Here’s the snippet in layout.tsx

import "./globals.css";
import { ThemeProvider } from "next-themes";

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system">
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

Navbar

export default function Navbar() {
    const { theme, setTheme } = useTheme();

    return (
        <button
            onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
            className="group/theme hover:cursor-pointer hover:bg-light-highlight hover:text-white py-2 px-3 rounded-lg"
        >
            <i className={`bi bi-${theme === "dark" ? "sun" : "moon"} text-5 text-light-text-primary dark:text-white group-hover/theme:text-white`}></i>
        </button>
    )
}

Step 1: Setup Frontend

Nabilla Trisnani — Mon, 30 Mar 2026 19:17:43 +0000

This step is going to be a short one, but let’s go!

Install NextJS:

Use this command

pnpm create next-app@latest my-app

Choose Yes for everything

Setup Theme Switcher

For this project, I’m going to add theme switcher feature. Which is why I’m going to change the global.css to this:

@import url("https://fonts.googleapis.com/css2?family=Funnel+Sans:ital,wght@0,300..800;1,300..800&display=swap");
@import "tailwindcss";

:root {
    --white: #fffffe;

    --light-background: #fffffe;
    --light-secondary-background: #d9d4e7;
    --light-text-primary: #0e172c;
    --light-text-secondary: #fffffe;
    --light-highlight: #a786df;

    --dark-background: #232946;
    --dark-secondary-background: #d4d8f0;
    --dark-text-primary: #b8c1ec;
    --dark-text-secondary: #232946;
    --dark-highlight: #eebbc3;
}

@theme inline {
    --color-white: var(--white);

    --color-light-background: var(--light-background);
    --color-light-secondary-background: var(--light-secondary-background);
    --color-light-text-primary: var(--light-text-primary);
    --color-light-text-secondary: var(--light-text-secondary);
    --color-light-highlight: var(--light-highlight);

    --color-dark-background: var(--dark-background);
    --color-dark-secondary-background: var(--dark-secondary-background);
    --color-dark-text-primary: var(--dark-text-primary);
    --color-dark-text-secondary: var(--dark-text-secondary);
    --color-dark-highlight: var(--dark-highlight);
}

@custom-variant dark (&:where(.dark, .dark *));

body {
    font-family: "Funnel Sans", sans-serif;
}

The, add next-themes by run this command:

npm install next-themes

and for the layout.tsx, change to this:

import type { Metadata } from "next";
import "./globals.css";
import { ThemeProvider } from "next-themes";

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  return (
    <html lang="en" suppressHydrationWarning>
      <body>
        <ThemeProvider attribute="class" defaultTheme="system">
          {children}
        </ThemeProvider>
      </body>
    </html>
  );
}

After that, change the page.tsx to this:

"use client";

import { useTheme } from "next-themes";
import { useEffect, useState } from "react";

export default function Home() {
  const [mounted, setMounted] = useState(false);
  const { setTheme } = useTheme();

  useEffect(() => {
    setMounted(true);
  }, []);

  if (!mounted) {
    return null;
  }

  return (
    <div className="flex min-h-screen items-center justify-center bg-light-background dark:bg-dark-background">
      <div className="flex gap-2 p-1 border border-[3px] border-[#010101] dark:border-[#72757e] rounded-[3px]">
        <button
          onClick={() => setTheme("light")}
          className="text-[#fffffe] dark:text-[#fffffe] bg-[#7f5af0] dark:bg-transparent transition-colors duration-300 p-1 border border-[#7f5af0] dark:border-transparent rounded-[3px]"
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-5">
            <path d="M12 2.25a.75.75 0 0 1 .75.75v2.25a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75ZM7.5 12a4.5 4.5 0 1 1 9 0 4.5 4.5 0 0 1-9 0ZM18.894 6.166a.75.75 0 0 0-1.06-1.06l-1.591 1.59a.75.75 0 1 0 1.06 1.061l1.591-1.59ZM21.75 12a.75.75 0 0 1-.75.75h-2.25a.75.75 0 0 1 0-1.5H21a.75.75 0 0 1 .75.75ZM17.834 18.894a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 1 0-1.061 1.06l1.59 1.591ZM12 18a.75.75 0 0 1 .75.75V21a.75.75 0 0 1-1.5 0v-2.25A.75.75 0 0 1 12 18ZM7.758 17.303a.75.75 0 0 0-1.061-1.06l-1.591 1.59a.75.75 0 0 0 1.06 1.061l1.591-1.59ZM6 12a.75.75 0 0 1-.75.75H3a.75.75 0 0 1 0-1.5h2.25A.75.75 0 0 1 6 12ZM6.697 7.757a.75.75 0 0 0 1.06-1.06l-1.59-1.591a.75.75 0 0 0-1.061 1.06l1.59 1.591Z" />
          </svg>
        </button>
        <button
          onClick={() => setTheme("dark")}
          className="text-[#181818] dark:text-[#fffffe] bg-white dark:bg-[#2cb67d] transition-colors duration-300 p-1 border border-transparent dark:border-[#2cb67d] rounded-[3px]"
        >
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="size-5">
            <path fillRule="evenodd" d="M9.528 1.718a.75.75 0 0 1 .162.819A8.97 8.97 0 0 0 9 6a9 9 0 0 0 9 9 8.97 8.97 0 0 0 3.463-.69.75.75 0 0 1 .981.98 10.503 10.503 0 0 1-9.694 6.46c-5.799 0-10.5-4.7-10.5-10.5 0-4.368 2.667-8.112 6.46-9.694a.75.75 0 0 1 .818.162Z" clipRule="evenodd" />
          </svg>
        </button>
      </div>
    </div>
  );
}

Once everything is set, it should look like this:

It needs to be said that the global.css might change in the future, so don’t forget to check my repo for updates.

Thanks for coming by and Peace ✌

Author

Github: @NabillaTrisnani
LinkendIn: Nabilla Trisnani
Twitter: @NabillaTrisnani

Prologue

Nabilla Trisnani — Mon, 30 Mar 2026 19:08:49 +0000

This walkthrough is to improve my skill with Next.JS. My focus is to learn fullstack with Next.JS by creating note taking app. Shoutout to Frontend Mentor and Notion for my inspiration to create this app.

Techstack

Here’s my techstack:

NextJS
Tailwind
TipTap for text Editor
Prisma
PostgreSQL
NextAuth
Vercel
Bootstrap Icon for icons

Goal

This app should be able to:

Sign in, sign up, and log out your account.
Create and edit note that includes:
- Title
- Tags
- The content of the note
Use text editor to create the content of the note.
Delete, archive, and search a note.
Switch theme.
Show all tags.

It needs to be said that my focus is to learn the backend aspect of Next.JS, which… probably means that I’m not going to make this app responsive 😅. I know, I know… A frontend dev that refuses to make her side-project responsive. Tragic. Also, this is going to be my first ever series and first time creating fullstack app, so I’m going to need every inputs that you can give me and I would be so happy for them.

As usual full code can be found at my github. It is not done yet, as you can tell. But, that’s really about it. Let’s learn together 😁

Thanks for coming by and Peace ✌

Author

Github: @NabillaTrisnani
LinkendIn: Nabilla Trisnani
Twitter: @NabillaTrisnani

Create Bottom Navigation with HTML/CSS

Nabilla Trisnani — Sat, 14 Jan 2023 06:00:47 +0000

Hello Devs, for this tutorial we’re going to make bottom navigation with just HTML/CSS. As for the icon, we’re going to use some of the icons from iconify

Create our HTML

To start our project we need to create a file called index.html. Inside our index.html there’s an import link to iconify for our icons, two files CSS called base.css and bottomnav.css, and of course our .bottomnav.
Inside the .bottomnav, there are four a href tags with a class .active for if the link is active. Inside each of the a href tag, there’s an icon and the name of the a href inside the span tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bottomnav</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <script src="https://code.iconify.design/iconify-icon/1.0.2/iconify-icon.min.js"></script>

    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/bottomnav.css" />
  </head>
  <body>
    <main>
      <h1>Classic Bottom Navigation</h1>
      <div class="container">
        <section>
          <div class="bottomnav">
            <a href="" class="active">
              <iconify-icon
                icon="material-symbols:home-outline-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
              <span>Home</span>
            </a>
            <a href="" class="">
              <iconify-icon
                icon="material-symbols:favorite-outline-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
              <span>Favorite</span>
            </a>
            <a href="" class="">
              <iconify-icon
                icon="material-symbols:search-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
              <span>Search</span>
            </a>
            <a href="" class="">
              <iconify-icon
                icon="material-symbols:person-outline-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
              <span>User</span>
            </a>
          </div>
        </section>
      </div>
    </main>
  </body>
</html>

Now our index.html should look like this.

Add our CSS.

/* base.css */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
  font-family: 'Poppins', sans-serif;
}
h3,
p {
  margin: 0;
}
body {
  padding: 0;
  margin: 0;
  background-color: #f1f6ff;
}

.container {
  padding: 24px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
}
h1 {
  text-align: center;
  margin-bottom: 0;
}

/* bottomnav.css */
.bottomnav {
  display: flex;
  justify-content: space-between;
  background-color: #ffffff;
  box-shadow: 0px -5px 40px rgba(66, 134, 239, 0.1);
  width: calc(100vw / 3 - 96px);
  padding: 12px;
}
.bottomnav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  padding: 0 7px;
  color: #212121;
}
.bottomnav .bottomnav-icon {
  font-size: 24px;
}
.bottomnav a:hover {
  color: #0085ff;
}
.bottomnav a.active {
  color: #0085ff;
}

After we add our CSS it should look like this.

Create Bottom Navigation with CTA

For this .bottomnav, there are four a href tag with a class .active for if the link is active and one a href tag with a class attribute called .bottomnav-cta. Inside each of the a href tag other then the .bottomnav-cta, there’s an icon and the name of the a href inside the span tag. For the .bottomnav-cta, there’s no text and just an icon. Here’s the code to create our bottom navigation.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bottomnav</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <script src="https://code.iconify.design/iconify-icon/1.0.2/iconify-icon.min.js"></script>

    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/bottomnav.css" />
  </head>
  <body>
    <main>
      <h1>Bottom Navigation with CTA</h1>
      <div class="container">
        <section>
          <div class="bottomnav">
            <a href="" class="active">
              <iconify-icon
                icon="material-symbols:home-outline-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
              <span>Home</span>
            </a>
            <a href="" class="">
              <iconify-icon
                icon="material-symbols:favorite-outline-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
              <span>Favorite</span>
            </a>
            <a href="" class="bottomnav-cta">
              <iconify-icon
                icon="tabler:square-rounded-plus"
                class="bottomnav-icon"
              ></iconify-icon>
            </a>
            <a href="" class="">
              <iconify-icon
                icon="material-symbols:search-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
              <span>Search</span>
            </a>
            <a href="" class="">
              <iconify-icon
                icon="material-symbols:person-outline-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
              <span>User</span>
            </a>
          </div>
        </section>
      </div>
    </main>
  </body>
</html>

/* bottomnav.css */
.bottomnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0px -5px 40px rgba(66, 134, 239, 0.1);
  width: calc(100vw / 3 - 96px);
  padding: 12px;
}
.bottomnav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  padding: 0 7px;
  color: #212121;
}
.bottomnav .bottomnav-icon {
  font-size: 24px;
}
.bottomnav .bottomnav-cta {
  color: #dfeffd;
  background-color: #0085ff;
  padding: 12px;
  border-radius: 50%;
}
.bottomnav .bottomnav-cta .bottomnav-icon {
  font-size: 22px;
}
.bottomnav .bottomnav-cta .bottomnav-icon {
  color: #dfeffd;
}
.bottomnav a:hover {
  color: #0085ff;
}
.bottomnav a.active {
  color: #0085ff;
}

Here’s the preview for our bottom nav with CTA.

Create Levitating Bottom Navigation

For our levitating bottom navigation, it’s basically the same as our classic bottom navigation except without link text and has a rounded border similar to the pills component. Here’s the code to create one.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bottomnav</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <script src="https://code.iconify.design/iconify-icon/1.0.2/iconify-icon.min.js"></script>

    <link rel="stylesheet" href="./css/base.css" />
    <link rel="stylesheet" href="./css/bottomnav.css" />
  </head>
  <body>
    <main>
      <h1>Levitating Bottom Navigation</h1>
      <div class="container">
        <section>
          <div class="bottomnav">
            <a href="" class="active">
              <iconify-icon
                icon="material-symbols:home-outline-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
            </a>
            <a href="" class="">
              <iconify-icon
                icon="material-symbols:favorite-outline-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
            </a>
            <a href="" class="">
              <iconify-icon
                icon="material-symbols:search-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
            </a>
            <a href="" class="">
              <iconify-icon
                icon="material-symbols:person-outline-rounded"
                class="bottomnav-icon"
              ></iconify-icon>
            </a>
          </div>
        </section>
      </div>
    </main>
  </body>
</html>

.bottomnav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #ffffff;
  box-shadow: 0px -5px 40px rgba(66, 134, 239, 0.1);
  width: calc(100vw / 3 - 96px);
  padding: 12px;
  border-radius: 25px;
}
.bottomnav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  font-size: 12px;
  font-weight: 500;
  padding: 0 7px;
  color: #212121;
}
.bottomnav .bottomnav-icon {
  font-size: 24px;
}
.bottomnav a:hover {
  color: #0085ff;
}
.bottomnav a.active {
  color: #0085ff;
}

And here’s the preview for our levitating bottom nav.

And there you have it, our bottom navigation with only HTML/CSS. For more variation, you can checkout my repo here, and let me know if it helps or if I’m missing something in the comments below.

Thanks for coming by and Peace ✌

Author

Github: @NabillaTrisnani
LinkendIn: Nabilla Trisnani
Twitter: @NabillaTrisnani

Create Tabs with React Hooks

Nabilla Trisnani — Sat, 07 Jan 2023 12:52:02 +0000

Hello Devs, for this tutorial we’re going to make a tabs with React Hooks.

1. Create Tabs.js

Inside our Tabs.js we have two main elements. The first one is a div called tabs. Inside our tabs, we have buttons called tab-button and tab-button active if it’s in active state. The second main element is tabs-content. Inside the tabs-content, we have tab-page and tab-page active if it’s in active state.

import React from 'react';
import './tabs.css';

export default function Tabs() {
  return (
    <div>
      <div className="container">
        <div className="tabs">
          <button className="tab-button active" id="tab-1">
            Tab 1
          </button>
          <button className="tab-button" id="tab-2">
            Tab 2
          </button>
          <button className="tab-button" id="tab-3">
            Tab 3
          </button>
        </div>
        <div className="tabs-content">
          <div className="tab-page active">
            <p>This is page 1</p>
          </div>
          <div className="tab-page">
            <p>This is page 2</p>
          </div>
          <div className="tab-page">
            <p>This is page 3</p>
          </div>
        </div>
      </div>
    </div>
  );
}

2. Create tabs.css

This is our basic CSS.

.container {
  padding: 0 24px;
}
.tabs {
  display: flex;
  border-bottom: 1px solid #c6c6c6;
}
.tab-button {
  padding: 8px 16px;
  border-radius: 0;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}
.tab-button:hover {
  border-bottom: 2px solid #1d3557;
}
.tab-button.active {
  border-bottom: 2px solid #1d3557;
  color: #1d3557;
  font-weight: 700;
}
.tab-page {
  padding: 24px 16px 16px 16px;
  display: none;
}
.tab-page.active {
  display: block;
}

And BOOM, this is your tabs supposed to look like.

Very cool, now let's move on to the next step.

3. Add functionality

First, let’s create a state called active and add a value to our state to tab-1.

const [active, setActive] = useState('tab-1');

Then, create a function called handleClick.

const handleClick = (event) => {
  setActive(event.target.id);
};

Now, let’s put our handleClick function and active state to our component like this

import React, { useState } from 'react';
import './tabs.css';

export default function Tabs() {
  const [active, setActive] = useState('tab-1');

  const handleClick = (event) => {
    setActive(event.target.id);
  };

  return (
    <div>
      <div className="container">
        <div className="tabs">
          <button
            className={`tab-button ${active === 'tab-1' ? 'active' : ''}`}
            id="tab-1"
            onClick={handleClick}
          >
            Tab 1
          </button>
          <button
            className={`tab-button ${active === 'tab-2' ? 'active' : ''}`}
            id="tab-2"
            onClick={handleClick}
          >
            Tab 2
          </button>
          <button
            className={`tab-button ${active === 'tab-3' ? 'active' : ''}`}
            id="tab-3"
            onClick={handleClick}
          >
            Tab 3
          </button>
        </div>
        <div className="tabs-content">
          <div className={`tab-page ${active === 'tab-1' ? 'active' : ''}`}>
            <p>This is page 1</p>
          </div>
          <div className={`tab-page ${active === 'tab-2' ? 'active' : ''}`}>
            <p>This is page 2</p>
          </div>
          <div className={`tab-page ${active === 'tab-3' ? 'active' : ''}`}>
            <p>This is page 3</p>
          </div>
        </div>
      </div>
    </div>
  );
}

So the logic is when the tab-button is clicked, the value of the state active will change to the id of the clicked tab-button. And the logic for our inline conditional inside the tab-button and the tab-page is when the value of the state active is equal to their id, it will trigger the class active to the tab-button and the selected tab-page.

Here's what it's supposed to look like

Add disabled tabs

For disabled tabs add an attribute disabled to our button and add more lines to your CSS.

<button
  className={`tab-button ${active === 'tab-4' ? 'active' : ''}`}
  id="tab-3"
  onClick={handleClick}
  disabled //add disabled atribute
>
  Disabled Tab
</button>

/* add these lines to your css */
.tab-button:disabled:hover {
  border-bottom: 2px solid transparent;
}

Variations

For more variations you can checkout my repo here.

Variation 1

Variation 2

And there you have it, your custom React Hooks Tabs. You can check the repo here. And as always let me know in the comments if it helps or if I miss something.

Author

Github: @NabillaTrisnani
LinkendIn: Nabilla Trisnani
Twitter: @NabillaTrisnani

Create Toast Component with React Hooks

Nabilla Trisnani — Sat, 31 Dec 2022 07:37:23 +0000

Hey Devs, for this tutorial we’re going to make a Toast component with React Hooks.

1. Create our Toast.js

In our Toast.js we have a button to trigger our toast and a toast. Inside our toast, we have a close button and a text inside the toast-header, and a random text and a button inside our toast-body.

import React from 'react';

export default function Toast() {
  return (
    <div>
      <button className="btn-toggle">Click Me!</button>
      <div className="toast-container">
        <div className="toast">
          <header className="toast-header">
            <h3>Toast Header</h3>
            <button className="btn-close">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                preserveAspectRatio="xMidYMid meet"
                viewBox="0 0 16 16"
              >
                <path
                  fill="white"
                  fillRule="evenodd"
                  d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8L3.72 4.78a.75.75 0 0 1 0-1.06z"
                />
              </svg>
            </button>
          </header>
          <div className="toast-body">
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
            </p>
            <button className="btn">Button</button>
          </div>
        </div>
      </div>
    </div>
  );
}

2. Create our CSS

This is our basic CSS

.toast-container {
  padding: 12px;
  width: 300px;
  position: absolute;
  bottom: 0;
  right: 0;
}
.toast {
  background-color: #2f2f2f;
  border-radius: 4px;
  color: #ffffff;
  padding: 12px;
}
.toast-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #868686;
  padding-bottom: 8px;
}
.toast-header h3 {
  font-size: 14px;
  font-weight: 600;
}
.btn-close {
  border: none;
  background-color: #4e4e4e;
  height: 20px;
  width: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.toast-body {
  padding-top: 8px;
}
.toast-body p {
  font-size: 12px;
  margin-bottom: 12px;
}
.toast-body .btn {
  border: 1px solid #0085ff;
  background-color: #0085ff;
  color: #ffffff;
  width: 100%;
  border-radius: 4px;
  padding: 4px;
  font-size: 12px;
}

/* important part */
.hide {
  display: none;
}
.show {
  display: flex;
}

3. Create onClick handler

So the logic is when the btn-toggle is clicked it will set the state show to true and then it will add a class called show to our toast-container, and when the btn-toggle is clicked again, it will remove the class show but instead it will add a class called hide. The same thing also applied to our btn-close inside our toast header.

import React, { useState } from 'react';

export default function Toast() {
  const [show, setShow] = useState(false);

  const handleShow = () => {
    setShow((current) => !current);
  };

  return (
    <div>
      <button className="btn-toggle" onClick={handleShow}>
        Click Me!
      </button>
      <div className={`toast-container ${show === true ? 'show' : 'hide'}`}>
        <div className="toast">
          <header className="toast-header">
            <h3>Toast Header</h3>
            <button className="btn-close" onClick={handleShow}>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="16"
                height="16"
                preserveAspectRatio="xMidYMid meet"
                viewBox="0 0 16 16"
              >
                <path
                  fill="white"
                  fillRule="evenodd"
                  d="M3.72 3.72a.75.75 0 0 1 1.06 0L8 6.94l3.22-3.22a.75.75 0 1 1 1.06 1.06L9.06 8l3.22 3.22a.75.75 0 1 1-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 0 1-1.06-1.06L6.94 8L3.72 4.78a.75.75 0 0 1 0-1.06z"
                />
              </svg>
            </button>
          </header>
          <div className="toast-body">
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit.
              Explicabo esse maiores assumenda.
            </p>
            <button className="btn">Button</button>
          </div>
        </div>
      </div>
    </div>
  );
}

Add timeout

To add a timeout, simply create a function called setTimeout that set our state show to false after a certain time. For this example, we set our timeout for 5 seconds (5s = 5000).

setTimeout(() => {
    setShow(false);
}, 5000);

After that, we put our function into our if-else statement inside our toast-container.

The logic inside the if-else statement is if the show state is true, it will trigger the setTimeout function. And if the show state is false, then it will trigger the class hide.

{/* ... */}
<div className={`toast-container ${show === true ? setTimeout : 'hide'}`}>
{/* ... */}

And there you have it, your custom React Hooks Toast. For more variations, you can check the repo here. And as always let me know in the comments if it helps or if I miss something.

Thanks for coming by and Peace ✌

Author

Github: @NabillaTrisnani
LinkendIn: Nabilla Trisnani
Twitter: @NabillaTrisnani

Websites that Helped My Frontend Journey

Nabilla Trisnani — Sat, 24 Dec 2022 04:21:12 +0000

Let’s be honest, every programming journey can be a little bit confusing sometimes. Be it frontend dev, backend dev, or fullstack. Maybe it’s because you don’t know where to start or when you do know, you feel overwhelmed because there are so many languages and frameworks to learn. So here are the websites that helped me throughout my journey to be a better frontend dev.

1. roadmap.sh

roadmap.sh is a website for roadmaps, guides, and video tutorials for learning based on the role you want to be.

What I like about this web is the roadmap. Because not only it has all the language and requirements that you need to learn, but also has a simple explanation and references that can help you understand more about that language. And it’s FREE of course. The reference is a link that redirects us to an article or tutorial, video, and even free courses.

2. freeCodeCamp

freeCodeCamp is a free online course certification.

What I like about freeCodeCamp other than it’s free, it also takes you to step by step on how to learn your chosen course. For example, let’s just say you chose the New Responsive Web Design course, inside the course, you’ll encounter the first section which is the basic HTML and CSS.

And after you learned the basic HTML and CSS, you can scroll down to the next section and start the more advanced CSS such as Flexbox and typography.

Now, inside each section, there’s a certification project for your certification. After you complete all the certification projects, you will receive a certificate of completion. You can check your certificate in your profile menu.

freeCodeCamp certification is also available for Backend, Data Visualization, Quality Assurance, and many more.

3. Frontend Mentor

Frontend Mentor is a freemium website to improve you frontend skills with real projects.

What I like about this web other than its real projects is that you don’t have to design the project. For free users, after you start the challenge, you will be given a zip file containing the designs in .jpg, image assets, and the style guide. But thanks to this, you can also learn your pixel-perfect skill, and detailing on the side. If you’re a pro user, you can get access to Sketch and Figma design files.

Frontend mentor also has a Slack community

4. w3schools

W3Schools is a website for tutorials.

What I like about this website is that it offers a lot of programming language tutorials, and a lot of how-tos, every explanation is simplified to avoid confusion, and every tutorial has a code editor for you to try and/or edit the code. All in all, it’s perfect for everyone at any level. The editor is also available in light and dark theme.

W3schools also has quizzes, exercise, certification, web templates, W3Schools spaces to build your own website and discord server

And there you have it, the websites that helped me throughout my frontend journey. Let me know which website helped your journey in the comments 😁.

Thanks for coming by and Peace ✌

Author

Github: @NabillaTrisnani
LinkendIn: Nabilla Trisnani
Twitter: @NabillaTrisnani

Create Image Preview with jQuery

Nabilla Trisnani — Sat, 17 Dec 2022 12:30:19 +0000

Hey devs, today we’re going to make an image preview with Jquery.
I’m using jQuery 3 which can be found here if you use CDN or here if you want to download it.

1. Create our HTML

In our HTML we have a card, an input type file, a label that acts as our input button, a button to delete or remove our image preview, and an image tag with an empty src attribute for our image preview.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Image Preview with Jquery</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />

    <script
      src="https://code.jquery.com/jquery-3.6.1.min.js"
      integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ="
      crossorigin="anonymous"
    ></script>
    <script src="./script.js"></script>
  </head>
  <body>
    <h3 class="title">Image Preview with Jquery</h3>
    <div class="card-input-image" id="card_input_image">
      <input
        type="file"
        id="input_image"
        name="foto[]"
        class="input-image"
        accept=".png, .jpg, .jpeg"
        onchange="onchange_value('input_image', 'card_input_image')"
      />
      <label for="input_image" class="label-upload-image">
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="1em"
          height="1em"
          preserveAspectRatio="xMidYMid meet"
          viewBox="0 0 24 24"
        >
          <path
            fill="currentColor"
            d="M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m1 5h-2v4H7v2h4v4h2v-4h4v-2h-4V7Z"
          />
        </svg>
        Upload File
      </label>
      <button
        type="button"
        class="btn-delete"
        onclick="delete_value('input_image', 'card_input_image')"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="1em"
          height="1em"
          preserveAspectRatio="xMidYMid meet"
          viewBox="0 0 256 256"
        >
          <path
            fill="currentColor"
            d="M208.5 191.5a12 12 0 0 1 0 17a12.1 12.1 0 0 1-17 0L128 145l-63.5 63.5a12.1 12.1 0 0 1-17 0a12 12 0 0 1 0-17L111 128L47.5 64.5a12 12 0 0 1 17-17L128 111l63.5-63.5a12 12 0 0 1 17 17L145 128Z"
          />
        </svg>
        Delete
      </button>
      <img src="" id="img_preview" class="image-preview" alt="" />
    </div>
  </body>
</html>

2. Create our CSS

These are our basic CSS.

/* base */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
  font-family: 'Poppins', sans-serif;
}
body {
  padding: 0;
  margin: 0;
}

.title {
  text-align: center;
}

/* input image */
.card-input-image {
  height: 125px;
  width: 200px;
  border-radius: 8px;
  position: relative;
  margin: 0 auto 12px auto;
}
.card-input-image .label-upload-image {
  margin: auto;
  width: 200px;
  height: 100%;
  border-radius: 8px;
  color: #629ef5;
  font-weight: 700;
  font-size: 14px;
  line-height: 21px;
  border: 2px dashed #b0cffa;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.card-input-image input {
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  z-index: -1;
}
.card-input-image .image-preview {
  width: 100%;
  height: 100%;
  border-radius: 8px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  object-fit: cover;
  display: none;
}
.card-input-image .btn-delete {
  background: #ef4e4e;
  border-radius: 14.5455px;
  color: #ffffff;
  font-weight: 700;
  font-size: 10px;
  line-height: 10px;
  border: none;
  padding: 7.27273px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

/* input image active state */
.card-input-image.active .label-upload-image {
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.45));
  color: #ffffff;
  border: none;
}
.card-input-image.active .image-preview {
  display: initial;
}
.card-input-image.active .btn-delete {
  display: flex;
  align-items: center;
  justify-content: center;
}

3. Create our JS

So the logic for the onChange input is when the input or the label in this case is clicked, it will get the file property and put it in the file variable and then copy the array and put it in variable filesArr. After that, it will add a class called active to our image-preview, create a blob inside the image-preview, and remove the inside of the label-upload-image.

//handle on change
function onchange_value(name, preview) {
  files = $(`#${name}`).prop('files');
  var filesArr = Array.prototype.slice.call(files);

  $(`#${preview}`).addClass('active');
  $(`#${preview} label.label-upload-image`).html('');
  $(`#${preview} img.image-preview`).attr(
    'src',
    URL.createObjectURL(filesArr[0])
  );
}

For our onClick delete, when the btn-delete is clicked, it will remove the value of our input file, remove the class active from the image-preview, remove the value of the src attribute from the image-preview, and put back the default label-upload-image.

//handle on click button delete
function delete_value(name, preview) {
  $(`#${name}`).val('');
  $(`#${preview}`).removeClass('active');
  $(`#${preview} label.label-upload-image`).html(
    "<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'><path fill='currentColor' d='M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m1 5h-2v4H7v2h4v4h2v-4h4v-2h-4V7Z'/></svg>Upload File"
  );
  $(`#${preview} img.image-preview`).attr('src', '');
}

Add file size limit

To add size limit, simply add a conditional if the size of the variable filesArr is bigger than for this case 2MB (2MB = 2097152), then it will pop out an alert that said File (file name) is too big!. The code below the alert is to prevent any change when the file is bigger than the max size (2097152 or 2MB).
If the file size is under 2MB, it will add class active to our image-preview, create a blob inside the image-preview, and remove the inside of the label-upload-image.

//handle on change
function onchange_value(name, preview) {
  files = $(`#${name}`).prop('files');
  var filesArr = Array.prototype.slice.call(files);

  if (filesArr[0].size > 2097152) {
    alert(`File ${filesArr[0].name} is too big!`);

    //The code below is to prevent any change when the file is bigger than the max size (2097152 or 2MB)
    $(`#${name}`).val('');
    $(`#${preview}`).removeClass('active');
    $(`#${preview} label.label-upload-image`).html(
      "<svg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' preserveAspectRatio='xMidYMid meet' viewBox='0 0 24 24'><path fill='currentColor' d='M12 20c-4.41 0-8-3.59-8-8s3.59-8 8-8s8 3.59 8 8s-3.59 8-8 8m0-18A10 10 0 0 0 2 12a10 10 0 0 0 10 10a10 10 0 0 0 10-10A10 10 0 0 0 12 2m1 5h-2v4H7v2h4v4h2v-4h4v-2h-4V7Z'/></svg>Upload File"
    );
    $(`#${preview} img.image-preview`).attr('src', '');
  } else {
    $(`#${preview}`).addClass('active');
    $(`#${preview} label.label-upload-image`).html('');
    $(`#${preview} img.image-preview`).attr(
      'src',
      URL.createObjectURL(filesArr[0])
    );

    console.log(filesArr[0].name, 'name'); //for testing in console
  }
}

And there you have it, our image preview with jQuery. You can check the repo here. And as always, let me know if it helps.

Thanks for coming by and Peace ✌

Author

Github: @NabillaTrisnani
LinkendIn: Nabilla Trisnani
Twitter: @NabillaTrisnani

Create Modal Component with React Hooks

Nabilla Trisnani — Sat, 10 Dec 2022 15:53:53 +0000

For this tutorial we're going to make Modal with React Hooks.

1. Create a button

First, let's create a button inside our Modal.js file

{/* Modal.js */}

import React from 'react';

export default function Modal() {
  return (
    <div>
      <button className="btn btn-toggle btn-primary">
        Click Me!
      </button>
    </div>
  );
}

/* style.css */

/* base */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

* {
  font-family: 'Poppins', sans-serif;
}
body {
  padding: 0;
  margin: 0;
}

/* button */
.btn {
  border: none;
  padding: 9px 18px;
  border-radius: 8px;
}
.btn-toggle {
  font-weight: 600;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%);
}
.btn-primary {
  background-color: #0085ff;
  color: #ffffff;
}

2. Create Modal

Then, add our modal code just below the button

{/* Modal.js */}

import React from 'react';

export default function Modal() {
  return (
    <div>
      <button className="btn btn-toggle btn-primary">
        Click Me!
      </button>

      <div className="modal-container"></div>

      <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h3>Modal Header</h3>
              <button className="modal-close">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="25"
                  height="25"
                  preserveAspectRatio="xMidYMid meet"
                  viewBox="0 0 24 24"
                >
                  <path
                    fill="currentColor"
                    d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6Z"
                  />
                </svg>
              </button>
            </div>
            <div className="modal-body">
              <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae
                culpa, inventore alias ab atque similique quod ea reprehenderit.
              </p>
            </div>
            <div className="modal-footer">
              <button className="btn">
                Close
              </button>
              <button className="btn btn-primary">Okay</button>
            </div>
          </div>
      </div>
    </div>
  );
}

/* style.css */

/* modal */
.modal-container {
  width: 100%;
  min-height: 100vh;
  position: absolute;
  top: 0;
  background-color: #0000007d;
}
.modal-dialog {
  max-width: 500px;
  margin-right: auto;
  margin-left: auto;
  display: flex;
  align-items: center;
  min-height: calc(100vh - 2.1rem * 2);
  max-height: calc(100vh - 2.1rem * 2);
}
.modal-content {
  border: 1px solid #e0dcda;
  border-radius: 12px;
  background-color: #ffffff;
  position: relative;
}
.modal-header {
  border-bottom: 1px solid #e0dcda;
  padding: 14px 16px;
  border-radius: 12px 12px 0 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-header .modal-close {
  background: transparent;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal-header h3 {
  margin-bottom: 0;
  margin-top: 0;
  font-size: 16px;
  font-weight: 600;
}
.modal-body {
  padding: 16px;
  overflow-y: auto;
  max-height: calc(100vh - 7rem * 2);
}
.modal-footer {
  border-top: 1px solid #e0dcda;
  padding: 14px 16px;
  border-radius: 0 0 12px 12px;
  display: flex;
}
.modal-footer .btn:first-child {
  margin-right: 8px;
  margin-left: auto;
}

3. Add onClick handler

So the logic is when the btn-toggle is clicked, it will set state show to true and then add class show to modal-dialog and when the modal-container or modal-close button is clicked, it will set state show to false and then add class hide to modal-dialog.

{/* Modal.js */}

import React, { useState } from 'react';

export default function Modal() {
  const [show, setShow] = useState(false);

  const handleShow = () => {
    setShow((current) => !current);
  };

  return (
    <div>
      <button className="btn btn-toggle btn-primary" onClick={handleShow}>
        Default Modal
      </button>
      <div
        className={`modal-container ${show === true ? 'show' : 'hide'}`}
        onClick={handleShow}
      ></div>
      <div className={`modal-dialog ${show === true ? 'show' : 'hide'}`}>
        <div className="modal-content">
          <div className="modal-header">
            <h3>Default Modal</h3>
            <button className="modal-close" onClick={handleShow}>
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="25"
                height="25"
                preserveAspectRatio="xMidYMid meet"
                viewBox="0 0 24 24"
              >
                <path
                  fill="currentColor"
                  d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6Z"
                />
              </svg>
            </button>
          </div>
          <div className="modal-body">
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae
              culpa, inventore alias ab atque similique quod ea reprehenderit.
            </p>
          </div>
          <div className="modal-footer">
            <button className="btn" onClick={handleShow}>
              Close
            </button>
            <button className="btn btn-primary">Okay</button>
          </div>
        </div>
      </div>
    </div>
  );
}

/* style.css */

/* important part */
.hide {
  display: none;
}
.show {
  display: flex;
}

Static Modal

For static modal, simply remove the function handleShow in modal-container

{/* Modal.js */}

{/* ... */}

{/* remove the onClick in modal-container */}
<div className={`modal-container ${show === true ? 'show' : 'hide'}`}></div>

{/* ... */}

Scrollable Modal

You can also make a scrollable modal.
Simply add overflow-y: auto; and max-height to our modal-body in our CSS file.

/* style.css */

.modal-body {
  padding: 16px;
  overflow-y: auto;
  max-height: calc(100vh - 7rem * 2);
}

With Image Inside Modal

Image can also be included inside our modal.
Just don't forget to set our image's width to 100% so it will fit inside our modal-body

{/* Modal.js */}

{/* ... */}

{/* remove the onClick in modal-container */}
<div className="modal-body">
  <img
    className="modal-img"
    src="https://asset.kompas.com/crops/NsA-H96AvvPUMjunfBGSqylkSUI=/0x0:1000x667/750x500/data/photo/2022/07/29/62e36ad288459.jpg"
    alt="Dobberman"
  />
  <br />
  <br />
  <p>This is an image of a black dobberman</p>
</div>

{/* ... */}

/* style.css */

.modal-img {
  width: 100%;
}

And just like that, you have created your own react hooks modal without any additional library. You can check the repo here.

Thanks for coming by and Peace ✌

Author

Github: @NabillaTrisnani
LinkendIn: Nabilla Trisnani
Twitter: @NabillaTrisnani

Create Accordion Component with React Hooks

Nabilla Trisnani — Thu, 18 Aug 2022 14:25:39 +0000

For this tutorial we're going to create Accordion with React Hooks.

1. Create Accordion.js

First, we need to create component Accordion with props header and children

So the logic is when state expanded is true then add class open to accordion-body, if state expanded is false, then add class close to accordion-body.

{/* Accordion.js */}

const Accordion = (props) => {
  const [expanded, setExpanded] = useState(true);

  const handleClick = () => {
    setExpanded((current) => !current);
  };
  return (
    <div className="accordion">
      <div className="accordion-item">
        <div className="accordion-header">
          <h3>{props.header}</h3>
          <button className="accordion-toggle" onClick={handleClick}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="1em"
              height="1em"
              preserveAspectRatio="xMidYMid meet"
              viewBox="0 0 24 24"
            >
              <path
                fill="none"
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="m8 4l8 8l-8 8"
              />
            </svg>
          </button>
        </div>
        {/* if state expanded is true, then add class 'open' */}
        <div
          className={`accordion-body ${expanded === true ? 'open' : 'close'}`}
        >
          {props.children}
        </div>
      </div>
    </div>
  );
};

export default Accordion;

/* style.css */
.open {
  display: initial;
}
.close {
  display: none;
}

2. Add Accordion.js to App.js

You can add anything inside the <Accordion> tag, but for an example we'll just add a paragraph and an image.

{/* App.js */}

export default function App() {
  return (
    <div>
      <h1>Accordion Example</h1>

      <Accordion header="Dobberman">
        <img
          src="https://asset.kompas.com/crops/NsA-H96AvvPUMjunfBGSqylkSUI=/0x0:1000x667/750x500/data/photo/2022/07/29/62e36ad288459.jpg"
          alt="Dobberman"
        />
        <p>
          The Dobermann, or Doberman Pinscher in the United States and Canada,
          is a medium-large breed of domestic dog that was originally developed
          around 1890 by Louis Dobermann, a tax collector from Germany. The
          Dobermann has a long muzzle. It stands on its pads and is not usually
          heavy-footed.
        </p>
      </Accordion>
      <Accordion header="Pittbull">
        <img
          src="https://d1vbn70lmn1nqe.cloudfront.net/prod/wp-content/uploads/2021/06/19170131/Makanan-untuk-Anjing-Pitbull-agar-Tumbuh-Sehat.jpg"
          alt="Pittbull"
        />
        <p>
          The American Pit Bull Terrier is a dog breed recognized by the United
          Kennel Club and the American Dog Breeders Association, but not the
          American Kennel Club. It is a medium-sized, short-haired dog, of a
          solid build, whose early ancestors came from the British Isles.
        </p>
      </Accordion>
    </div>
  );
}

3. Add More Style

Let's add more style to make it pretty!

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;700&display=swap');

* {
  font-family: 'Poppins', sans-serif;
}
p {
  margin-bottom: 0;
}
h3 {
  margin: 0;
}
ul {
  margin: 0;
}
.border-0 {
  border-bottom: none;
}
.accordion {
  margin-bottom: 16px;
}
.accordion-header {
  display: flex;
  justify-content: space-between;
  padding: 12px 0;
}
.accordion-toggle {
  background: none;
  border: none;
}
.accordion-body {
  padding: 0 12px;
}
img {
  max-width: 300px;
  width: 100%;
}

/* the most important part */
.open {
  display: initial;
}
.close {
  display: none;
}

You Can Even Do Nested Accordion

Just add another Accordion tag inside an Accordion tag.

<Accordion header="Pittbull">
  <img
    src="https://d1vbn70lmn1nqe.cloudfront.net/prod/wp-content/uploads/2021/06/19170131/Makanan-untuk-Anjing-Pitbull-agar-Tumbuh-Sehat.jpg"
    alt="Pittbull"
  />
  <p>
    The American Pit Bull Terrier is a dog breed recognized by the United
    Kennel Club and the American Dog Breeders Association, but not the
    American Kennel Club. It is a medium-sized, short-haired dog, of a
    solid build, whose early ancestors came from the British Isles.
  </p>
  <Accordion header="Most common pitbull colors are:">
    <ul>
      <li>Black</li>
      <li>Grey</li>
      <li>Brown</li>
    </ul>
  </Accordion>
</Accordion>

And that is how you make an Accordion Component with React Hooks. You can check the demo here.

Thanks for coming by and Peace ✌

Author

Github: @NabillaTrisnani
LinkendIn: Nabilla Trisnani
Twitter: @NabillaTrisnani

Frontend Mentor - URL shortening API landing page

Nabilla Trisnani — Mon, 25 Apr 2022 06:28:57 +0000

This is my solution to Frontend Mentor URL shortening API landing page

Overview
- The challenge
- Links
My process
- Built with
- What I learned
Author

Overview

The challenge is to integrate with the shrtcode API to create shortened URLs and display them like in the designs.

The challenge

User should be able to:

View the optimal layout for the site depending on their device's screen size
Shorten any valid URL
See a list of their shortened links, even after refreshing the browser
Copy the shortened link to their clipboard in a single click
Receive an error message when the form is submitted if:
- The input field is empty

My process

Built with:

HTML5
SCSS
Bootstrap
React
shrtcode API

What I learned

Create empty array in localStorage

localStorage.setItem('data', '[]');

Put fetched data to array in localStorage

let param = this.state.value;

fetch(`https://api.shrtco.de/v2/shorten?url=${param}`)
  .then((res) => res.json())
  .then((result) => {
    // if localStorage 'data' is null make an empty array
    if (localStorage.getItem("data") == null) {
      localStorage.setItem("data", "[]");
    }

    // get localStorage 'data' as var old_data
    var old_data = JSON.parse(localStorage.getItem("data"));

    // if fetch is ok return localStorage 'data' push result
    if (result.ok === true) {
      old_data.push(result);
    }

    // set localStorage 'data' to new data from push result
    localStorage.setItem("data", JSON.stringify(old_data));

    // set state items equal to result, linkStorage to localStorage 'data'
    this.setState({
      items: result,
      linkStorage: JSON.parse(localStorage.getItem("data"))
    });
  })
  .catch((error) => console.log("error", error));

Author

Frontend Mentor: @NabillaTrisnani
Github: @NabillaTrisnani
LinkendIn: Nabilla Trisnani
Twitter: @NabillaTrisnani

DEV Community: Nabilla Trisnani

Step 3: Setup Backend

Installation

1. Install Prisma

2. Init Prisma

3. Setup Database

Basic Test

Create Seed

Author

Step 2: Slicing

Layout

Preview

Dropdown

Toggle Sidebar

Theme Switcher

Step 1: Setup Frontend

Install NextJS:

Setup Theme Switcher

Author

Prologue

Techstack

Goal

Author

Create Bottom Navigation with HTML/CSS

Create our HTML

Add our CSS.

Create Bottom Navigation with CTA

Create Levitating Bottom Navigation

Author

Create Tabs with React Hooks

1. Create Tabs.js

2. Create tabs.css

3. Add functionality

Add disabled tabs

Variations

Variation 1

Variation 2

Author

Create Toast Component with React Hooks

1. Create our Toast.js

2. Create our CSS

3. Create onClick handler

Add timeout

Author

Websites that Helped My Frontend Journey

1. roadmap.sh

2. freeCodeCamp

3. Frontend Mentor

4. w3schools

Author

Create Image Preview with jQuery

1. Create our HTML

2. Create our CSS

3. Create our JS

Add file size limit

Author

Create Modal Component with React Hooks

1. Create a button

2. Create Modal

3. Add onClick handler

Static Modal

Scrollable Modal

With Image Inside Modal

Author

Create Accordion Component with React Hooks

1. Create Accordion.js

2. Add Accordion.js to App.js

3. Add More Style

You Can Even Do Nested Accordion

Author

Frontend Mentor - URL shortening API landing page

Table of contents

Overview

The challenge

Links

My process

Built with:

What I learned

Author