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

Brad King 50

@Bradpresleyk

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

dolapobj 310

@dolapobj

Posted

Well done, looks great! A few tips:

  1. Instead of writing out event listeners for each button, like this:
numberOne.addEventListener("click",function(){
    selected = this.value;
    numberTwo.style.backgroundColor = "hsl(213, 19%, 18%)";
    numberThree.style.backgroundColor = "hsl(213, 19%, 18%)";
    numberFour.style.backgroundColor = "hsl(213, 19%, 18%)";
    numberFive.style.backgroundColor = "hsl(213, 19%, 18%)";
    this.style.backgroundColor = "hsl(217, 12%, 63%)";
    
})

numberTwo.addEventListener("click",function(){
    selected = this.value;
    numberOne.style.backgroundColor = "hsl(213, 19%, 18%)";
    numberThree.style.backgroundColor = "hsl(213, 19%, 18%)";
    numberFour.style.backgroundColor = "hsl(213, 19%, 18%)";
    numberFive.style.backgroundColor = "hsl(213, 19%, 18%)";
    this.style.backgroundColor = "hsl(217, 12%, 63%)";
})

you could instead apply a single function to all the buttons at once. This would handle changing the colors. For example, I had a class in my CSS that was "clicked". I had an event listener that I applied to all buttons, that applied an styleButton function, which added the "clicked" class to the selected button, and removed it from all other buttons. This way, you can make the code more reusable. Hope this helps!

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