Submitted over 1 year ago

Interactive Rating component

Flexowitsch•160

@Flexowitsch

Preview site View code

This is a solution for...Interactive rating component

HTML
CSS
JS

1newbie

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
@HollowZllPosted over 1 year ago
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

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