interactive rating component main using react and tailwind css

Community feedback

• 

  Franck•180

  @SFN98

  Posted over 1 year ago

  Hello, your solution looks good and i have some suggestions that may improve your code:

  when the user choose a number this one should be on focus

  I saw that when user choose a number, this one doesn't appear on the thank you page, try to fixe it.

  /// This function let us to choose  a number
  function choosenumber(){
      let numbers = document.querySelectorAll(".number div")
      
      for(let i=0; i<numbers.length;i++){
          numbers[i].addEventListener("click", ()=>{
              // Remove "active" class of all elements
              numbers.forEach(element => {
                  element.classList.remove("active");
              });
  
              // Add "active" class of clicked element
              numbers[i].classList.toggle("active");
  
                  let choice = document.querySelector("span")
              if(numbers[i].classList.contains("active")){
                  choice.innerText=numbers[i].innerText
              }
              
          }) 
          
      }
  }
  

  There's an other way to do this, but this is how me i understood it.

  you can also do that if the user click on submit without choosing a number, he receive an error message and disabled button

  10