Interactive Rating with Error Message 🚨

Solution retrospective
I solved this challenge by using radio inputs and indicating which rating is selected through labels associated with them.
<input class="radio" id="one" name="rating" type="radio" value="1" /> <label for="one">1</label>
.radio:hover + label, .radio:focus + label { background: var(--pure-white); color: var(--dark-blue); } .radio:checked + label { background: var(--orange); color: var(--dark-blue); font-weight: bold; }
However, there could be better approaches to this.
What challenges did you encounter, and how did you overcome them?The biggest problem was that I didn't set initial background color for the radio buttons so whenever a button was selected, the orange checked background color would stay. This was an easy fix, I just had to set initial background color.
What specific areas of your project would you like help with?I'd like help with accessibility since I'm doing this challenge as part of the Accessibility Pathway. Any tips on how to make this solution more accessible would be appreciated!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @rukhulkirom
Hello there👋. Good job on completing the challenge!
I have some suggestions about your code that might interest you.
- Improve Keyboard Accessibility
-
Currently, you handle keypress (Enter key) on radio buttons, but the standard event for accessibility is keydown.
-
Solution: Change the event from keypress to keydown:
radioButtons.forEach((button) => { button.addEventListener("keydown", handleRating); });
I hope you find it useful! Above all, the solution you submitted is great!
Happy coding!
Marked as helpful
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