Submitted about 2 years ago

Interactive rating card using HTML, CSS, and JS

Jaron Paige• 130

@jdpaige

Preview site View code

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

It took me far too long to realize I could just put a div inside of a label for a radio input, in order to center the numbers and still have both the text number and circle the toggle for the radio inputs...

I wanted to keep the card height and style consistent, so rather than make an entirely new card on click, I just used JS to toggle a 'hidden' class on whatever I wanted to show inside the card. I am aware that if this were a bigger project, this kind of thing would be better handled by React but I think this works fine too.

All in all, this took me longer than I thought but I learned a lot along the way!

3/20/22 Update - made changes based on feedback. Hopefully this fixed issues.

Community feedback

Gürkan Özer• 420

@gurkanozer

Posted about 2 years ago

Hi, Jaron. Nice work. But you re using divs for everything. its not good a practice.

Don't use divs as button or any interactive elements if u want make your button/element accessible.
And use span in label (rating-container), not div. if you check your html issues you can see its not allowed.

Jaron Paige• 130

@jdpaige

Posted about 2 years ago

@gurkanozer Thanks for the feedback! I made those changes based on the report and your suggestions. I think that fixed the issues.

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord