Interactive Rating Component

Community feedback

• 

  Roksolana•910

  @RoksolanaVeresPosted 7 months 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%;
      ...
  

  Marked as helpful

  1

  ---

  

  P

  Øystein Håberg•11,380

  @Islandstone89Posted 7 months ago

  @RoksolanaVeres Thanks, that worked a treat! :D

  1

  

  Roksolana•910

  @RoksolanaVeresPosted 7 months ago

  @Islandstone89 Great! You're welcome :)

  1
• 

  P

  Koda👹•3,850

  @kodan96Posted 7 months 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.

  Marked as helpful

  0

  ---

  

  P

  Øystein Håberg•11,380

  @Islandstone89Posted 7 months ago

  @kodan96 Thanks for the reply! I already wrapped the label and input in a wrapper. I tried your code, and it worked. The issue now is that if I click outside the number itself, the button doesn't get activated. But I avoid the "undefined" issue, and my initial thought was to fetch the value from the input...so I might go for your solution!

  1

  

  P

  Koda👹•3,850

  @kodan96Posted 7 months ago

  @Islandstone89

  You can toggle the radio button with the same index within the event handler and you can set up a conditional statement to add the active class to any checked radio button. at least I think you can work around the issue with this

  Marked as helpful

  1