Interactive Rating Component

Community feedback

• 

  Elaine•11,360

  @elaineleung

  Posted over 2 years ago

  Hi Trung, I think this looks quite well put together! If there's one thing I'd change, I would use a class to change the style of the selected button instead of using the :focus pseudo class, seeing that focus is meant to used for showing which element the user had last interacted with. If you accidentally click on something else like the background or the text, the selected button would go back to its unselected color because it has lost the focus, and that would make it seem like no button got selected, even though in the background JS is still keeping track which button got selected. I would just create a new class called selected, style the selected button with that class, and then use JS to add/remove the class as needed. Hope this helps you out a bit!

  21

  Marked as helpful
• Account deletedPosted over 2 years ago

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

  • The “icons/illustrations” in this component serve no other purpose than to be decorative; They add no value. There alt tag should be left blank and have an aria-hidden=“true” to hide them from assistive technology.

  More Info:📚

  https://www.w3.org/WAI/tutorials/images/

  • The proper way to build the "rating buttons" in this challenge is to create a form and inside of it, there should be fiveinput radios and each input should have a label attached to it to make the buttons accessible. Finally wrap all the inputs and labels inside a fieldset to prevent users from making more than one selection.

  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!🎄🎁

  00