Design comparison
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
- @migsilva89Posted over 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
0@Crab-ProgPosted over 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 !
0 - @dialejo24Posted over 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.
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