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

HTML CSS JS

Anderson 40

@anderson-ssilva

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


Hello! This is the solution it was I able to come up with with my current skills. There is room for improvement, but with my current skills I was unable to apply a solution for hover validation when a user selects more than one rating, as well as when he does not select any rating and submit the form. I would be grateful if anyone can give me some advice on this.

Community feedback

Mukwende 1,370

@mukwende2000

Posted

How to apply hover effect to only the clicked element

  1. Select all the ratings in your javascript using document.queryselectorAll(nameoftheelement)
  2. loop through each rating using a forEach and add an event listener for click to each rating
  3. Write a function that loops through all the ratings and check if the rating is the clicked element or not, if it is, add the class that has the hover effect else remove it.

Marked as helpful

1

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