Responsive rating components built with Semantic HTML, CSS and JS

What challenges did you encounter, and how did you overcome them?

After styling elements with JS, the hover CSS styles were not working. This occurred because styling with JS sets the styling of an element as inline property values. Inline styling supersedes CSS file styling, therefore, causing the issue I expected.

I overcame this challenge by setting the !Important declaration at the end of the background property value declaration.

What specific areas of your project would you like help with?

All feedback is welcomed.