Forem: Haruka Kakiuchi

We Built a Birthday Party Planner App in 4 Weeks with Next.js – Here’s What We Learned

Haruka Kakiuchi — Wed, 16 Apr 2025 20:54:28 +0000

Introduction

Hi, I’m Haruka — a UI designer with 4 years of experience!
I’m currently studying Web Development at a community college in Vancouver, working as a co-op student.

In this article, I’ll talk about a web app I made as my final school project. I’ll share how we built it and what I learned from working in a team.

I hope this helps anyone who wants to try making their own web service or join a hackathon!

Project Overview

Team Members

We had 4 people:

2 backend developers (1 was also the project manager)
2 frontend/designers

Our PM had experience in web backend. One backend and one frontend had embedded systems experience. I had some HTML/CSS experience.

Project Length

4 weeks of coding(2 weeks to prepare for the final demo presentation)

My Role

UI/UX planning
Wireframes, prototypes, and design
Design reviews
Frontend development

Tech Stack

Frontend:

Next.js
TypeScript
TailwindCSS
Shadcn/ui

Backend:

Node.js
Express.js

Database:

PostgreSQL
Prisma

Other Tools:

Clerk (auth)
Cloudinary (images)
Resend (email)
Motion (animation)
Axios (API)
react-slick (slider)
react-medium-image-zoom (image zoom)

About the App: Oiwai

Oiwai is a simple app to manage kids’ birthday parties.

Hosts can manage the budget and guest list
Guests can check all the party info in one place

The app name 'Oiwai' comes from the Japanese word meaning 'to celebrate'.

Process

1. Idea and Planning

Brainstorming

One team member has a 2-year-old child, so we decided to build a kids-related service. We wanted to make something useful for us too.

Defining the Problem

We started by writing a simple problem statement:
“What problem are we trying to solve?”

This article was really helpful to us:Problem Statements in UX Discovery

We used the statement to decide on features for our MVP and create user stories.

User Stories

We made two types of user stories:

For the host
For the guest

One person wrote the base, and we all reviewed it together.

2. Wireframes & Design

Wireframes (Low-fidelity)

We listed all necessary screens and actions. I was in charge of the invitation flow.

Design (High-fidelity)

After the wireframes, we made the UI design.

Another frontend member liked design too, so they took the lead. I helped with design reviews and taught how to use Figma.

Our steps:

Make an image board
Choose a main color
Collect reference designs
Both of us designed 1 screen each to check direction
Finalize and review each other’s work

To save time, we used an 8px spacing system and design tokens for colors and fonts.

I created 4 user flows:

Landing page → Host
Invitation for guest
Guest event page
After-party review

👉 Prototype Link

3. ER Diagram & Roadmap

ER Diagram

The backend team made the ERD. We used draw.io.

Roadmap

Our PM made a roadmap based on screens. We estimated hours and managed tasks using GitHub Projects.

4. Development

General Process

While frontend worked on markup, backend created API docs. Once backend was ready, we connected the frontend.

PRs were reviewed by the same-role member, and we had short daily stand-ups (30 min) to share updates.

Frontend Development

Before jumping into development, we aligned on a few key things:

Folder structure
Component rules
Naming conventions

We used Tailwind CSS along with shadcn/ui, and added prettier-plugin-tailwindcss to keep our styles clean and consistent.

This really helped us reduce miscommunication and keep our code easy to read.

My Work

Challenges

Reusable Modal Components

I had a hard time implementing reusable modals.
The modal looked something like the one in the attachment, and at first, I tried to handle all patterns within a single component.
After discussing with a teammate, I got some helpful advice:
There are mainly two types of modals - ones that just have buttons, and ones that include input elements - so it might be faster and cleaner to split them into two separate modal components.

Even managing just those two types was still a bit confusing, so I think it was a good call in the end.

For the ones with input fields, I wanted to change the function that gets executed depending on the props, but it ended up having too many conditional branches... so I’m still not sure if that was the best approach 😅

