Skip to content
Submitted about 3 years ago

Interactive-rating-component

Dave•40
@davidMorekwa
A solution to the Interactive rating component challenge
Preview (opens in new tab)Code (opens in new tab)

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.

Code

Please log in to post a comment

Log in

Community feedback

  • William Nicholson•75
    @Passenger89

    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.

  • Khalil Nazari•220
    @khalilnazari

    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!

  • Gary•210
    @gcnw

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

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