Design comparison
SolutionDesign
Solution retrospective
Struggled a bit as I am new to Javascript. Wrote a crappy code and somehow managed to make it work. Feedback on my coding practices would be greatly appreciated, and I would be glad to accept any advice you may have.
Community feedback
- @Valac01Posted over 2 years ago
Congrats on completing this challenge 🎉. After going through the code these are some of my suggestions.
CSS
- The card is not centered in a proper sense, you've added
margins
to push the card lower, but if the length of viewport increases the card stays around the top. You can useflexbox
orgrid
to center the card. - The input buttons hover color is managed in
JS
, I would move that into myCSS
. Just like how you've handled submit button hover color. - You have manually added spaces in between
SUBMIT
button. Here it is okay I guess, but you should avoid adding spaces, because if there is not enough space forSUBMIT
to be in one line browser will break the text into multiple lines due to those added spaces. Instead use a CSS propertyletter-spacing
to add spaces between characters - Also the font is not properly applied in
ratings
text.
JS
- Like I've mentioned handling hover color in CSS will reduce you JS code quite a bit.
- When I did this challenge, I figured if the ratings is a group of
input:radio
elements instead ofbutton
elements, the JS gets much simpler. Instead of listening to click event for all the buttons, I can listen to only submit and I can extract rating value from the radio group. I suggest you to explore that option
Marked as helpful0@DEEPAK-tech40Posted over 2 years ago@Valac01 It was a pleasure to receive your feedback. Thank you for taking the time to do so. I will definitely take a look at everything you mentioned.
0 - The card is not centered in a proper sense, you've added
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