Interactive Rating Component

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