Skip to content
OverviewSolutions
2
Comments
1
Barish Barla
@Valac01

All comments

  • Deepak•270
    @DEEPAK-tech40Submitted about 2 years ago

    Struggled a bit as I am new to Javascript. Wrote a crappy code and somehow managed to make it work. Feedback on my coding practices would be greatly appreciated, and I would be glad to accept any advice you may have.

    Interactive rating card using CSS grid and JS

    1
    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