Here's the final code👇

"use client";

type ModalProps = {
  trigger: ReactNode;
  title: string;
  description?: string;
  button?: ReactNode;
  deleteAction: (id?: string) => Promise<{ success: boolean; message: string }>;
  id?: string;
  deleteErrorMessage: string;
  onSuccess?: () => void;
};

export default function Modal({
  trigger,
  title,
  description,
  button,
  deleteAction,
  id,
  deleteErrorMessage,
  onSuccess,
}: ModalProps) {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [isOpen, setIsOpen] = useState<boolean>(false);

  const { toast } = useToast();

  const handleDelete = async (e: FormEvent) => {
    e.preventDefault();
    setIsLoading(true);

    try {
      if (id) {
        const response = await deleteAction(id);
        if (response.success) {
          setIsOpen(false);
          if (onSuccess) {
            onSuccess();
          }
        }
        return;
      }

      if (!id && deleteAction) {
        const response = await deleteAction();
        if (response.success) {
          setIsOpen(false);
          return;
        }
      }

      throw new Error("Invalid ID and no delete action available.");
    } catch (error) {
      if (error instanceof Error) {
        showErrorToast(toast, error.message, deleteErrorMessage);
      } else {
        showErrorToast(toast, "Failed to delete user", deleteErrorMessage);
      }
    } finally {
      setIsLoading(false);
    }
  };

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>{trigger}</DialogTrigger>
      <DialogContent className="bg-white">
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          {description && <DialogDescription>{description}</DialogDescription>}
        </DialogHeader>
        <DialogFooter className="flex flex-row justify-between gap-4">
          <DialogClose asChild>
            <Button type="button" variant="outline" className="w-full bg-white">
              Cancel
            </Button>
          </DialogClose>
          <Button
            type="submit"
            className="w-full bg-error font-bold shadow-none hover:bg-error/70 focus:bg-error active:bg-error"
            onClick={handleDelete}
          >
            {isLoading ? <Loader /> : button}
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  );
}

"use client";

type PersonModalProps = {
  trigger?: ReactNode;
  title: string;
  defaultName?: string;
  defaultImage?: string;
  type: "user" | "family" | "guest";
  mode?: "new" | "edit";
  familyId?: string;
  eventId?: string;
  errorMessage: string;
  onSuccess?: () => void;
};

