JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<div class="star-rating">
  <span class="star" data-value="1">1</span>
  <span class="star" data-value="2">2</span>
  <span class="star" data-value="3">3</span>
  <span class="star" data-value="4">4</span>
  <span class="star" data-value="5">5</span>
</div>

CSS

.star-rating {
  display: inline-block;
}

.star {
  font-size: 30px;
  color: gray;
  cursor: pointer;
}

.star.active {
  color: gold;
}

JavaScript

const stars = document.querySelectorAll('.star');

stars.forEach((star, index) => {
  star.addEventListener('click', () => {
    const value = star.getAttribute('data-value');
    alert(`You rated ${value} stars!`);
    stars.forEach((s, i) => {
      if (i <= index) {
        s.classList.add('active');
      } else {
        s.classList.remove('active');
      }
    });
  });

  star.addEventListener('mouseover', () => {
    stars.forEach((s, i) => {
      if (i <= index) {
        s.classList.add('active');
      } else {
        s.classList.remove('active');
      }
    });
  });

  star.addEventListener('mouseout', () => {
    stars.forEach(s => s.classList.remove('active'));
  });
});