Simple interactive rating component

Hi Sergio! Your solution works as it should and visually it's really nice as well, I like the slow transitions and hover states :)

I would, however, simplify your html and your js (although I have a feeling you also wanted to practice some things which is totally fine!).

As for the html: at the top of your card you have an image, a heading and then a paragraph - all of them are wrapped in their individual divs which really are not needed here. It would be enough to set the image to display inline-block or block so it sits on its own line.

Definitely a good call having the ratings as radio inputs, I'm not sure about the styling - I would usually set the inputs to be visually hidden and use labels for selection - this also makes it easier on mobile where you need the target to be slightly bigger than the radio button itself for people with sausage fingers like myself :) you'd just need to have an input come before the label in your markup and then you can use something like input:focus > label or input:selected > label. And here is also how you can simplify your js - no need to toggle classes here, just use the :selected pseudoselector to get the orange background.

You also can get the submitted rating value in the submit event so there is no need to have a separate function to extract it. Try console.logging the event to figure out how to get there.

Overall I think you've put quite a lot of effort here and although things could be done simpler, it's great to see you've got some creativity and are really trying to figure out things on your own, well done :)

Hope this helps, happy coding!