JSFiddle - React, Tailwind, and code Playground

by devkodeio

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div id="star"></div>
<div id="display-star-value"></div>

CSS

body {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100vh;
}

.fa {
    font-size: 40px;
}

.fa-star-o:before {
    content: "\f006";
    color: #5f6368;
}

.fa-star:before {
    content: "\f005";
    color: #d56e0c;
}

JavaScript

function Star(el, count, callback) {
  let active = -1;
  const element = document.querySelector(el);
  const fragment = document.createDocumentFragment();
  for (let i = 1; i <= count; i++) {
    const iElem = document.createElement("i");
    iElem.classList.add("fa");
    iElem.classList.add("fa-star-o");
    iElem.dataset.ratingVal = i;
    fragment.appendChild(iElem);
  }
  element.appendChild(fragment);
  element.addEventListener("mouseover", onMouseOver);
  element.addEventListener("click", onClick);
  element.addEventListener("mouseleave", onMouseLeave);

  function onMouseOver(e) {
    const ratingVal = e.target.dataset.ratingVal;
    if (!ratingVal) {
      return;
    }
    fill(ratingVal);
  }

  function fill(ratingVal) {
    for (let i = 0; i < count; i++) {
      if (i < ratingVal) {
        element.children[i].classList.add("fa-star");
      } else {
        element.children[i].classList.remove("fa-star");
      }
    }
  }

  function onMouseLeave(e) {
    fill(active);
  }

  function onClick(e) {
    active = e.target.dataset.ratingVal;
    fill(active);
    callback(active);
  }
}




function getStar(value) {
  document.getElementById('display-star-value').innerHTML = value;
}
Star("#star", 5, getStar);