Interactive rating component with CSS & JS
Solution retrospective
I wonder what would be considered the true "best practice" way to pass the rating variable through. I also wonder if I'm saying that right. Also, I wonder how the JS that Eric helped me with could be simplified. Lastly, I wonder what sort of solutions people came up with to prevent someone from pressing Submit until a rating had been chosen.
Please log in to post a comment
Log in with GitHubCommunity feedback
- @JoyGHub
Hello Maia!
When it comes to disabling the Submit button until a user selects a rating, in this case, your Submit could start by being disabled until the user selects any of the rating buttons (until any of them has the "clicked" class). After that, the user is 100% going to have a button selected, no matter what, so you no longer have to disable the Submit button.
"Also, I wonder how the JS that Eric helped me with could be simplified." - Yes, they 100% can be simplified.
Overall, the component looks great! I like the radial-gradient you placed on it.
Keep it up,
- Stefan RIZEA
Marked as helpful - @ericsalvi
Hey @maiaflow, great job on completing your 2nd challenge. We already had some offline communications about this one and I was glad you were able to do some digging into the JS to start the button actions but needed a bit of a push to get it completed.
I know my code was not correct but was hoping you could use it as a base to elaborate upon it or to simplify it.
The more you do of these the easier it will become. Keep on watching those teamtreehouse videos.
I few suggestions now that you have completed this one, you have access to view all solutions of this challenge here. I would dig into the HTML structure of them to see if there are any common factors on how they implemented the interactive section of this challenge. I am not saying my approach to using a Form is the correct one, it just made it much easier and cleaner when it came to JS.
Also make sure to clean up any HTML or Accessibility warnings of the submission here
Keep up the momentum!
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