Responsive interactive rating component
Design comparison
Solution retrospective
Pls i need someones to help me go through my project and the code i am very sure i need a lot of corrections and guide.
pls do help drop review and how i can improve
Community feedback
- @icaroMendes777Posted about 2 years ago
ok, if I can help you:
-the circle elements, their right backgroung-color is:#262f38, not darkgrey.
-the easiest way to do the select of the note (at least was the way I did) is: first: to have a class .selected with the format to selected. second:when the user clicks in a note you remove this class from all the 5 note buttons third: right after add this, add the class .selected to the button that was clicked.
This may correct your problem with having multiple notes selected at the same time
-you box sizing is bigger also, is not fitting the mobile.
-I noticed that the second page doesn't show off. If You are beginner in Javascript, the usual approach is to create the two boxes (the one to evaluate and the one with the evaluation done), and hide the second one until the rating is done in the first. So in the first screen the second is already there but with display:none; and after the note is submitted, the first box receives display:none, and the second receives display: block. disappearing with the first and showing up the second.
Hope have helped. :)
Marked as helpful1 - @remtainePosted about 2 years ago
Did you upload 2 pages? The results page doesn't show up or doesn't work. Either way, I suggest you practice working it as a single component so that it doesn't need to go to another page.
Right now, I can select several numbers at the same time. I suggest tracking the currently selected button so you can inactivate it before activating the clicked one.
Regarding the design, I suggest increasing button size and lessening the button spacing.
All in all a good try! Make the appropriate changes and it'll be great!
Marked as helpful1
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