Skip to content
Submitted almost 2 years ago

Interactive rating component / CSS Grid, FlexBox, JS, Custom CSS

sztosiur•110
@sztosiur
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

I decided to do this as a form and the rate notes are radio buttons.

I've hidden the buttons and styled only the labels.

I had a little bit problem with positioning those labels to have the same width as other elements, and start at the same point.

I solved it by adding 'margin-left' with value below 0.

Please let me know what you think.

Community feedback

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