Frontend Mentor - Interactive rating component solution by Emmanuel

Community feedback

• 

  Eileen dangelo•1,600

  @Eileenpk

  Posted about 2 years ago

  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

  10
• 

  Emmanuel-Xs•80

  @Emmanuel-Xs

  Posted about 2 years ago

  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

  00