Interactive Rating Component Built with JavaScript.

Community feedback

• 

  Jesse Good•120

  @jessegoodPosted about 2 years ago

  Hi arey

  I just submitted a solution for the same problem. Here is some feedback I hope it helps!

  1. The <div> element is a block element and is not allowed inside <label> elements. I assume you meant to use the numbers as labels? In that case you could just remove the <div> from them and they would become the label.

  2. You had two media queries, one for 400px and 360px. I wasn't sure why you split them up as they seem very close.

  3. I see that you built the Thank You part in JavaScript. One easier way might be to use display: none and then just set it to display when you want to show it (and set the other part to display: none).

  4. Instead of adding event listeners on each element you want. Another idea would be to just add an event listener on the document and then just only react to click events when a user clicks a radio-input or the button. You could also remove type="submit" from your button so it does not act like a submit button.

  Also, doesn't affect your case, but as a JavaScript best practice, always use the === (the triple equals).

  Marked as helpful

  0

  ---

  

  arey•350

  @arey-devPosted about 2 years ago

  Hello! @jessegood, Thank you for giving a feedback to my solution 😊 I'm glad you mentioned all of that. Here's why I did such things:

  1. The div inside label was a really horrible mistake. I wanted to make a round container but I couldn't set the width on label. And that's why I put div inside it, to have a container that I can make round. But then again, I could've just set the display: inline-block on labels 😅
  2. I had to set a breakpoint at 360px because I wanted the style to fit down to 300px, for really small screen sizes.
  3. setting display: none is for sure the easier and, I think, the right approach.
  4. I didn't think of that 😅 but I did delegate events on radio buttons. I'll come up with a solution that uses document-wide event listener.

  Again, thank you! This feedback helped me a lot. I'll make sure to make changes in my code, and also take a look at your solution.

  0