Star rating widget

by kpulkit29

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>
<span class="fa fa-star"></span>

CSS

span {
  margin-right: 2px;
  color: black;
}

JavaScript

let allStars = document.querySelectorAll(".fa-star");

let currSelected = -1;


function unSelect(element) {
		element.selected = false;
    element.style.color = "black";
}

function select(element) {
		element.selected = true;
    element.style.color = "yellow";
}


function starClicked(event, index) {
  let element = event.target;
  if(currSelected>index) {
  	for (let i = index; i <= currSelected; i++) {
			unSelect(allStars[i]);
    }
    
  } else {
  	 for (let i = 0; i <index; i++) {
			select(allStars[i]);
    }
  }
  select(element);
  currSelected = index;
  
}

function 

for (let i = 0; i < allStars.length; i++) {
  allStars[i].addEventListener("click", (event) => {
    starClicked(event, i)
  });
  
  allStars[i].addEventListener("mouseenter", (event) => {
    starClicked(event, i)
  });
  
  allStars[i].addEventListener("mouseout", (event) => {
    starClicked(event, i)
  });
}