Skip to content
Submitted almost 2 years ago

Responsive rating page

Thomas•50
@thomaspaysac
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

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.

Community feedback

  • Saulius K.•560
    @TH3RIVPosted almost 2 years ago

    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
    1
    Thomas•50
    @thomaspaysacPosted almost 2 years ago

    @TH3RIV Thanks a lot I'll have to look into that, I studied CSS in-depth but it seems I lack some basic HTML knowledge.

    0

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