export default function PersonModal({
  trigger,
  title,
  defaultName,
  defaultImage = "/images/profile_default.png",
  type,
  mode,
  familyId,
  eventId,
  errorMessage,
  onSuccess,
}: PersonModalProps) {
  const [isLoading, setIsLoading] = useState<boolean>(false);
  const [imageUrl, setImageUrl] = useState<string>(defaultImage);
  const [imageUrlData, setImageUrlData] = useState<File | null>(null);
  const [name, setName] = useState<string>(defaultName || "");
  const [isOpen, setIsOpen] = useState<boolean>(false);

  const inputImageRef = useRef<HTMLInputElement>(null!);
  const { toast } = useToast();

  const defaultImagePath = "/images/profile_default.png";

  useEffect(() => {
    if (isOpen) {
      setName(defaultName || "");
      setImageUrl(defaultImage);
    }
  }, [isOpen, defaultName, defaultImage]);

  // image functions
  const handleImageClick = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    inputImageRef.current.click();
  };

  const revokeObjectURL = useCallback(() => {
    if (imageUrl.startsWith("blob:")) {
      URL.revokeObjectURL(imageUrl);
    }
  }, [imageUrl]);

  const handleImageDelete = (e: React.MouseEvent) => {
    e.preventDefault();
    e.stopPropagation();
    revokeObjectURL();
    setImageUrl(defaultImagePath);
    setImageUrlData(null);
  };

  const handleImageChange = async (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files?.[0];
    if (file) {
      const imageUrl = URL.createObjectURL(file);
      setImageUrlData(file);
      setImageUrl(imageUrl);
      revokeObjectURL();
    }
  };

  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setName(e.target.value);
  };

  const resetForm = () => {
    setName(defaultName || "");
    revokeObjectURL();
    setImageUrl(defaultImage);
  };

  const handleSubmit = async (e: FormEvent) => {
    e.preventDefault();
    setIsLoading(true);

    try {
      let response;
      const updateData: { name: string; profileImageUrl?: File | null } = {
        name,
      };

      if (imageUrlData) {
        updateData.profileImageUrl = imageUrlData;
      } else if (imageUrlData === defaultImagePath) {
        updateData.profileImageUrl = null;
      }

      if (type === "user") {
        response = await updateUserInfo(updateData);
      } else if (familyId && type === "family") {
        response = await updateFamilyInfo({
          familyId,
          ...updateData,
        });
      } else if (eventId && type === "guest") {
        response = await addTemporaryParticipant(eventId, name);
      }

      if (mode === "new") {
        response = await addFamilyMember(updateData);
      }

      if (!response?.success) {
        notFound();
      }

      setIsOpen(false);
      resetForm();

      if (onSuccess) {
        onSuccess();
      }
    } catch (err: unknown) {
      if (err instanceof Error) {
        showErrorToast(toast, err.message, errorMessage);
      } else {
        showErrorToast(toast, "Unknown error occurred", errorMessage);
      }
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    return () => {
      revokeObjectURL();
    };
  }, [revokeObjectURL, imageUrl]);

  return (
    <Dialog open={isOpen} onOpenChange={setIsOpen}>
      <DialogTrigger asChild>
        {trigger ? (
          trigger
        ) : (
          <Button className="h-8 w-8 rounded-full bg-textSub/20 text-textSub shadow-none hover:bg-textSub/20 hover:opacity-70">
            <PencilLineIcon />
          </Button>
        )}
      </DialogTrigger>
      <DialogContent
        className="gap-6 bg-white"
        onClick={(e) => e.stopPropagation()}
      >
        <DialogHeader>
          <DialogTitle className="text-left">{title}</DialogTitle>
        </DialogHeader>
        <form onSubmit={handleSubmit} className="grid gap-6">
          <div className="grid justify-items-center gap-4">
            {type !== "guest" && (
              <>
                <div className="relative">
                  <button
                    type="button"
                    className="absolute -right-8"
                    onClick={handleImageDelete}
                  >
                    <X size={14} />
                  </button>
                  <button type="button" onClick={handleImageClick}>
                    <Image
                      src={imageUrl}
                      alt={name}
                      className="h-16 w-16 rounded-full object-cover"
                      width={64}
                      height={64}
                    />
                  </button>
                </div>
                <input
                  type="file"
                  id="image"
                  name="image"
                  onChange={handleImageChange}
                  hidden
                  ref={inputImageRef}
                />
              </>
            )}
            <div className="grid w-full gap-2">
              <Label htmlFor="name">Name</Label>
              <Input
                id="name"
                name="name"
                required
                onChange={handleNameChange}
                value={name}
              />
            </div>
          </div>

          <DialogFooter className="flex flex-row justify-between gap-4">
            <DialogClose asChild>
              <Button
                type="button"
                variant="outline"
                className="w-full bg-white"
              >
                Cancel
              </Button>
            </DialogClose>
            <Button type="submit" className="w-full font-bold shadow-none">
              {isLoading
                ? "Updating..."
                : mode === "new"
                  ? "Add"
                  : mode === "edit"
                    ? "Update"
                    : "Submit"}
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  );
}

Checking the API Documentation

Although I got used to it later on, in the beginning I only checked the response and didn’t properly read through the documentation.

For example, I once missed the note saying that the request body should be of type Content-Type: multipart/form-data (as shown in the attached image), and ended up wasting quite a bit of time.

Still, I’m glad I got to learn how handling image data is different from sending text or numbers, and also how to immediately display inputted image data on screen after uploading.

Naming Conventions

