Interactive rating component (newbie)

Hi Martin,

Your solution looks good! There are two things I'd like to point out that could be improved. First, when you select a rating, all the ratings to the left become highlighted as well. A quick fix would be to put the .remove() lines after the .add() ones. This is because JavaScript runs top to bottom, so your current code is removing the class and then adding it back.

Next, in order to increase your accessibility, I highly recommend using radio inputs instead of buttons for this project. Radio Input 1 is more informative than Button 1 when using screen readers, for example.

There are some additional added benefits to radio inputs as well. If you give radio inputs the same name, say <input type="radio" name="rating" id="1"> and <input type="radio" name="rating" id="2">, it will only allow for one to be selected at a time. You can hide the input circles and customize the labels instead to achieve the same effect. The best part is, you can target the inactive, :hover, and :checked states of the inputs to change the CSS based on whether they have been selected or not and it will remove the CSS from the unselected ones by default, so you don't need to use JavaScript for that unless you want to!

Feel free to check out my solution for an example. https://www.frontendmentor.io/solutions/interactive-rating-component-using-css-flexbox-and-base-javascript-HhhDgY0C8G

Overall, well done! Happy Coding!