Star Rating

rating.html

<div class="rating">
  <span>☆</span><span>☆</span><span>☆</span><span>☆</span><span>☆</span>
</div>

<div>
<p id="output"></p>
</div>

<script>
      let ratingStars = [...document.querySelectorAll('.rating span')].map((s, i) => {
        return {index: i, span: s}
      });
      
      const getRating = (starsToRate) => {
        return starsToRate
          .filter(star => star.span.innerHTML == '★').length
      };
      
      const setStar = (stars) => {
        stars.forEach(star => {
          star.span.style.color = '#1dd577';
          star.span.innerHTML = '★'
        });
      }

      const unSetStar = (stars) => {
        stars.forEach(star => {
          star.span.style.color = '#ccc';
          star.span.innerHTML = '☆'
        });
      }

      ratingStars.forEach(x => x.span.addEventListener('click', e => {
        let spanClicked = e.target || e.srcElement;
        if(spanClicked.innerHTML === '☆') {
          setStar(ratingStars.filter(y => y.index <= x.index))
        } else {
          unSetStar(ratingStars.filter(y => y.index >= x.index))
        }
        
        // added for example
        output.innerHTML = `rating is now ${getRating(ratingStars)}`
      }));
      
      let output = document.getElementById('output');
</script>