Skip to content
Submitted 18 days ago

interactive-rating-component-main

AymaneOnline•330
@AymaneOnline
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

What are you most proud of, and what would you do differently next time?

I've already done this challenge before, but as it was included in the Learning path of Frontend Mentor I've done it again. I'm happy with the time that it took me to complete this challenge compared to the last time, and also the small accessibility adjustments that I've done like role="presentation" on images that have decorative puposes.

What challenges did you encounter, and how did you overcome them?

I've encountered some styling issues with the rating buttons as I gave them some padding and also some width and height plus some gap in the parent which made the card bigger than the. The solution was to get rid of the gap and the padding and instead keep the width and height and add justify-content: space-between in the ``.

What specific areas of your project would you like help with?

I would appreciate any feedback. 👍

Community feedback

  • webdevbynight•410
    @webdevbynightPosted 13 days ago

    Some feedback:

    • when applying display: none; to an input element, this element will not be rendered by screen readers at all (if you want it to be visually hidden, you can use your .visually-hidden class);
    • about your .visually-hidden class, the clip property is deprecated and you should use the clip-path property instead (I let you check it on MDN for further information about it);
    • the hover effect on the labels should also be available when using the keyboard, so that a user unable to use a mouse can see which option is being chosen when the focus is on the radio buttons, provided they are not hidden with display: none (try to apply the CSS declarations within the &:hover rule to a rule with a selector like input:focus + .radio-check);
    • since you used an empty alt attribute to your decorative image, you do not need to add role="presentation";
    • you should avoid using pixels to set font sizes (this video on YouTube explains why).

    I hope this feedback helps you.

    Marked as helpful
    0

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