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

P

@Flexowitsch

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,

I am aware that the star and the image on the rating page ar missing.

I did this to get better at javascript. What i wasnt able to create was an active state. When the rating button is clicked, it should remain orange. How can this be done?

Community feedback

Holow 100

@HollowZll

Posted

document.querySelector('.ratings').onclick = function(event) { console.log("event", event); changeNumber(event); let clicked = event.target.innerHTML; let color = event.target; color.style.backgroundColor = orange; color.style.color = white; console.log("esto es un rating", rating ); };

I did it by selecting the whole range of buttons by selecting the div where all the ratings were. (.ratings). ----> then onclick ----> selected the button with the variable color ----> then use the .style for it to stay orange. Hope this helps in some way :)

Marked as helpful

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