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

Interactive-rating-component

Dave 40

@davidMorekwa

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


While doing the challenge I was unable to implement the effect where the numbers maintain a gray background after being clicked. I don't know if my problem is clear but if you understood it please help. Thanks in advance.

Community feedback

@Passenger89

Posted

Hi Dave!

You are doing well so far. One possible solution that I implemented in order to change the background color of the selected option was to first implement them as a set of radio buttons.

I then added the property appearance: none to the radio inputs themselves in order to hide the default styles. I selected the label of the adjacent selected radio button with the pseudo selector :checked like so .radio-input:checked + label and altered the background of the label itelf. Now whichever radio input is checked will have the background color you set.

0

@khalilnazari

Posted

Hi, Congratulations on completing this challenge. However, your work for this challenge is not complete, especially when selecting the number of votes. For example, when selecting 1, it does not highlight the number.

You can look at my solutions if looking for improvement.

good luck!

0
Gary 210

@gcnw

Posted

I set up a JS function to change the background color of the whichever element was clicked.

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