Interactive rating component using Flexbox and JS DOM manipulation
Design comparison
Solution retrospective
I found colour matching for the radial gradient to be the most challenging. I ended up mostly eyeballing the difference between the general background and the background of the feedback area. I guess having a calibrated monitor would help, but apart from that, I would appreciate any tips dealing with colours. Eg. how much can I deviate from the guidelines?
Also I ended up making the submission button active only after the user has selected a rating. It was a deliberate solution and I would appreciate any feedback regarding it.
Community feedback
- @sarah27hPosted about 2 years ago
Hi AJJR’S, Great Job
I used Inkscape or you can use any graphics program and open the design image and use pick color. also, you can try this site to extract colors.
For, the submission button I didn't think of it. I displayed 0 if the user didn't select a rating. But I think your approach is better.
Hope this help
1@ajjrPosted about 2 years ago@sarah27h That site looks very interesting and useful resource. Thank you for sharing!
My approach in disabling the button relies on removing the
disabled
attribute from thebutton
element when the user has selected a rating. Feel free to look at my script file if you want to to implement something similar.1@sarah27hPosted about 2 years ago@ajjr Glad to help. This video helped me know how to use the Coolors site.
Thanks for your hint, I will use the disabled
attribute
as you suggest and update my code.1
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