Interactive Rating Card using Flexbox, JavaScript

Solution retrospective
I suspect there is more than one way to style the radio buttons. I wasn't totally satisfied with my solution.
Please just look it over and let me know what you think.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @Sdann26
Hi Jason!
I would recommend you to add a few small details, like adding the letter-spacing: 2px attribute to the SUBMIT button. With this you would generate that separation that comes out in the design.
I would also recommend adding transition to all the buttons or links that have a change of state that alters the background colors, font color, size, position, etc. Adding to these elements for example transition: all 250ms. This will make your projects look more professional.
I hope these recommendations will help you apart from the one given in the previous message.
Good Luck!
Marked as helpful - @tesla-ambassador
Hey Jason. Congrats on completing this challenge it's really smooth and responsive! You might not want to use the
autocomplete
attribute on your radio buttons as this works for a specific input types so instead of setting it to off, you could just leave it out. This will reduce your HTML validation errors.Autocomplete is only allowed when the input type is color, date, datetime-local, email, hidden, month, number, password, range, search, tel, text, time, url, or week. Happy coding and keep up the great work.
Marked as helpful - @RajSanjel
Everything is great but if user doesn't select any rating then it should have default value of (1 or 0 ) or you should send alert saying select atleast one to proceed. Others looks perfect.
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