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 with HTML CSS and JavaScript

Fedemurruā€¢ 10

@fedemurru

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


any suggestion to improve the code?

Community feedback

@VCarames

Posted

Hey there! šŸ‘‹ Here are some suggestions to help improve your code:

Unfortunately the HTML for the rating part needs to be rewritten as it was done incorrectly.

To ensure the ratings are fully accessible to all users and are built with the proper elements, the entire rating part needs to be built using a form element.

  1. Wrap all elements within a fieldset, which will contain a visually hidden legend using CSS.
  2. Within the fieldset, include five (5) input radio elements, each associated with a corresponding label to enhance the accessibility of the "ratings."
  3. Lastly, include a button to allow users to submit their selection.

After implementing the above changes, for your JS, the eventListener should be attached to the form element, listening for a submit event.

If you have any questions or need further clarification, feel free to reach out to me.

Happy Coding! šŸ‘¾

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