Skip to content
Submitted over 2 years ago

SASS and radio buttons learned

Bao Dang•110
@weebao
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 didn't know I can make rating buttons being toggled one at a time with only HTML alone, so it was mind-opening. The concept of landmarks is still new to me, but I guess I need to learn that to give better accessibility to my website. Overall, it was my third project on this website and I enjoyed it.

Community feedback

  • wavegate•220
    @wavegatePosted over 2 years ago

    Nice catch on applying CSS to the checked radio button. I definitely chose to use JavaScript on an ordered list instead for that part which semantically is probably less effective. Can you explain how you lined up the number within each of the radio buttons in this line?

    line-height: calc(0.25rem + 1rem);

    I remember when I was doing this the numbers always were aligned a little off. Thanks.

    1
    Bao Dang•110
    @weebaoPosted over 2 years ago

    @wavegate I'm using SASS so the 1rem is actually the circle's size variable which I also used for the circle's width and height. I also used text-align: center and then center the number vertically with line-height by eyeballing, and the number I got is 0.25rem plus the circle's size/diameter.

    1

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