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

@CodeWithDion

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@bccpadge

Posted

Hello @CodeWithDion. Congratulations on completing this challenge!! 🎉

I have a few suggestions to improve your code below.

Every website must have a landmark like <main> tag

  • You can wrap your content using a <main> tag instead of <section> tag

More info 📚

I see that you used a <ul> to wrap all rating buttons but that isn't accessible for screen readers.

  • To fix this issue you can you use radio buttons
  • Example here: <input type="radio" class="visually-hidden" name="rating" value="1" />
  • The visually-hidden class just hides the content visually but is available for screen readers.

Here is my solution if you want to check it out - Interactive rating component

Hope this helps you and don't hesitate to reach out to me if you have any questions

Marked as helpful

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