Skip to content
Submitted almost 3 years ago

Responsive rating page

Thomas•50
@thomaspaysac
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

The Javascript is working but I'm not satisfied with the code, is there any way to optimize it ? I tried using a for loop to highlight the selected rating and deselect the others, but I couldn't get it to work.

Code

Please log in to post a comment

Log in

Community feedback

  • Saulius K.•560
    @TH3RIV

    Hi, @stagnant-sys!

    There's no need to use JS for highlighting a selected option. You can use radio buttons instead of divs with the same name so only one can be selected at a time.

    Then with CSS you hide them and style the labels, so whenever you select a label it selects the button and if you pick a different one, it deselects it.

    JavaScript is only needed to switch between Select and Thanks screens (eventListener) and to show the selected value (for loop).

    You can look at my solution for a better idea on what I mean.

    Hope this helps!

    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