Interactive Rating Component

Community feedback

• 

  Warren•650

  @warrenlee

  Posted almost 3 years ago

  Hey Satyam, looking at your code, in your submitbtn event listener for click I would check if selectedrating is defined/not empty before deciding to show the thank you message.

  For your second question in your function ratingdisplay you would typically do a reset before firing the selected state, and I would use classes and it'll make things easier and concise.

  What you have now is this.

  function ratingdisplay(event) {
    ratingbutton.forEach(() => {
      event.target.style.backgroundColor = "hsl(25, 97%, 53%)";
      event.target.style.color = "white";
      selectedrating = event.target.value;
    });
  }
  

  Firstly the forEach loop is redundant as it's apply the same styles to the same element, so instead I would use this forEach loop to reset the styles to what they were before and then apply the active state after.

  function ratingdisplay(event) {
    ratingbutton.forEach(() => {
      // reset your styles for each ratingbutton here
    });
  
    // apply selected state here
    event.target.style.backgroundColor = "hsl(25, 97%, 53%)";
    event.target.style.color = "white";
    selectedrating = event.target.value;
  }
  

  But if you use classes instead.

  function ratingdisplay(event) {
    ratingbutton.forEach((el) => {
      // reset your styles for each ratingbutton here
      el.classList.remove('selected');
    });
  
    // apply selected state here
    event.target.classList.add('selected');
    selectedrating = event.target.value;
  }
  

  Or even better still do comparison checks and use toggle instead.

  function ratingdisplay(event) {
    ratingbutton.forEach((el) => {
      // Use toggle to evaluate if the class should be added or removed
      el.classList.toggle('selected', el.value === event.target.value);
    });
  
    selectedrating = event.target.value;
  }
  

  Hope this helps

  11

  Marked as helpful