In my previous job, I used class names like Container or Wrap for wrapper elements when writing markup. So, I kept using names like 〇〇Container for components as well.

However, during a review, I was told that Container is a bit too abstract and that my naming pattern was a bit limited. I also got feedback that similar names like ParticipantListItem and ParticipantItem can be confusing, and I should be more mindful of that.

I realized I still lack the perspective of someone completely new to the codebase, and I’d like to improve this moving forward!

Scroll Position & shadcn Form Components

I struggled through lots of small roadblocks but managed to push forward with trial and error.

One of the hardest parts was using shadcn/ui's form component. Writing validations with zod was tricky, and dealing with type errors took more time than expected.

I also wasn’t sure whether to use that form component or go with a Next.js server action for submitting forms.

It made me wonder how experienced engineers decide what to use when dealing with more complex forms.

Another challenge was handling the scroll position.

When going back to a previous page via breadcrumb or link, the scroll position was preserved, which sometimes caused elements to be partially hidden.

I tried setting scroll={true} as suggested in some articles, but it didn’t work well. In the end, I wrote a custom function to reset the scroll position on the relevant pages.

"use client";

import { useEffect } from "react";

export default function ScrollToTop() {
  useEffect(() => {
    window.scrollTo(0, 0);
  }, []);
  return null;
}

That said, I’m not confident that this is the best approach—I'd love to learn what the recommended solution would be! 👀

What I Learned

I learned the whole process of building a project using Next.js and Node.js.

Although I had some backend classes, I didn’t write much backend code this time—just skimmed through what others wrote. So, I want to practice building small backend apps myself!

I also realized (as obvious as it may sound) how different the thought process is between designing and implementing a UI.

When designing, I focused on organizing UI elements while imagining user flows. But when coding, I had to think about what kind of data comes from the API and how it’s fetched, which required much more concrete thinking.

This is something I lacked before, and also a big reason why I wanted to learn more frontend skills.

By the way, the other frontend teammate who’s also into design had previous engineering experience, so they were already thinking about the API while designing. I thought that was really cool.

When you have to design fast, it would be ideal to not only focus on usability, layout, and visual design—but also keep data flow in mind. That’s what I want to aim for.

I’m always learning a lot from the designers I work with.

They propose ideal UI designs while also keeping implementation in mind, and I really admire that balance. I want to be able to do the same!

This time, we only used color tokens, but I’m also interested in learning more about design/frontend crossover areas like:

UI management using Storybook
MCP (which I’ve heard about a lot recently)
Building components with Figma → Cursor

🙌 Hoping to grow in those areas too!

Links

Github: https://github.com/kakimaru/oiwai
Figma: https://www.figma.com/design/1l3niGh4ZAzR5rDv2SCi8X/Oiwai?node-id=70-5925&t=MN61YXeTtCPcNe7W-1
LinkedIn: https://www.linkedin.com/in/haruka-kakiuchi-profile/

Final Thoughts

Through this project, I feel like I’ve significantly expanded my toolkit as a designer.

My goal is to grow into a design engineer who contributes to the whole product—not just visuals—and I’ll keep challenging myself with more team-based development!

If you’re planning to build a project from scratch, like for a hackathon, I hope this post gave you some helpful insights. Let’s do our best!

How to fetch API - React

Haruka Kakiuchi — Sun, 30 Jun 2024 20:41:18 +0000

Using Pokemon api
https://pokeapi.co/

How to get all data

import { useEffect } from 'react';
import { getAllPokemon } from './utils/pokemon'

function App() {
  const initialURL = `https://pokeapi.co/api/v2/pokemon/`;

  useEffect(() => {
    const fetchPokemonData = async function() {
      let res = await getAllPokemon(initialURL)
      console.log(res);
    }

    fetchPokemonData();
  }, [])


  return (
    <div className="App">

    </div>
  );
}

export const getAllPokemon = function (url) {
  return new Promise((resolve, reject) => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => resolve(data));
  });
};

