Skip to content
Submitted over 1 year ago

Interactive Rating Component

Lesley Wesley•365
@LesleyWesley
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

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

  • ApplePieGiraffe•30,545
    @ApplePieGiraffePosted over 1 year ago

    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
    Lesley Wesley•365
    @LesleyWesleyPosted over 1 year ago

    @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

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