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 - Sass and Regular JS

@scadpetrel

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


My goal was to make the rating selection accessible but the solution I came up with does not let me tab through them. I ended up hiding the radio inputs because they are not style able.

I would also like feedback on the semantic HTML structure of the component. I used aside for the modal since I figured a rating like this would pop up over a full page.

Community feedback

Émilia 100

@BahAilime

Posted

Hi 😃 Even if the radio buttons can't be styled, it's still possible to hide the default button and create a new custom one using ::before to create its shape and the :checked selector to handle its state ! Have a look at Stephanie Eckles' blog for deeper explanations and step by step process 👌 https://moderncss.dev/pure-css-custom-styled-radio-buttons/#custom-radio-button-style

As far as I know, <aside> isn't meant to be used as a modal landmark but is more likely to be a column on the right side of the page (for an in page navigation for exemple)

I wouldn't have used <main> like that and rather put it where your <aside> actually is because it is the main interest of the page (if we imagine having this rating component inside of a bigger review page)

But overall your component works just fine ! Well done 😄

Marked as helpful

0

@scadpetrel

Posted

@BahAilime Thank you for your feedback and the link for styling custom radio buttons. I'm going to see if I can incorporate better buttons and update the HTML tags.

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