Interactive Rating Component

Community feedback

• 

  Roksolana•910

  @RoksolanaVeres

  Posted about 1 year ago

  Hi! I have a simpler solution. You don't need a separate wrapper for label and input, instead you can wrap your input by the label itself:

  HTML:

  <label class="rating-btn-wrapper">
    <input type="radio" name="rating" value="1" class="rating-btn" />
          1
  </label>
  
  <label class="rating-btn-wrapper">
    <input type="radio" name="rating" value="2" class="rating-btn" />
          2
  </label>
  ...
  

  Now you don't need to use id and for attributes. Here you can read more about it:

  https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

  Now your button styles are broken. To make rating buttons completely round, just remove paddings and add fixed width and height for buttons:

  CSS:

  .rating-btn-wrapper {
      background-color: var(--clr-dark-blue);
      height: 45px;
      width: 45px;
      border-radius: 50%;
      ...
  

  12

  Marked as helpful
• 

  Koda👹•3,830

  @kodan96

  Posted about 1 year ago

  hi there! 👋

  I would probably wrap the radio buttons and the labels into wrappers:

  <div class="rating-btn-wrapper" data-value="3">
            <label for="option-3">3</label>
            <input type="radio" name="rating" id="option-3" value="3" class="rating-btn">
  </div>
  

  and change the selector to target the input element directly:

  let ratingButtons = document.querySelectorAll(".rating-btn-wrapper input");
  

  so within your event handler you can retrieve the value directly:

  function ratingBtnClicked(e) {
      ratingButtons.forEach((button) => button.parentElement.classList.remove("active"));
      this.parentElement.classList.add("active");
  
      defaultScore = this.value;
  }
  

  Hope I got it right.

  02

  Marked as helpful