Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive rating page

Thomas 50

@thomaspaysac

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

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

@TH3RIV

Posted

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

@thomaspaysac

Posted

@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
Discord logo

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