Skip to content
Submitted about 2 years ago

Interactive Rating Component with JS

NicholasChristopherBlake•130
@NicholasChristopherBlake
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Is it a good practice to hide a second container (the Thank You State, in this challenge) or are there better ways to change the content of a page without loading another webpage? Also, I used <p> for rating numbers, but I think it was not the best idea. What would be better?

Community feedback

  • バレンタイン 😈•64,170
    @VCaramesPosted about 2 years ago

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

    Regarding you question,

    For this challenge you would can either use a hidden attribute or class to "hide" the "thank you" content. Regarding using paragraph elements for the rating is 100% incorrect way of creating the rating container.

    The proper way is to create a form and inside of it, the “rating buttons” should be built using an input radio (wrap all of them inside a fieldset), since this will prevent additional buttons from being active at the same time, and it should have a label element attached to it for accessibility.

    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
    1

Please log in to post a comment

Log in with GitHub

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