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 using radio buttons

Anis Bacha 500

@AnisBacha

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 was unable to find a straightforward method to change the background color of the selected button, so I resorted to using a lengthy JavaScript code. While it may not be the optimal solution, it does effectively achieve the desired result, any better way to achieve better results, please tell me.

Community feedback

P

@ryanbradley-webdev

Posted

Great job! I went through your code and have a suggestion for optimizing the button states.

Using radio buttons is a great idea for this because it automatically unchecks a selected button if you select a different one. You can actually target the buttons using CSS with basically no JavaScript. If you use a CSS selector for "input[type="radio"]", you can target both the ":checked" and ":hover" states, setting the appropriate style for each.

I hope this helps! Great job again!

Marked as helpful

1

Anis Bacha 500

@AnisBacha

Posted

@ryanbradley-webdev Thank you so much! I appreciate your help with finding the solution.

1

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