Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive rating with Flexbox and Vanilla JS

Salmaneā€¢ 10

@salmanetamo

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I considered using a form with radio buttons for the ratings but styling radio buttons is quite tricky, so I simply reverted to using good old event listeners. Would you have considered that a better approach?

Community feedback

John Mirageā€¢ 1,610

@john-mirage

Posted

Hello Yes, radio inputs are a bit tricky, i did it on my project if you want to see how it can be done (its made with tailwindcss). I tried to only use CSS for the project but i had some issues with keyboard controls, so i added js to disable inputs when submit and allow user to press enter to submit.

0
Shashree Samuelā€¢ 9,260

@shashreesamuel

Posted

Hey good job completing this challenge

Keep up the good work

Your solution looks great however I think that the description needs some line-height using line-height.

I hope this helps

Cheers Happy coding šŸ‘

0
CyrusKabirā€¢ 1,885

@CyrusKabir

Posted

Hello my dear friend ā™„ using radio buttons for this challenge actually is good but for styling you should use <label> tag too you can check this link about labels <label>, and you should handle styles to label tag; but using this approach cause some accessibility issues for example we can't use keyboard to selecting buttons and for this we can use tabindex attribute on labels here you can read about tabindex attribute tabindex

0

Please log in to post a comment

Log in with GitHub
Discord logo

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