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 Component

#accessibility

@LesleyWesley

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


Hi guys!

This was my first time working with radio buttons in any substantial way, and I tried to make the whole thing as accessible as I knew how, but let me know if there's any way I could improve it!

Also, I added an error message if the user tries to submit the form before choosing a rating, because I felt like it needed it. The user is also able to choose the rating using the UI or number keys and the "Enter" key.

As usual, any feedback is welcome! :)

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Hi there, Lesley Wesley! 👋

Excellent work on this challenge! 👏 Your solution looks great and the form works very well! 🙌 Great job thinking about the functionality of the form and adding an extra validation error message. 👍

One thing is that I wouldn't add any alt text to the icons in this component since they are mostly there for design and we don't really want them to be noticed and read by screen readers.

Also, make to sure validate the form when the user hits the 'Enter' key since currently the thank you screen shows regardless of whether an option has been selected yet. 😉

Hope you find this helpful. 😊

Keep coding (and happy coding, too)! 😁

Marked as helpful

1

@LesleyWesley

Posted

@ApplePieGiraffe I removed the alt text and updated it so the "Enter" key also validates the form! Thank you for the feedback! :)

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