Rating Component

Hello, good job with the challenge, I think I may have the answer to your question.

There is a better way to select the button individually, you can add a click listener to the parent element and find the closest button (in your case you used spans but I think buttons or inputs would be a better approach), with this you will target with the click the button that you want, you can use a function like this (based in your code):

const containerStars = document.querySelector('.rate-container');
containerStars.addEventListener('click', function (e) {
    const clicked = e.target.closest('span');
    if (!clicked) return;
    console.log(clicked)

This is just an example, with the if(!clicked) return you are preventing of getting undefined if you click out of any of the buttons but inside the box, the ´console.log(clicked)´ will show you the clicked button on the console, this is just an example, with the button you can do anything like adding classes or removing styles.

Anyway, your solution still works, so congrats on finishing this challenge!, hope my answer helps you.

Hola Nicolas!

La solución es válida, pero imagina que tienes 20 botones, no sería óptimo crear un evento de escucha para cada botón. Lo ideal sería que crees un solo evento de escucha para todos los botones y mediante un bucle detectes en caul botón fue que se hizo click e implementar la funcionalidad que corresponde con el botón cliqueado.

Cualquier duda consulta sin pena.

Saludos