branalex94 / interactive-rating-component

A frontendmentor challenge to create an interactive rating component. Made using react and vite as compiler

Frontend Mentor - Interactive rating component solution

This is a solution to the Interactive rating component challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author

Overview

The challenge

Users should be able to:

• View the optimal layout for the app depending on their device's screen size
• See hover states for all interactive elements on the page
• Select and submit a number rating
• See the "Thank you" card state after submitting a rating

Screenshot

Links

• Solution URL: (https://github.com/branalex94/interactive-rating-component)
• Live Site URL: (https://branalex94.github.io/interactive-rating-component/)

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• [Vite] (https://vitejs.dev/) - JS Bundler

What I learned

I learned how to create a multiple choice/unique choice selector using ReactJS.

const handleClick = (e) => {
  setRating(e.currentTarget.textContent);
  setIsRatingSelected(true);
};

useEffect(() => {
  if (rating === selectedRating) {
    setIsActive(true);
  } else {
    setIsActive(false);
  }
}, [selectedRating]);

Continued development

I'd like to focus on improving my code and maintaining it as clean as possible. As well as better use of frameworks and libraries features.

Author

• GitHub - branalex94
• Frontend Mentor - @branalex94
• LinkedIn - Brandon Aray