Interactive rating component with React, Vite, CUBE CSS and Tailwind
Design comparison
Solution retrospective
I used semantic elements whenever possible to avoid having to write additional JavaScript. For the thank you modal, I used the dialog
element which comes with an overlay that can be styled with ::backdrop
.
For the implementation of the rating component, I used radio buttons which have built-in semantics and interactivity. Sara Soueidan's article on Inclusively Hiding & Styling Checkboxes and Radio Buttons was a huge help as I did manual testing with VoiceOver on iOS to ensure the buttons are accessible by touch users.
It's been a while since I used React, so any feedback on my code would be appreciated. Also, is there a way to make this progressively enhanced with React?
Lastly, I think CUBE CSS works great with React, and I might continue using this setup for my next solutions.
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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