Skip to content
Submitted over 2 years ago

Interactive Rating Component using HTML, CSS, JavaScript

Jorge Adalberto•100
@yorchAdalbert
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

In order to get the user rating input, I used radio buttons and modified its style. I know this isn't the best option to solve this problema due to I have to modify the label a lot to make them look great inside the radio buttons and when I resize the screen this labels get odd. I Know there should be another better solution for this challenge, however, this is the only solution that crossed my mind. Thanks for your time. Any feedback will be welcome!

Code

Please log in to post a comment

Log in

Community feedback

  • Account deleted

    Hey there! 👋

    Using input radios for the ratings is the correct way of doing this challenge.

    This will help with the styling:

    https://moderncss.dev/pure-css-custom-styled-radio-buttons/

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

    Happy Coding!🎄🎁

    Marked as helpful
  • Ronald Sayre•260
    @RJ3605

    Hi Jorge,

    There are many ways to do every project. It's right as long as it works. That said, I can shine some light on how to do this with the <button> tag instead of <input type="radio">. This method is good if you want to practice JavaScript.

    First set up buttons 1-5 as you have done with styling and all for their static and :hover attributes. Then create a class="active". When the active class is added to a button is should look like yours does when it is selected. From there you need to add an event listener in JavaScript. The event type should be 'click'. The necessary order of events will be to remove the active class, if present, from any of the buttons. Then you will need to add the class to the selected button. After that you will want the event to change the text content of the second page to include the number of the clicked button.

    Please feel free to check out my solution below for my code if you're interested. I used radio inputs but also used .forEach() to practice JavaScript. https://www.frontendmentor.io/solutions/interactive-rating-component-using-css-flexbox-and-base-javascript-HhhDgY0C8G

    If you have any questions or if my comment is unclear, please feel free to reach out to me and I would be happy to explain more thoroughly.

    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