Interactive rating component

Hi @arturo0427, congrats on uploading this solution. I like how you used BEM in your HTML, and i'm impressed cause I never knew that it's possible to add an event listener to the container. I was always thinking that I should add the event listener to all the items using .forEach. I also like how you used your if ... else to avoid that the user press the submit button and a get an empty result, when he has not yet selected a rating.

The only recommendations that I can make is that to solve your accessibility issue you have to add at least one H1 tag in your html file "How did we do?" is a good candidate that can fit in one h1, but you would have to replace your sections in divs cause sections dont allow h2 as children. And you would've to put your two divs inside one main tag.

I really hope, this learn

Happy coding

Christ

Hey good job completing this challenge, it looks great.

I highly recommend using a <form> element for this , considering you're asking for a user input and then providing a 'submit' button, that's exactly what forms are for, so its a great opportunity to make your code even more semantic.

The rating buttons would be an excellent time to use "radio buttons", not only are radio buttons semantic as-well, but they work in conjunction with the html form. If you're unfamiliar with radio buttons, they basically allow the user to only choose one option out of many. (perfect for this solution because the user can only choose 1-5).

And finally for the submit button, you can add aria-label="submit rating". The aria label lets screen readers know what a button does which makes the page more accessible.

example: <button aria-label="submit rating"> submit </button>