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

SASS and radio buttons learned

Bao Dang 110

@weebao

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


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

@wavegate

Posted

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

@weebao

Posted

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