Interactive Rating Component using HTML, CSS, JavaScript

Community feedback

• 

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  Hey there! 👋

  Using input radios for the ratings is the correct way of doing this challenge.

  This will help with the styling:

  https://moderncss.dev/pure-css-custom-styled-radio-buttons/

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

  Happy Coding!🎄🎁

  Marked as helpful

  1
• 

  Ronald Sayre•260

  @RJ3605Posted almost 2 years ago

  Hi Jorge,

  There are many ways to do every project. It's right as long as it works. That said, I can shine some light on how to do this with the <button> tag instead of <input type="radio">. This method is good if you want to practice JavaScript.

  First set up buttons 1-5 as you have done with styling and all for their static and :hover attributes. Then create a class="active". When the active class is added to a button is should look like yours does when it is selected. From there you need to add an event listener in JavaScript. The event type should be 'click'. The necessary order of events will be to remove the active class, if present, from any of the buttons. Then you will need to add the class to the selected button. After that you will want the event to change the text content of the second page to include the number of the clicked button.

  Please feel free to check out my solution below for my code if you're interested. I used radio inputs but also used .forEach() to practice JavaScript. https://www.frontendmentor.io/solutions/interactive-rating-component-using-css-flexbox-and-base-javascript-HhhDgY0C8G

  If you have any questions or if my comment is unclear, please feel free to reach out to me and I would be happy to explain more thoroughly.

  Marked as helpful

  0

  ---

  

  バレンタイン 😈•64,190

  @VCaramesPosted almost 2 years ago

  @RJ3605

  Using buttons is not the correct way of doing this challenge especially for accessibility.

  By using buttons a screen reader/voice over will state the following "button 1", which does not provide much detail.

  But by using radios you get the following "you are currently on a selected radio button, 1 out 5". This provides more detail for users.

  Remember not all users have perfect eyesight.

  As for the JS the event listener should be a submit on the form not click.

  Marked as helpful

  0