Interactive Rating Component

Hi Avinash, great work here in building out this component!

About your question, you just need to loop through the buttons again to remove the class. Let's say I select button 1, and then I select button 3. In your if/else statement, when I select button 3, the selectedRating is changed to 3, and if it has an active class, then it gets removed, and if not, then it gets the active class added. Since this is a newly selected button, it won't have the active class, and therefore will get the class added. However, this event listener is just for button "3"; there is nothing in this event handler that takes care of removing the class from button 1. All you need to do is just to use forEach to find the button with the active class and then remove it; also, the two conditionals need to be separate.

rating.forEach((e) => {

    e.addEventListener("click", (event) => {
        selectedRating = event.target.textContent;

        rating.forEach((e) =>{
          if(e.classList.contains("active")){
            e.classList.remove("active");
          }
        })

       if(e.textContent === selectedRating) {
          e.classList.add("active")
        }
    })
})

Good luck and hope this helps!

Great attempt Avinash. I have a solution for your query. On clicking the rating first remove the active class from all the ratings and add the active class to the targeted rating. You may use the code below:-

e.addEventListener("click", (event) => {
rating.classList.remove("active")
event.target.classList.add("active")
selectedRating = event.target.innerHTML;
   }) }); `

This might help you. Happy Coding ✌🏻😊