Read each of data

const [pokemonData, setPokemonData] = useState([])

  useEffect(() => {
    const fetchPokemonData = async function() {
      let res = await getAllPokemon(initialURL)

      loadPokemon(res.results) // added
      setLoading(false)
    }


    fetchPokemonData();
  }, [])

  const loadPokemon = async function(data) {
    let _pokemonData = await Promise.all(data.map((item) => {
      let pokemonRecord = getPokemon(item.url)
      return pokemonRecord;
    }))
    setPokemonData(_pokemonData)
  }

Slider

Haruka Kakiuchi — Tue, 11 Jun 2024 16:27:14 +0000

// Slider
const slider = function () {
  const slides = document.querySelectorAll('.slide');
  const btnLeft = document.querySelector('.slider__btn--left');
  const btnRight = document.querySelector('.slider__btn--right');
  const dotContainer = document.querySelector('.dots');

  let curSlide = 0;
  const maxSlide = slides.length;

  // Functions
  const createDots = function () {
    slides.forEach(function (_, i) {
      dotContainer.insertAdjacentHTML(
        'beforeend',
        `<button class="dots__dot" data-slide="${i}"></button>`
      );
    });
  };

  const activateDot = function (slide) {
    document
      .querySelectorAll('.dots__dot')
      .forEach(dot => dot.classList.remove('dots__dot--active'));

    document
      .querySelector(`.dots__dot[data-slide="${slide}"]`)
      .classList.add('dots__dot--active');
  };

  const goToSlide = function (slide) {
    slides.forEach(
      (s, i) => (s.style.transform = `translateX(${100 * (i - slide)}%)`)
    );
  };

  // Next slide
  const nextSlide = function () {
    if (curSlide === maxSlide - 1) {
      curSlide = 0;
    } else {
      curSlide++;
    }

    goToSlide(curSlide);
    activateDot(curSlide);
  };

  const prevSlide = function () {
    if (curSlide === 0) {
      curSlide = maxSlide - 1;
    } else {
      curSlide--;
    }
    goToSlide(curSlide);
    activateDot(curSlide);
  };

  const init = function () {
    goToSlide(0);
    createDots();
    activateDot(0);
  };
  init();

  // Event handlers
  btnRight.addEventListener('click', nextSlide);
  btnLeft.addEventListener('click', prevSlide);

  document.addEventListener('keydown', function (e) {
    if (e.key === 'ArrowLeft') prevSlide();
    e.key === 'ArrowRight' && nextSlide();
  });

  dotContainer.addEventListener('click', function (e) {
    if (e.target.classList.contains('dots__dot')) {
      const { slide } = e.target.dataset;
      goToSlide(slide);
      activateDot(slide);
    }
  });
};
slider();

IntersectionObserver

Haruka Kakiuchi — Sun, 09 Jun 2024 07:35:45 +0000

This memo from 'The Complete JavaScript Course 2024: From Zero to Expert!' on Udemy.

const header = document.querySelector('.header');
const navHeight = nav.getBoundingClientRect().height;


const stickyNav = function (entries) {
  const [entry] = entries; // entries[0]

  if (!entry.isIntersecting) nav.classList.add('sticky');
  else nav.classList.remove('sticky');
};

const headerObserver = new IntersectionObserver(stickyNav, {
  root: null,
  threshold: 0,
  rootMargin: `-${navHeight}px`,
});
headerObserver.observe(header);

Bad way(The performance of the app on mobile devices is affected by the firing of an event on every scroll.)

const initialCoords = section1.getBoundingClientRect()

window.addEventListener('scroll', function(e) {
  console.log(window.scrollY);
  if(window.scrollY > initialCoords.top) nav.classList.add('sticky');
  else nav.classList.remove('sticky')

})

const obsCallback = function (entries, observer) {
  entries.forEach(entry => {
    console.log(entry);
  });
};

const obsOptions = {
  root: null,
  threshold: [0, 0.2], // [0, 1, 0.2] (100%)
};

