Interactive rating component

During my first try with this project, I did not follow a straight structure from top to bottom and was randomly adding stuff in the hopes it would work. This was especially at the JS part in which I was trying to use mouseover events. It got me stuck. When checking a video about this solution it gave me more clarity on how to approach this project better and solve the issues in CSS for example: hover, focus, and hidden. This made it a lot easier.

I also used the button element in HTML instead of creating custom buttons via div.

I learned the following: using 'hidden' in a class and changing display = none in CSS I can hide one part and show only the necessary part on the screen.

Better understanding using querySelector and getElementById. Using the method for.Each()

By changing the rate I can use textContent or innerHTML. By doing some research, textContent is more suitable here because it's only using plain text.