Interactive rating component using JS

Community feedback

• 

  T

  Alex•2,010

  @AlexKMarshallPosted over 2 years ago

  This looks very good and works nicely. The javascript is fairly concise too and readable, which is good.

  There is one main thing that you could try which might simplify this a bit.

  You can turn this into a form, rather than using buttons with event listeners. This has a few benefits. First it is more semantic so users of assistive technology will get better hints for how to interact with your component. Second, it will allow you to delete a large part of the javascript around styling, as you can use built in HTML and CSS instead.

  The html would look something like

  <form>
    <fieldset>
      <legend>Rating</legend>
      <label>
        <input type="radio" name="rating" value="1">
        1
      </label>
      <label>
        <input type="radio" name="rating" value="1">
        2
      </label>
    </fieldset>
    <button type="submit">Submit</button>
  <form>
  

  Then in your CSS you can access focus, hover and checked states, removing the need to add or remove classes with javascript

  input[type="radio"] {
    // all the styling for your standard radio buttons
  }
  
  input[type="radio"]:hover,
  input[type="radio"]:focus-visible {
    // the color change for when it's hovered/focused
  }
  
  input[type="radio"]:checked {
    // the color change for the selected item
  }
  

  In your javascript you can then get the selected value when you submit the form

  const formElement = document.querySelector('form')
  
  formElement.addEventListener('submit', (event) => {
    event.preventDefault() // stops the browser doing a full refresh
    const formData = new FormData(form) // extract the data from the form
    const rating = formData.get('rating') // get the value of the 'rating' field
  
    // now you can do whatever you want with your rating value
  })
  

  Marked as helpful

  3

  ---

  

  Mônica Aparecida Kerber Dalosto•100

  @MonicaDalostoPosted over 2 years ago

  @AlexKMarshall Thank you for these tips. I am quite new using Javascript, so I will save you code to study and improve my knowledge.

  0