Interactive Rating Component | Vanilla JS, CSS Grid & Flexbox

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted about 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 or forEach 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 the rating-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