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

@md-abid-hussain

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


What did you find difficult while building the project?

  • Calculating height
  • Organizing my CSS

Which areas of your code are you unsure of?

  • Height and width of the component
  • When user select more than one rating, color remain grey

Do you have any questions about best practices?

  • How i can write organized css
  • Suggestion to improve this project

Community feedback

Azzumar 340

@Azzumarithm

Posted

Just to make it more clean, when you click other rating numbers after you have selected one rating number, make sure that you set the background color of the previous selected rating number to the default color. You can add another class ("selected") in JS to the rating number that you have clicked (and not the other rating numbers) and then let say if you click another rating number again, you'll remove that "selected" class from the previous selected rating number and then add another "selected" class to current selected rating number. Don't forget to apply the css to the .selected class. Hopefully this makes sense.

Marked as helpful

1

@md-abid-hussain

Posted

@Azzumarithm thanks for suggestion

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