Skip to content
Submitted over 2 years ago

Interactive rating card using HTML, CSS, and JS

Jaron Paige•130
@jdpaige
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Interactive rating component
  • HTML
  • CSS
  • JS
1newbie

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
    @gurkanozerPosted over 2 years ago

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

    1. Don't use divs as button or any interactive elements if u want make your button/element accessible.
    2. And use span in label (rating-container), not div. if you check your html issues you can see its not allowed.
    0
    Jaron Paige•130
    @jdpaigePosted over 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.

    0

Please log in to post a comment

Log in with GitHub

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