Interactive rating card using CSS grid and JS

Community feedback

• 

  Barish Barla•40

  @Valac01Posted about 2 years ago

  Congrats on completing this challenge 🎉. After going through the code these are some of my suggestions.

  CSS

  • The card is not centered in a proper sense, you've added margins to push the card lower, but if the length of viewport increases the card stays around the top. You can use flexbox or grid to center the card.
  • The input buttons hover color is managed in JS, I would move that into my CSS. Just like how you've handled submit button hover color.
  • You have manually added spaces in between SUBMIT button. Here it is okay I guess, but you should avoid adding spaces, because if there is not enough space for SUBMIT to be in one line browser will break the text into multiple lines due to those added spaces. Instead use a CSS property letter-spacing to add spaces between characters
  • Also the font is not properly applied in ratings text.

  JS

  • Like I've mentioned handling hover color in CSS will reduce you JS code quite a bit.
  • When I did this challenge, I figured if the ratings is a group of input:radio elements instead of button elements, the JS gets much simpler. Instead of listening to click event for all the buttons, I can listen to only submit and I can extract rating value from the radio group. I suggest you to explore that option

  Marked as helpful

  0

  ---

  

  Deepak•270

  @DEEPAK-tech40Posted about 2 years ago

  @Valac01 It was a pleasure to receive your feedback. Thank you for taking the time to do so. I will definitely take a look at everything you mentioned.

  0