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

grid flexbox vanilla javascript

@mariby21

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 need to learn media query

Community feedback

@VCarames

Posted

Hey there! 👋 Here are some suggestions to help improve your code:

  • Every component/site should always have ✅ the following two, a main and h1 element (if this was a larger challenge, it would be a different heading level).
  • To ensure that the "rating buttons" are fully accessible 💯, they need to be built using a form ⚠️.
  1. Everything will be wrapped inside a fieldset which will have a legend that is visually hidden using CSS.
  2. Inside, there should be five input radios and each input should have a label attached to it to make the “ratings” accessible.
  3. The last thing you will want to include will be a button so users can submit their choice.

More Info: 📚

MDN: <input type="radio">

MDN: Field Set Element

  • Currently ⚠️, users can submit without selecting a rating. To fix this, you can do one of the following:
  1. Make the “5” rating the default rating.
  2. Create an error message, telling users they need make a selection.
  3. Disable the button until a selection is made.

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

Happy Coding! 🎆🎊🪅

Marked as helpful

0

@mariby21

Posted

@vcarames Thank you

1

@mariby21

Posted

@vcarames i do some changes how its now :)

0

@VCarames

Posted

@mariby21

The rating "buttons" are still being built incorrect. The way I mentioned previously, is the only way to complete this challenge correctly.

The section element that you added, is being used incorrectly ⚠️ and not needed for this challenge .

The form should be outside the fieldset.

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