Skip to content
Submitted almost 2 years ago

Interactive rating component using React

Galih Arizza•230
@chadittya
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

The hardest part I found when building this project is :

  1. I'm not familiar with background image. I try to follow Tailwindcss's docs but the image still not displaying. It turn out, I have to define its <div> width and height first so the image could displaying embarrassed
  2. The card pallet is not included in recourses, so I find it myself with color picker to get the it's color.
  3. I'm from vanilla JS, so I'm not familiar with React useState Hook but I want to learn it. Moreover this also waste my time a lot to try to figure it out somehow.

If there is a feedbacks about my solution to get better, please leave it. I appreciate all your feedbacks.

Thank you!

Community feedback

  • wannacode•720
    @kwngptrlPosted almost 2 years ago

    Don't be embarrassed, at least you're already going with Tailwind and React. I did this only with vanilla JS. Now, if you could add something that would check if the user did not choose a rating and prevent submitting, then your solution would be complete. Transitions are another thing to add, but that's just icing on the cake.

    Marked as helpful
    0
    Galih Arizza•230
    @chadittyaPosted almost 2 years ago

    @kwngptrl Thank you for your feedback! will try to add the validation and transition later

    0

Please log in to post a comment

Log in with GitHub

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord