Interactive rating component with tailwindcss and Javascript

Community feedback

• Account deleted

  Congrats on completing the challenge🎉

  One suggestion, instead of storing only the text content on the rating variable, you might want to store the selected element instead. So you can reset the styling on the previously selected rating when the user clicks on another rating.

  // instead of this
  rating = span[i].textContent
  
  // You want this
  rating = span[i]
  

  Then when the user clicks on another rating, before you reassign the selected element into the rating variable, you want to clear the styling on the previously selected rating first.

    span[i].addEventListener("click", () => {
     if(rating){
         // reset the styling for the previously selected rating
     }
      rating = span[i]; // reassign the new selected rating
      //Then add styling for the selected rating
    });
  

  I hope you find this helpful😁

  1
• 

  Rajaul Islam Ratul•1,250

  @ratul0407Posted about 1 year ago

  @siyosu Thanks man the issue is solved😀

  Thank you for giving your time🙂

  0

  ---

  Account deleted

  @ratul0407 My pleasure, glad I can help😁

  1
• 

  Rajaul Islam Ratul•1,250

  @ratul0407Posted about 1 year ago

  @siyosu, I appreciate your valuable time reviewing my code and giving feedback. While I was doing the challenge I noticed the issue you described that a user can choose multiple ratings if he wants. But I couldn't figure out how I could keep track of the selected span reset the styling of the previously selected span and then style the new one on click.

  Would you please help me with that issue 🙂🙂

  0

  ---

  Account deleted

  @ratul0407 Of course my friend😁

  You can either use the first option as I mentioned in my previous suggestion where you store the selected element in a variable, and then run an if statement on the event listener before you assign the new selected element to the variable.

  Example:

  let rating;
  for (let i = 0; i < span.length; i++) {
    span[i].addEventListener("click", () => {
      if(rating){
        // Reset styling on previously selected element
        rating.style.color = '#7C8798'
        rating.style.backgroundColor = '#3F4F5E'
        rating.style.borderColor = '#3F4F5E'
      }
      rating = span[i]; // Asign the new selected element
      // Apply the styling
      rating.style.color = "#fff";
      rating.style.backgroundColor = "hsl(25, 97%, 53%)";
      rating.style.borderColor = "hsl(25, 97%, 53%)";
    });
  }
  

  You can also apply the same thing using <form>

  Instead of using <span> , you can use radio input with the same name, and wrap the input inside <label>, then hide the input.

  Since you are using tailwind, you can add the class hidden to the radio input, and then use arbitrary variants on the label with this value [&:has(:checked)]:the-style-you-want, so when the radio input inside that label is checked, those styles will apply.

  Example:

  <form>
       <label class="[&:has(:checked)]:bg-orange"  for="rating1">
          <input class="hidden" type="radio" id="rating1" name="rating" value="1">
          1
      </label>
     <label class="[&:has(:checked)]:bg-orange" for="rating2">
          <input class="hidden' type="radio" id="rating2" name="rating" value="2">
          2
      </label>
       // and so on
     <button>Submit</button>
  </form>
  

  And because your radio inputs have the same name, the user can only choose one. Therefore you would only need to listen for the submit event.

  Example:

  const ratingForm = document.querySelector('#ratingForm');
  let rating;
  ratingForm.addEventListener('submit', (e)=>{
      e.preventDefault();
     if(!ratingForm.rating.value){
          // Handle error  if the user does not select anything
      };
    rating = ratingForm.rating.value;
  })
  

  Feel free to let me know if you have any questions 💯

  Marked as helpful

  0