Interactive rating component main

Community feedback

• 

  Younes Adjoudj•240

  @younesadjoudjPosted about 1 year ago

  JS code Updated:

  let primaryScreen = document.querySelector(".screen-primary");
  let thankYouScreen = document.querySelector(".screen-thank-you");
  let rate = document.querySelectorAll(".rate");
  let rateSelected = document.querySelector('.rate-selected');
  
  let lastClickedRate = null;
  rateSelected.textContent = "";
  
  rate.forEach((div) => {
      div.addEventListener('click', function() {
          if (lastClickedRate) {
              lastClickedRate.style.backgroundColor = 'hsl(217, 10%, 35%)'; // Restore the initial style of the last clicked div
              lastClickedRate.style.color = "hsl(217, 12%, 63%)";
          }
  
          this.style.backgroundColor = 'hsl(25, 97%, 53%)'; // Change the style of the currently clicked div
          this.style.color = "#fff";
          lastClickedRate = this; // Updates reference to last clicked div
  
          rateSelected.textContent = div.dataset.value; // save the data value of the selected rate
      }); 
  });
  
  btn.addEventListener("click", (e) => {
      e.preventDefault();
      if(rateSelected.textContent == "") {
          window.alert("Please choose an option and try again");
      } else {
          primaryScreen.style.display = "none"; 
          thankYouScreen.style.display = "initial";    
      }
  } );
  

  0