Interactive Rating Component

Community feedback

• 

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  Hey there! 👋 Here are some suggestions to help improve your code:

  The star animation is a nice touch to make the component less static!

  • Your ratings should have an active state to let users know which rating they have chosen.

  • The proper way to build this challenge is to create a form and inside of it, the “rating buttons” should be built using an input radio (wrap all of them inside a fieldset), since this will prevent additional buttons from being active at the same time, and it should have a label element attached to it for accessibility.

  More Info:📚

  MDN <input type="radio">

  MDN <fieldset>: The Field Set element

  If you have any questions or need further clarification, feel free to reach out to me.

  Happy Coding! 🍂🦃

  3

  ---

  

  Keith•70

  @Grill3dCheesePosted about 2 years ago

  @vcarames Hey! Thanks so much for the constructive feedback! I appreciate your comment about the star animation, I made another version that has the card animate upon submitting too! :)

  I added the :active state to my SASS code on the li buttons!

  Was wondering about the form and input buttons, what is the why behind why I should use the form and inputs vs. the unordered list and list items as I've structured it? Is it so that the card component itself would be compatible if there were a backend?

  1

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @Grill3dCheese (love the username!)

  I am glad that I was able to help out!

  Little design implementations like that can definitely elevate a project.

  There are two reasons,

  1. Accessibility. Currently, when using a "screen reader" all your users hear is the following; "One Button", Two Button", etc...

  But by using input radio you instead hear, "One, Selected, Radio Button, One of Five"

  2. (2)This how a rating container should ideally be written. Since you are expecting a single selection from your users, a input radio allows this, without additional code; since only one radio can be active at a time.

  When your users select a rating and submits, your JS eventListener should be listening to the form for a submit.

  Hope that clears it up.

  Marked as helpful

  2

  

  Keith•70

  @Grill3dCheesePosted about 2 years ago

  @vcarames - haha! Thanks! I found out a few years ago that I'm lactose intolerant, and one of the things I miss most, is cheese! :D

  Thank you SO much for thoroughly explaining that! That was extremely helpful information and I really appreciate you getting back to me!

  0

  

  バレンタイン 😈•64,170

  @VCaramesPosted about 2 years ago

  @Grill3dCheese

  This is one might help with those cravings. It's vegan and it's the closest one that I have found to taste like actual cheese:

  https://fieldroast.com/product/creamy-original-chao-slices/

  No problem! That's what I am here for .

  1
• 

  Wagner Kroiss•190

  @wagnerk78Posted about 2 years ago

  Well done! I think that you should use orange when select the number e not gray. See you soon

  1