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

@KennethChang1

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


any feedback welcomed

Community feedback

CyrusKabir 1,885

@CyrusKabir

Posted

Hello my dear friend ♥ you did good on this challenge and here some improvements :

  • for having circle shape on rating buttons your buttons should have equal width and height and also an 50% border-radius
  • try to change spacing values like padding or margin for getting close to main design as possible
  • you used disabled attribute to force user select a rating number but there is few problems :
  1. first, user can't submit buttons with keyboard (tab key), because it's disabled (accessibility issue)
  2. second, if user know how to inspect he/she can easily remove that disabled attribute on submit button and see thank you card without rating ! so good practice here is change validation check for that rating buttons and remember to print an error message when user did not click on a rating button and tried to hit the submit button
0

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