Design comparison
Solution retrospective
This challenge wasn't too hard for me, so I tried to animate this as a flip card, in order to discover new techniques. I struggle to get the front and the back of the card the same height. I'm not sure if my CSS is as clean as possible, but it seems to work! Furthermore, I paid a lot of attention to animation, and added a little feature if you click on submit before selecting a rate. This was a lot of fun, feel free to tell me if you have any advice!
Community feedback
- @grace-snowPosted over 2 years ago
Hi
This really should be a form with radio inputs in a fieldset rather than buttons like this. As a result of your html this would be confusing for screenreader users and you have had to make the js more complex than it needs to be.
Look up how and when to use aria-live attribute to announce content changes too.
Good luck
Marked as helpful0@remyboirePosted over 2 years ago@grace-snow Hi Grace, many thanks for your valuable feedback.
I made a second version using radio inputs and my JS is indeed much cleaner. Not sure if I used aria-live well, I will definitely have to dig more. I would appreciate if you have the time to check my solution back and tell me your thoughts !
Have a nice day,
Rémy
0@grace-snowPosted over 2 years ago@remyboire looks good, well done!
The only other change I'd make is to make alt blank on that icon star image. It's decorative so alt doesn't need a value there
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