Submitted about 2 years ago

Rating component using HTML/CSS/JavaScript

Ophélie Coudert• 50

@Crab-Prog

Preview site View code

This is a solution for...

Interactive rating component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

It selects the last number you choose, even if the others are still in orange.. I'll try to fixe that later, in order to select only one number at a time. But if you select only one, you won't have this problem! If you have any advices, I'll be happy to read about it.

Community feedback

Miguel Silva• 510

@migsilva89

Posted about 2 years ago

Nice job on this challenge. You have some HTML issues,

All page content should be contained by landmarks: https://dequeuniversity.com/rules/axe/4.3/region?application=axeAPI.

About your question, I believe the best solution is to use an input radio instead of a button. With the input radio, every time you select one the other is unselected.

Also, see that orange is the color on HOVER and dark gray is the color when you select it. This is a rating component so we should be able to select only one number.

Hope it helps, if so please mark it as helpful.

Happy code! regards,

Miguel Silva

Ophélie Coudert• 50

@Crab-Prog

Posted about 2 years ago

@migsilva89 I'll look it up. Also I thought the hover was in grey and the selection in orange, I'm going to change that immediately. Thank you for your advices !

Miguel Silva• 510

@migsilva89

Posted about 2 years ago

@Crab-Prog You are welcome :)

Diego Alejandro Díaz• 360

@dialejo24

Posted about 2 years ago

Instead of using javascript to accomplish that, i think you can use just the pseudo-class focus. That will solve the problem when the user selects several buttons before submitting.

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