Skip to content
Submitted over 1 year ago

Interactive Rating Component

Anthony Braund•110
@abraund
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

Deceptively tricky, the font Overpass has padding underneath its descender, so whenever you vertically center it looks off. Took a while to discover this. Had problems with the star I should investigate, it also would not center, but it harder to inspect as I made it a pseudo. My stamina to un-pseudo it and look waned as I really did spend ages puzzling over the font alignment. Anyway, padded everything to victory.

Community feedback

  • Benevolent•490
    @bene-volentPosted over 1 year ago

    Hi there. Congrats on completing the challenge. Your stylesheets is very clean and concise.

    Everything looks good. So, I would advise you to explore forms. As we are rating something, it brings the opportunity to use radio input which in turn comes with form and its submit actions. Semantically, it would be better to use a form and a radio group.

    Instead of using display : none, you can use visibility : hidden which wont cause reflow of DOM. But that is not a major issue, but I prefer it that way. You can look up regarding this concern. But overall, great job!! 😊

    Marked as helpful
    1
    Anthony Braund•110
    @abraundPosted over 1 year ago

    @bene-volent

    Excellent tips all round, thank you very much.

    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