Interactive Rating Component | Vanilla JS, CSS Grid & Flexbox
Design comparison
Solution retrospective
Hi! It's my first time coding a project with JavaScript on it. I'm currently learning Vanilla JavaScript and I was wondering if there was any better and more efficient way of doing this project compared to my JS. Thanks!
Community feedback
- @elaineleungPosted over 2 years ago
Hi Justin, great job on completing your first JS project! 😊
I think you did well putting this together, especially in using radio button inputs. To answer your question, yes, I do think the JS can be written differently, as right now you've written out pretty much the same code for each button. You can try using a
for
loop orforEach
method. I have a CodePen here as an example of how the JS can look like; it also uses radio buttons, so that might be helpful as a comparison: https://codepen.io/elaineleung/pen/WNzKqqr. It also has some logic that handles what happens when no buttons are pressed but the user hits submit; you may also want to look into that as an option to add, since you don't currently have that in your JS right now.One comment I have about the CSS: I would try putting
cursor: pointer
right on therating-number-label
instead of the input, as there are times when hovering over the number buttons that the pointer disappears right above the number. Also, I do think there's other stuff that can be changed about the CSS and the code can be cleaned up a bit more, but I think on the whole this looks alright and is doable!0
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