Interactive rating component

Community feedback

• 

  Andre Ferreira•450

  @Namonaki0Posted about 1 year ago

  Hi Lemi, well done for completing the challenge.

  I sent you a PR for this repo - link here with a few suggestions.

  In short:

  • Submit button moved to inside the form - by norm JS will recognize a button inside a form as a submit button and it makes it easier to add an event listener to the form. In this case the "submit" event followed by a callback function.
  • Aria-labels added to labels and description added to image alt attribute for accessibility reasons.
  • Changed variable names to camel case in order to follow JS naming conventions.
  • CSS variables introduced to make it easier for future changes. It's not that big of a deal for a small project like this but it's nice to know for when you start working on bigger ones and are able to change variables globally instead of several selectors. You can choose better names for these, they are just examples.
  • Since you chose not to use the attribution bit of the code I decided to remove it.
  • cursor: pointer and transition effects on hover and focus added to enhance UX.
  • Default value added to selectedRating in case the user doesn't select a rating but submits the form anyway - it can be a choice.
  • ES6 syntax used but not necessary - just requires less writing for the same outcome.

  I've only focused on structure and readability but didn't do a thorough check, everything seems fine for the most part. Things like font size, etc would still need to be checked should you like to do it. These are just suggestions.

  I hope this helps.

  Marked as helpful

  1