Interactive Rating Component

Community feedback

• 

  Prince Chukwu•250

  @cprincecPosted over 1 year ago

  Hi Denise, you did a great job on the UI.

  One way you could keep the style for selected rating is to add a class to any of the ratings (circles) selected and remove that class from any other circle it may be applied to. Then in your css file, you can define the styles for that class.

  Here is a little example of what I mean. Assuming you have this html for the possible ratings:

  <ul> 
  <li class="rating">1</li>
  <li class="rating">2</li>
  <li class="rating">3</li>
  <li class="rating">4</li>
  <li class="rating">5</li>
  </ul>
  

  Now in your JavaScript file you could add click event listeners to each 'li' so as to assign a class to the clicked 'li'. Thus:

  const ratingElements = document.querySelectorAll(". rating");
  
  ratingElements.forEach(element => element.addEventListener("click", (e) => {
  
  // Remove the unique class from all the rating buttons
  ratingElements.forEach(li => li.classList.remove("selected"));
  
  // Add the unique class only to the clicked element 
  e.target.classList.add("selected");
  });
  
  

  Now in your css file you could now style the element with class of selected as you wish. Example:

  . selected {
  background-color: orange;
  color: black;
  }
  
  

  Good luck!

  Marked as helpful

  0