Scroll revealing

const allSections = document.querySelectorAll('.section')

const revealSection = function(entries, observer) {
  const [entry] = entries;

  if(!entry.isIntersecting) return; // Guard

  entry.target.classList.remove('section--hidden')
  observer.unobserve(entry.target) // for paformance
}

const sectionObserver = new IntersectionObserver(revealSection, {
  root: null,
  threshold: 0.15,
})

allSections.forEach(function(section) {
  sectionObserver.observe(section)
  section.classList.add('section--hidden') // for everyone can see the section including person who block JS
})

Tabs

Haruka Kakiuchi — Sun, 09 Jun 2024 06:30:53 +0000

<div class="tabs_wrap">
  <div class="tabs_container">
    <button class="btn tab tab--1 tab--active" data-tab="1">
      tab button 1
    </button>
    <button class="btn tab tab--2 tab--active"  data-tab="2">
      tab button 2
    </button>
  </div>
  <div class="content content--1 content--active">
    <div>
      contents 1
    </div>
  </div>
  <div class="content content--2 content--active">
    <div>
      contents 2
    </div>
  </div>
</div>

const tabs = document.querySelectorAll('.tab');
const tabsContainer = document.querySelector('.tabs_container');
const tabsContent = document.querySelectorAll('.content');

tabsContainer.addEventListener('click', function (e) {
  const clicked = e.target.closest('.tab');

  // Guard clause
  if (!clicked) return;

  // Remove active classes
  tabs.forEach(t => t.classList.remove('tab--active'));
  tabsContent.forEach(c => c.classList.remove('content--active'));

  // Activate tab
  clicked.classList.add('tab--active');

  // Activate content area

 document.querySelector(`.content-${clicked.dataset.tab}`).classList.add('content--active');
});

Avoid using forEach to attach events to each tab. Instead, leverage event bubbling to set an event listener on the parent element and determine which child element it corresponds to.

Smooth Scroll

Haruka Kakiuchi — Sun, 09 Jun 2024 02:27:18 +0000

Conventional way

const hoge = hoge.getBoundingClientRect();

window.scrollTo({
  left : hoge.left + window.pageXOffset, 
  top: hoge.top + window.pageYOffset,
  behavior: 'smooth',
})

Recently way

hoge.scrollIntoView({behavior: "smooth"})

Viewport version

document.documentElement.clientHeight

Display the current time

Haruka Kakiuchi — Fri, 07 Jun 2024 02:08:40 +0000

Goal: 01 / 01 / 2000, 12:00

const now = new Date();
const day = `${now.getDate()}`.padStart(2, '0');
const month = `${now.getMonth() + 1}`.padStart(2, '0');
const year = now.getFullYear();
const hour = now.getHours();
const min = now.getMinutes();

padStart() needs to be used with a string.
padStart() fills the first argument's number of minutes with the elements of the second argument.

hoge.textContent = `${day}/${month}/${year}, ${hour}:${min}`;

If I want to show 'TODAY' or 'Yesterday' when the day is matched.

const calcDayPassed = (date1, date2) => Math.round(Math.abs(date2 - date1) / (1000 * 60 * 60 * 24)); // get time stamp

  const daysPassed = calcDayPassed(new Date(), date) 

  if(daysPassed === 0) return 'Today';
  if(daysPassed === 1) return 'Yesterday';
  if(daysPassed <= 7) return `${daysPassed} days ago`;
  else {
    const day = `${date.getDate()}`.padStart(2, '0');
    const month = `${date.getMonth() + 1}`.padStart(2, '0');
    const year = date.getFullYear();
    return `${day}/${month}/${year}`;
  }

Globalisation

const now = new Date();
const options = {
 hour: 'numeric',
 minute: 'numeric',
 day: 'numeric',
 month: 'numeric',
 year: `numeric`,
}

const locale = navigator.language;

hoge.textContent = new Intl.DateTimeFormat(currentAccount.locale, options).format(now);

