Frontend Mentor - Interactive rating component solution by Emmanuel

Hi Emmanuel! your project looks really good, I love how you used gsap for the animation, it was a really nice touch.

To be able to remove the active class if a rating is already selected add this code

ratingsContainer.addEventListener("click", (e) => {
	if (!e.target.matches(".rating")) return

	// Check if the clicked rating button already has the "active" class
	let alreadyActive = e.target.classList.contains("active")

	ratings.forEach((rating) => rating.classList.remove("active"))

	// If the clicked rating button was already active, remove the "active" class and return
	if (alreadyActive) return

	let selectedRating = e.target
	selectedRating.classList.add("active")
	let selectedRatingValue = selectedRating.textContent

	// Rest of the code...
})

Also, consider moving the button.addEventListener() outside the ratingsContainer.addEventListener() to avoid creating a new event listener every time a rating is clicked.

Hope you found this helpful!

• Let's connect on LinkedIn! - @Eileenpk

Okay, let me try your solution out. I created the button eventListener inside the inputs to ensure the user clicks a rating before submitting without writing extra code. However, from what you said, it creates multiple click events for the button that may slow down the browser's overall speed. So, I will do as you say.

Thank you very much I tried it and it worked. I really appreciated