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

Here are some screenshots of my app.

Links

• Solution URL: Github
• Live Site URL: Netlify

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• CSS Grid
• Mobile-first workflow
• React - JS library
• [Vite] (https://vitejs.dev/)- Build tool
• Styled Components - For styles

What I learned

• I learned how to build an app using Vite and React. The development process was much faster than using create-react-app.

• I learned how to use styled components to create a component that can be reused throughout the app. I also learned how to use the useState hook to update the state of the app when a user clicks on a rating.

• I learned how to render a new component when a user clicks on a submit button and had first selected a rating.

.icon:hover {
  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(0deg) brightness(
      100%
    ) contrast(100%);
}

if (success) {
  successComponent = (
    <div>
      <img src={img}></img>
      <p className="result">
        You selected {selectedNumber.target.value} out of 5
      </p>
      <h1>Thank you !</h1>
      <p>
        {" "}
        We appreciate you taking the time to give a rating. If you ever need more
        support, don't hesitate to get in touch!
      </p>
    </div>
  );
}

Continued development

• I will continue to learn how to use complicated CSS properties and how to use React to build more complex apps.
• I will also learn how to use React Router to create a multi-page app.
• Last but not least, I will learn how to use React Context to manage the state of the app.

Author

• Website - Elisabeth Erkekoglou
• Frontend Mentor - @elic4vet
• Instagram - @elisa.codes23