MDN : Int

Simple Modal with Javascript

Haruka Kakiuchi — Tue, 04 Jun 2024 23:01:01 +0000

This is a note that how to make a simple modal.

<button class="show-modal">Show modal </button>

<div class="modal hidden">
      <button class="close-modal">&times;</button>
      <h1>I'm a modal window</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
        mollit anim id est laborum.
      </p>
    </div>
    <div class="overlay hidden"></div>

.hidden {
  display: none;
}

.modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70%;
  background-color: #fff;
  padding: 6rem;
  border-radius: 8px;
  box-shadow: 0 3rem 5rem rgb(0 0 0 /.3);
  z-index: 99;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 /.6);
  backdrop-filter: blur(4px);
  z-index: 1;
}

'use strict';

const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnOpenModal = document.querySelectorAll('.show-modal');

const closeModal = function() {
  modal.classList.add('hidden');
  overlay.classList.add('hidden')
}

const openModal = function() {
  modal.classList.remove('hidden');
  overlay.classList.remove('hidden')
}

// if there are many open buttons
for (let i = 0; i < btnOpenModal.length; i++) {
  btnOpenModal[i].addEventListener("click", openModal);
}


btnCloseModal.addEventListener("click", closeModal);
overlay.addEventListener('click', closeModal);

// keyboard operation (Escape version)
document.addEventListener('keydown', function(e) {
  if(e.key === 'Escape' && !modal.classList.contains('hidden')) {
      closeModal();
  }
})

for -> forEach

// if there are many open buttons
for (let i = 0; i < btnOpenModal.length; i++) {
  btnOpenModal[i].addEventListener("click", openModal);
}

↓

btnOpenModal.forEach(btn => btn.addEventListner('click', openModal)

My Engineering Journey Begins!

Haruka Kakiuchi — Fri, 03 May 2024 03:22:06 +0000

Hi, I'm Haruka.
I am studying Web development at CICCC in Vancouver.

This article is my first assignment.
I'll introduce my self and write about expectation for the course.

About me

Nationality: Japanese
Education: Bachelor's Degree in Economics
Skills: Self-taught UI Designer
Experience: UI Designer at palan,inc, an Augmented Reality company
Interests: Food, Sleep, Gaming

My expectations for the course

For three years, I thrived as a UI designer, gaining valuable experience. However, I yearned to delve deeper into the fundamental workings of the products I designed.

The services I worked on utilized Ruby on Rails and JavaScript(including Three.js etc). While my role focused on UI design, my lack of knowledge in these languages limited the scope of my contributions.

Particularly captivated by Figma, I attempted to create plugins. However, insufficient knowledge and limited time for dedicated learning proved to be roadblocks.

Driven by this desire to expand my skillset, I choose this course. My primary goals are to gain proficiency in JavaScript and independently create projects by the course's completion.

This program offers a unique structure with one year dedicated to learning and a subsequent year focused on practical application. During the practical year, I aspire to join a new team as either a front-end engineer or UI designer.

By mastering front-end language, I aim to establish a robust design system foundation.

How was my experience with the first week

In the first week, I've been diving into the foundational concepts of computers, and there's been a surprising amount of new information to absorb. I'm really enjoying the process.

One topic that particularly piqued my interest was networking. It's fascinating to learn how servers located around the world connect with my IP address to ensure the fastest response time. It's a complex system, but understanding its core function has been incredibly insightful.

The number systems class was also interesting. While I knew computers utilize a binary system with 0 and 1, the deeper dive into this concept provided a much clearer understanding.

Another unexpected discovery this week was about ASCII.
In Japan, ASCII art used by early internet users for online bulletin boards. I had no idea the origins of the format, so learning about it was a pleasant surprise.

What I want to achieve after the course?

As I wrote in this article, I aspire to join new team as either a front-engineer or a UI designer.

I hope my dedication to learning to learn the language will have a positive impact on my life.

Shared with: Risa, Evangelina