Interactive Rating Component - CSS Design and JavaScript
Design comparison
Solution retrospective
My FIRST JavaScript challenge, it took me 4 hours to finish this. 😅 In the end, it seems to work well, however, there are 2 things I don't know how to make it work yet.
-
I use toggle to apply "active" class when user clicks the rating value, but it didn't apply the CSS property in the end. (It should show and keep the primary orange color when the button is clicked.)
-
How can we just show mainly the latest button with active class, when the user click it. They could click many times with different values, but how can we just show the latest clicked?
If you know how to solve the problems or any idea, welcome to give me any advice, thanks for helping. :)
Community feedback
- @RajSanjelPosted over 2 years ago
- You should style active class in css.
- You can add if else for removing the active class from previously clicked button.
- When user doesn't click anything and submit the score it shows "You selected out of 5" you should set it 1 by default or add alert saying rating must be selected.
- You can improve your design. Hope this helped.
2@ponhuangPosted over 2 years ago@RajSanjel Thank you so so much🙏🏻 These advices really help a lot!! I fixed all the issues now :)
0@RajSanjelPosted over 2 years ago@ponhuang Its my pleasure. If you want any help you can remember me.
1
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