Interactive Rating Component with SASS & Vanilla JS

Community feedback

• 

  Elaine•11,400

  @elaineleungPosted over 2 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");
        }
      });
    });
  });
  
  

  Marked as helpful

  0

  ---

  

  jjjayed•270

  @Jane72-boopPosted over 2 years ago

  @elaineleung oh wow that's a really good solution, thanks! Also, how did you make the circles of the numbers perfectly round?

  0

  

  Elaine•11,400

  @elaineleungPosted over 2 years ago

  @Jane72-boop Thanks, glad I could help! For the buttons, I used display: grid and the place-content: center; property for the grid.

  Here's the CSS:

  .rating__btn {
    background-color: var(--clr-blue-medlight);
    border: 0;
    width: 42px;
    height: 42px;
    padding-top: 5.5px;
    display: grid;
    place-content: center;
    border-radius: 50%;
    cursor: pointer;
  }
  

  Marked as helpful

  0