Interactive rating component (newbie)

Community feedback

• 

  Ronald Sayre•260

  @RJ3605Posted almost 2 years ago

  Hi Martin,

  Your solution looks good! There are two things I'd like to point out that could be improved. First, when you select a rating, all the ratings to the left become highlighted as well. A quick fix would be to put the .remove() lines after the .add() ones. This is because JavaScript runs top to bottom, so your current code is removing the class and then adding it back.

  Next, in order to increase your accessibility, I highly recommend using radio inputs instead of buttons for this project. Radio Input 1 is more informative than Button 1 when using screen readers, for example.

  There are some additional added benefits to radio inputs as well. If you give radio inputs the same name, say <input type="radio" name="rating" id="1"> and <input type="radio" name="rating" id="2">, it will only allow for one to be selected at a time. You can hide the input circles and customize the labels instead to achieve the same effect. The best part is, you can target the inactive, :hover, and :checked states of the inputs to change the CSS based on whether they have been selected or not and it will remove the CSS from the unselected ones by default, so you don't need to use JavaScript for that unless you want to!

  Feel free to check out my solution for an example. https://www.frontendmentor.io/solutions/interactive-rating-component-using-css-flexbox-and-base-javascript-HhhDgY0C8G

  Overall, well done! Happy Coding!

  Marked as helpful

  0

  ---

  

  Martin Kutzner•550

  @mfkutzPosted almost 2 years ago

  @RJ3605 Hello!! The one that is highlighted on the left I did it on purpose, because I liked how it turned out... thanks for your feedback! I will take into account all your suggestions since I am new and they help me :D

  1