Day 33 - Day 34: First JavaScript Component

✍🏻 Log Date: 11 June 2025
For the past two days, I applied the JavaScript fundamentals I've been learning to real-world mini challenges from frontendmentor.io. I focused on building two commonly used UI components: a rating interface and an FAQ accordion

Both are useful, reusable, and perfect for sharpening my JS basics while building visible, working features early on.

🛠️ What I Coded (Highlights):

Interactive Rating Component (Attempt 1 & 2)

Live Demo: https://edwardcjianken.github.io/interactive-rating-component//
GitHub Repo: https://github.com/edwardcjianken/interactive-rating-component/tree/main/docs

• Combined :hover and ::before pseudo-elements on radio buttons for a dynamic highlight effect.

Button with mouse hovered:

Button when clicked:

• Used JavaScript for basic form validation: when no rating is selected, the radio buttons blink twice with an orange border.

• Captured user input and reused it on the thank-you screen to print dynamically - "You selected <user input> out of 5"

FAQ Accordion Component (Attempt 1 & 2)

Live Demo: https://edwardcjianken.github.io/faq-accordian-component/
GitHub Repo: https://github.com/edwardcjianken/faq-accordian-component/tree/main/docs

• Accordion logic felt tricky at first, but I eventually understood how toggling content visibility can be done with max-height and overflow: hidden.

• Used .closest() to move up the DOM tree and .querySelector() to target nested elements — super handy for clean, modular scripting.

  const accItem = plusBtn.closest(".faq__acc-item");
  const accAnswer = accItem.querySelector(".faq__acc-answer");
  const minusBtn = accItem.querySelector(".faq__minus-icon");

• In my second attempt, I improved UX by toggling plus/minus icons based on whether the panel is expanded or collapsed.

💡 Reflection:
It felt great seeing small pieces of JavaScript come to life in these UI components. These small wins are encouraging and make me excited to gradually increase project complexity. Onward! 🚀