Interactive-Rating-Component

Community feedback

• 

  dolapobj•310

  @dolapobjPosted 4 months ago

  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