Skip to content
Submitted over 2 years ago

Interactive-rating-component

Dave•40
@davidMorekwa
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

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

  • William Nicholson•75
    @Passenger89Posted over 2 years ago

    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
  • Khalil Nazari•220
    @khalilnazariPosted over 2 years ago

    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
    @gcnwPosted over 2 years ago

    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

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