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

P

@GrayTechFun

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


Please give me advice for how to make one rating be orange at once (not all of them could be orange ) and how to grab the different rating innerText to the submitted page (You selected ${rate} out of 5).

Community feedback

Trevor 200

@Tactenator

Posted

Hello! Your solution looks good! As for your questions:

  1. Based on your code, when someone clicks on your span, it will add the class 'clicked'. However, there is no code to remove code from another span when another one is clicked. To resolve this, what you can do loop through each span in your query selector to check if it has the 'checked' class. If it does, the loop can remove the clicked class, and allow you to add 'clicked' to the correct div the user clicks.

  2. As for the correct rating, that can be done by grabbing the inner text of the span much like you have now.

I hope this helps! Have a good one!

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