Skip to content
Submitted over 2 years ago

Interactive rating component

Dadic•180
@Eleansphere
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

So i've done this challenge, i'm not sure if the buttons are the proper solution, rather than select tag with option. Anyway everybody likes clicking buttons :) atleast thats what i'm thinking. JS part is done by me maybe to coplicated, but it was really fun managing DOM!

Code

Please log in to post a comment

Log in

Community feedback

  • Account deleted

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

    • it is best practice to have separate files for HTML, CSS, and JS.
    • The “icons/illustrations” in this component serve no other purpose than to be decorative; They add no value. There alt tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

    More Info:📚

    https://www.w3.org/WAI/tutorials/images/

    • The proper way to build the "rating buttons" in this challenge is to create a form and inside of it, there should be fiveinput radios and each input should have a label attached to it to make the buttons accessible. Finally wrap all the inputs and labels inside a fieldset to prevent users from making more than one selection.

    More Info:📚

    MDN <input type="radio">

    MDN <fieldset>: The Field Set element

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

    Happy Coding!🎄🎁

    Marked as helpful
  • 👾 Ekaterine Mitagvaria 👾•7,860
    @catherineisonline

    Looks nice! I don't remember exactly but I think when you select the value it has to stay orange, not gray.

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