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

Salvinas 30

@Salvinast

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


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

@buneeIsSlo

Posted

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

@Salvinast

Posted

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