Stars rating

by kpulkit29

HTML

<div class='stars'>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polygon points="12,3 6,21 21,9 3,9 18,21" />
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polygon points="12,3 6,21 21,9 3,9 18,21" />
      </svg>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polygon points="12,3 6,21 21,9 3,9 18,21" />
      </svg>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polygon points="12,3 6,21 21,9 3,9 18,21" />
      </svg>
            <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
        <polygon points="12,3 6,21 21,9 3,9 18,21" />
      </svg>
</div>

CSS

.stars {
  display: flex;
  width: 30%;
  height: 40px;
}

svg {
  fill: black;  
}

svg.active  {
  fill: yellow;
}
svg.inactive {
  fill: black;
}

JavaScript

let stars = document.querySelectorAll('.stars > svg');

function setUnsetStars(classToAdd, classToRemove, index, lookahead = false) {
	if(lookahead) {
  		for(let i=index+1; i< stars.length; i++) {
  			stars[i].classList.add(classToAdd);
      	stars[i].classList.remove(classToRemove);
  	}
    return;
  }
	for(let i=0; i< index; i++) {
  		stars[i].classList.add(classToAdd);
      stars[i].classList.remove(classToRemove);
  }
}

for(let i=0; i<stars.length; i++) {
	stars[i].addEventListener('click', function(e)  {
    let element;
    if(e.currentTarget === stars[i]) {
    	element = e.currentTarget
    } else if(e.target === stars[i]) {
    	element = e.target;
    }
    console.log(element);
  	let classes = [].slice.apply(element.classList);
    if(classes.includes('active')) {
    	element.classList.remove('active');
      element.classList.add('inactive');
      setUnsetStars('inactive', 'active', i, true);
    } else {
      element.classList.add('active');
      element.classList.remove('inactive');
      setUnsetStars('active', 'inactive', i);
    }
  })
}