Interactive rating component

Community feedback

• 

  Dinil Thilakarathne•250

  @Dinil-ThilakarathnePosted over 1 year ago

  Hey there! Great job on completing the challenge! 🎉

  Here are some suggestions to improve your code:

  You can use this JS code for change the background color of rating buttons

  for (let i = 0; i < ratingBtns.length; i++) {
    ratingBtns[i].addEventListener('click', function() {
      for (let j = 0; j < ratingBtns.length; j++) {
        ratingBtns[j].classList.remove('active');
      }
      this.classList.add('active');
    });
  } 
  

  Here's a more detailed breakdown of the code:

  • The for loop iterates through all the elements with the class name rating-btns using the length property of the ratingBtns array-like object.

  • For each element, the addEventListener() method is called to attach a click event to it. The click event triggers the callback function.

  • Inside the callback function, another for loop iterates through all the elements with the class name rating-btns again.

  • For each element, the classList.remove() method is called to remove the active class from it.

  • After removing the active class from all the elements, the classList.add() method is called on the clicked element to add the active class to it.

  💡 This code ensures that only one element at a time will have the active class, which can be used to change the appearance of the elements with CSS.

  Hope this is helpful

  Marked as helpful

  0