
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.
Please log in to post a comment
Log in with GitHubCommunity feedback
No feedback yet. Be the first to give feedback on Josh Javier's solution.
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