Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Interactive Rating Component

@abraund

Desktop design screenshot for the Interactive rating component coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
1newbie
View challenge

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-volent

Posted

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

@abraund

Posted

@bene-volent

Excellent tips all round, thank you very much.

0

Please log in to post a comment

Log in with GitHub
Discord logo

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