Skip to content
Submitted over 2 years ago

Interactive rating component

Salvinas•30
@Salvinast
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

Hey, so it's my first challenge with some js and it was quite difficult. I did get some help, but the point is that I understand what I coded and I'm happy with that. The provided colors for the project seemed a bit off, so I added my own. Any feedback is welcome.

Community feedback

  • bunee•2,020
    @buneeIsSloPosted over 2 years ago

    Hi! @Salvinast, Good job on this challenge! Your solution looks good and is responsive!

    However, it is not keyboard accessible. This is because the rating buttons are wrapped in <li> tags, so they behave as list items as opposed to buttons. To fix this, just wrap the rating in a <button> tag. It should look something like this:

    <li><button class="rating">1</button></li> and of course, style it accordingly.

    Apart from this, everything works as expected. You've done really well for someone new to JS. Keep it up!

    Hope this helps :)

    Marked as helpful
    0
    Salvinas•30
    @SalvinastPosted over 2 years ago

    Hi @buneeIsSlo, I didn't think about keyboard accessibility, but your solution is simple. Imma fix it, thanks!

    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