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 using semantic html, css and javascript

@Khalifa-pendrops

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

Design comparison


SolutionDesign

Community feedback

@Adek1812

Posted

Hello Chikezie you should use :focus in your project becouse now when i click raiting I can highlight all of them in orange instead of just one. I had the same problem and find this solution. You will have to modify the html a bit becouse :focus will work with button not span. Run my code on gitHub and check. I thing tha you will understand

Marked as helpful

0

@Khalifa-pendrops

Posted

Thank you @Adek1812 This will be helpful. Let me look into it now. I appreciate your feedback.

0

@Khalifa-pendrops

Posted

Also @Adek1812, I have an issue i needed to resolve on the JS part. When I click a rating (say 5), and then I changed my mind and want to rate 2. When I want to click rating 5 again to unclick it, it doesn't work. Any lead please?

0

@Adek1812

Posted

@Khalifa-pendrops You don't need active class and function in js :focus switches ratings and you put it in css because it is Pseudo-classes like :hover

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