Submitted 3 months ago

Rating component using HTML, CSS and JavaScript

santiagodev10• 60

@santiagodev10

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

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

I'm proud of the logic i use with JS. The think i would do differently next time would be adding the keyboard navigation.

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

For me, the most difficult thing of the challenge was the logic in JS to change the card when the user submit a rating. But i could overcome it by researching a lot of documentation about manipulating DOM and the default attributes of the HTML elements.

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

With the keyboard navigation, i tried to use the tabindex attribute, but i put the inputs hidden, and when are hidden they couldn't be selected with the tab. If someone can help me with that i would appreciate.

Community feedback

dripper91• 130

@dripper91

Posted 3 months ago

There seems to be an issue where once a button is selected, it stays selected and you can't change it. What I did was make the buttons actual button elements and then I made my own CSS "active" class that the buttons get added to or removed from appropriately. Here's a video about that if you're interested: https://www.youtube.com/watch?v=lhLh8N9YN7E

Marked as helpful

santiagodev10• 60

@santiagodev10

Posted 3 months ago

@dripper91 thanks for the feedback, in my solution the user has to deselect the input, to then select another. But i get your point, i will use that in future projects

Please log in to post a comment

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