@Eileenpk
Posted
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