Interactive Rating Component with SASS & Vanilla JS

Community feedback

• 

  Elaine•11,360

  @elaineleung

  Posted about 3 years ago

  Hi Jane XANE, here's what I did for my component:

  For the HTML: I made my rating buttons into inputs, gave them a class of .rating__btn and a value of the score:

  <input type="button" class="rating__btn" value="1" />
  

  For the CSS: I dreated a class btn__is-selected that changes the background to gray when the button is selected

  For the JS side, see below:

  const [...scoreBtns] = document.querySelectorAll(".rating__btn");
  
  let selected = null;  // this keeps track of which rating was selected
  
  scoreBtns.map((btn) => {
    // add event listener to track which button is clicked
    btn.addEventListener("click", function (event) {
      selected = event.target.value;
  
      // remove the styling class from all buttons and then add it back to the selected one
      scoreBtns.forEach((btn) => {
        btn.classList.remove("btn__is-selected");
        if (btn.getAttribute("value") === selected) {
          btn.classList.add("btn__is-selected");
        }
      });
    });
  });
  
  

  02

  Marked as helpful