Interactive component

Hey, you could add pseudoclass :focus in your css to the rating buttons(rating-buttons:focus{color: gray}) to keep the color gray on the selected button, it keeps the gray color until you click somewhere else. You can center the container on the page with position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); Hope this helps :)

To keep the color of the rating button you selected as medium gray even after you move your mouse away:

instead of using the ' :active ' pseudo-class, give each button an 'onclick' attribute in the html and then use javascript in this attribute to add a class to the button that makes it medium gray.

for example:

     <div class="point" id="star1" onclick="GuardarPuntaje(id)" onclick="
        star1 = document.querySelector(#star1);
        star1.classList.add(star1-class);
">
        1
      </div>

and then somewhere in your css:

#star1-class{
   background-color: var(--medium-grey);
}

To make it so that only one of the rating buttons can be selected at a time, run a function straight away on each 'onclick attribute' which removes the any added class from each button, using someVariable.classList.remove(enter you class that you want to remove here) ;

so the code would look more like this:

     <div class="point" id="star1" onclick="GuardarPuntaje(id)" onclick="
        resetButtons();
        star1 = document.querySelector(#star1);
        star1.classList.add(star1-class);
">
        1
      </div>

I will leave you to figure out the code for the resetButton() function yourself. If you get stuck, you can look at my code. Good luck.

Please rate this comment if you found it helpful.