Responsive interactive rating component. Built with sass!
Design comparison
Solution retrospective
Any feedback appreciated, especially on my method of using display: none to hide the thank you element. Left my sass code in there aswell if anyone wants to look!
Community feedback
- @BerqiaMouadPosted over 1 year ago
Hello!
I really like your solution to the challenge!
But quick not about the font weight of the paragraph in the thank you component, you made it a bit too bold, and for the ratings, when you click a rating, the user will have to remove the cursor to see the changes happening.
Once again, great job! Hope you find this comment helpful!
Marked as helpful0@MoggStephenPosted over 1 year ago@BerqiaMouad
Think ive finally figured out how to import a font from the google fonts api and get the different weights supplied in the style guides. So hopefully my next solutions should have correct weights aha.
Realized all I had to do was change my rating divs to buttons so I could use the focus psuedo class.
Thanks for the input!
1 - @visualdennissPosted over 1 year ago
Hey there,
nice work with the JS!
As for best practice, I'd suggest adding a cursor: pointer; to all the buttons (rating buttons and submit button) to indicate interactivity to the user and therefore improving the user experience as well.
Hope you find this feedback helpful!
Marked as helpful0
Please log in to post a comment
Log in with GitHubJoin 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