Submitted over 1 year ago

Interactive rating component using React

Galih Arizza• 230

@chadittya

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

The hardest part I found when building this project is :

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
The card pallet is not included in recourses, so I find it myself with color picker to get the it's color.
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• 680

@kwngptrl

Posted over 1 year 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

Galih Arizza• 230

@chadittya

Posted over 1 year ago

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

Please log in to post a comment

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