Interactive rating component with css and javascript
Design comparison
Solution retrospective
1- I'd like to know how having the figma or sketch files would help. Would those files provide font-sizes or other values like margins or padding ? I have no experience using either of the software but would consider if it helps making determination more precise then using the provided preview images.
2- I considered using a HTMLFormElement for this component. Pretty sure in the past I used a hidden check box or radio group for something similar. After some consideration I used ul / li's instead, pretty simple without having to struggle with radio or checkbox styling. It's only one value gong to javascript anyway. Is there a preference or a standard in these situations ?
Community feedback
- @juanma-romeroPosted over 2 years ago
hi Stuart, nice work! 1 - You definitely have to try with Figma files, it helps you to be more accurate with all measurements. There is a challenge that everyone can access, it is advanced but you can explore how works the Figma file: https://www.frontendmentor.io/challenges/space-tourism-multipage-website-gRWj1URZ3
2 - I used a form in my solution, it was a little complicated. For this simple task, it's better a simple solutions
Marked as helpful1 - @KhantMin200Posted over 2 years ago
Hello! There is nothing standard situations to get values along my experience. I used ul/li tags too. And in my opinion, you should use submit button bigger.
1 - @carlosGabrielCarrenoPosted over 2 years ago
Hi, congratulations on the challenge! you can put a 1 rem padding on the rating__wrapper container and some padding on the button when it's below 400px. anyway, excellent!
1
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