Interactive Rating Component using Flexbox

Hi renko7 - regarding your question on CSS and class names, frustratingly, the answer is: it depends! This is something I struggled with for a long time, and I was worried that I wasn't doing things the "right" way. I know it's dull advice, but if you keep building things and learning and trying different approaches you will find something that works for you.

For example, many people love Tailwind CSS, which I'd also like to try one day, which applies classes inline to each individual element, other people like a BEM approach, which moves towards removing the complications of the cascade. Personally, I love, CUBE CSS, which embraces the cascade and maps nicely to how I think about CSS.

But don't worry about trying all these things, or even if you haven't heard of them, for the moment if you are just getting started just enjoy building things, getting stuck, finding solutions, and asking for advice when needed. It took me quite a while to settle on an approach to CSS that works for me, and it's always changing.

Kevin Powell's responsive layout course that is free on Scrimba is a good place to move to once you have the hang of basic selectors.

Here are a few comments with regard to your code:

• I would check whether an element is actually a button or a link. The most important thing is what the element will do not what it looks like. This page has a great summary and lots of useful links on this: https://css-tricks.com/buttons-vs-links/ (I think you have this wrong that the moment!)
• Good choice with the radio buttons, to make things nicer could you add a transition on the hover to make the color change a little less abrupt? And I would suggest adding the curser:pointer to the CSS for this element - not everyone would agree, but I think it's kind of expected for this type of interaction.
• Lastly on the JS I would advise against using class names as the basis for selecting elements. This has caused me so much headache in the past, as when you start adding and removing classes the JS stops working! I try to use data- attributes when possible as I know that I can keep them just for this purpose.

Good job and keep up the good work!

Cheers Dave

Great job on the challenge!

Regarding your question there are many ways to handle connection between HTML and CSS. As @dwhenson said there are many approaches and everyone have to choose what fits him the most. But connection between HTML and JS can be handled (especially functionality changing on user actions) using dataset properties and sometimes aria attributes. I really like this approach and I use it all the time while creating functionality of website apps. You can create your own attributes with data-* prefix and control them with JS and style with CSS selectors like .class-name[data-example="true"]. I recommend you to try it ! HTMLElement.dataset

Keep up the great work. Have a nice day and happy coding!