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

Kenyon Tu 390

@kenyontu

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


The submit button is disabled until the user selects a rating. A fade-in fade-out animation is used to "swap" between the prompt and Thank You views.

Community feedback

P
Fluffy Kas 7,735

@FluffyKas

Posted

Hey,

Your solution looks great! It's nice that you paid attention to details, like disabling the button and added that subtle animation as well. I have some suggestions though regarding the accessibility:

  1. For the rating buttons, radio inputs would be a lot more suitable than just using individual buttons.

  2. You could leave the alt text of both images empty, as they're both just decorative.

Marked as helpful

1

Kenyon Tu 390

@kenyontu

Posted

@FluffyKas

Thank You so much for your feedback!

I've made the following changes based on your feedback:

  1. Changed rating buttons to use radio inputs, which enables the use of arrow keys to navigate between the rating options.
  2. Added a form, so now it is possible to select a rating option and then press the enter key to submit.
  3. Removed the alt text on both decorative images.
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