Skip to content
  • Learning paths
  • Challenges
  • Solutions
  • Articles
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 2 years ago

Interactive Rating Component by DexFA

accessibility, animation, foundation
Fidelis Adaikwu•40
@DexFA
A solution to the Interactive rating component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)
Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Account deletedPosted almost 2 years ago

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

    • Remove all the br elements you added, they are not ❌ being used correctly.
    • The HTML for the ratings needs to be rewritten as it was done incorrectly ❌:

    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: Form Element

    MDN: <input type="radio">

    MDN: Field Set Element

    • Once the top is implemented , for your JS, the eventListener should be on the form as a submit.

    More Info:📚

    Click vs. Submit EventListeners

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

    Happy Coding! 👾

    Marked as helpful

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub