Interactive Rating Component Sass/Scss & JS

Community feedback

• 

  T

  ApplePieGiraffe•30,545

  @ApplePieGiraffePosted almost 2 years ago

  Hey, Ismail Hammaini Farhane / Tux3er! 👋

  Well done on this challenge! 👍 I like the extra touches that you added to your solution! 👏

  It would be good to use button or input elements for the options in the card component. You are currently using tabindex to make the li elements keyboard-focusable, which is generally discouraged as using semantic, interactive elements from the start is a better way to go. The options would be a good opportunity to use radio input elements since only one option can be selected at a time. You can also wrap the input elements and submit button in a form element and collect the form data by listening for the submit event on the form in your JS. 😉

  Adding some form validation to the card would be a nice idea, too, in order to make sure that users select an option before submitting the form. 🙂

  Hope you find this helpful. 😊

  Keep coding (and happy coding, too)! 😁

  Marked as helpful

  1
• 

  alexgabriel8•120

  @alexgabriel8Posted almost 2 years ago

  Wow, your project is really beautiful. Using the star as a way of toggling between light/dark mode was really creative and the animations just make it even better.

  One thing I think would make your project even better is to put a cursor: pointer; in the star and in the "go back" arrow icons. Your screenshot also seems to be outdated, with the submit button in a strange location.

  Marked as helpful

  0

  ---

  

  Tux3er•780

  @Tux3er-IsmaPosted almost 2 years ago

  @alexgabriel8

  Hi alex

  Thank you for your comment, but I have put all the hover states with a cursor: pointer; can you tell me the specific tag please.

  Thank you alex Tux3er is happy 🐧

  1

  

  alexgabriel8•120

  @alexgabriel8Posted almost 2 years ago

  @Tux3er-Isma Using the Goggle Chrome's inspector, I have placed cursor: pointer; in .main .main__card .main__card__mode-container and .main .main__submit .main__submit__return and I had good results.

  Another feedback would be to press on "Generate new screenshot" in this page. Because your current screenshot seems to be of an older version of your project.

  Marked as helpful

  0