star it

index.html

<div id='rating'>
  <span>*</span>
  <span>*</span>
  <span>*</span>
  <span>*</span>
  <span>*</span>
</div>

script.js

const stars = document.querySelectorAll('#rating span');

stars.forEach(star => {
  star.addEventListener('click', handleClick);
});

function handleClick(e) {
  let above = true;
  // loop through all of these 
  stars.forEach(star => {
    // check if this equal to itself 
    if (star === this) {
      above = false;
    }

    if (above || star === this) {
      star.className = "active";
    } else {
      star.className = "";
    }
  });
}

star-it.markdown

star it

A Pen by Jack Howard on CodePen.

License.

style.css

.active {
  color:red;
}