Interactive Rating Component, Flexbox, SCSS
Design comparison
Solution retrospective
Feedback is welcome. I am particularly interested in finding out if there is another Javascript solution for making the submit button work only if the user has entered a rating.
Community feedback
- @godmayhem7Posted about 2 years ago
hey nice going on your code ππ it was totally amazing the style was good and every thing was okay but here are some tips on improving your code instead of wrapping your entire sections in a div-tag(<div></div>) try using other interactive sections like the header-tag(<header></header>),section-tag(<section></section>),main-tag(<main></main>) and footer-tags(<footer></footer>) this helps other people understand your code better cause wrapping your codes in div-tags makes the code look rather messy the rest of your code was great @peterbujaky , keep it up ππ, hope this was helpfulπππ
Marked as helpful1@peterbujakyPosted about 2 years ago@godmayhem7 Thanks for your valuable advice, I will adhere to it in my next challenge!
0 - @AdrianoEscarabotePosted about 2 years ago
Hi Peter Bujaky, how are you?
I really liked the result of your project, but I have some tips that I think you will enjoy:
I noticed that you used
for
to loop over elements, prefer using theforEach
method is a little simpler! and greatly shortens the code!for (var i = 0; i < ratingButtons.length; i++ )
The rest is great!
I hope it helps... π
Marked as helpful0 - @JamalLovesLoversPosted about 2 years ago
Great job! Firstly, you need to improve the width of the container it is way to narrow and looks rather odd. Secondly, the buttons are far too small and so is the text. Although you dont need to be pixel perfect, you need to try your best still. For the submit button make sure to use the correct font and font weight. Also be careful with the amount of padding you have used on the buttons its far too much. The functionality otherwise is great it does what its supposed to fast and well. Af for your question you can add a disabled attribute to the submit button and when the number is clicked that attribute is removed from the button. Use the setAtrribute() function combined with the addEventListener function!
Marked as helpful0
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