@buuug7/simplify-star-rating

Install

install @buuug7/simplify-star-rating package via npm, and then import from @buuug7/simplify-star-rating/index.css file.

npm install @buuug7/simplify-star-rating

Demo examples

Usage

default

<div class="star-rating" id="star-rating-1">
  <span class="star fill"></span>
  <span class="star fill"></span>
  <span class="star"></span>
  <span class="star"></span>
  <span class="star"></span>
</div>

large

<div class="star-rating" id="star-rating-2">
  <span class="star lg fill"></span>
  <span class="star lg fill"></span>
  <span class="star lg"></span>
  <span class="star lg"></span>
  <span class="star lg"></span>
</div>

interact with javascript

function initStar(selector) {
  const starRating = document.querySelector(selector);
  starRating.querySelectorAll(".star").forEach((node) => {
    node.addEventListener("click", (e) => {
      const target = e.target;
      const haveFill = target.classList.contains("fill");

      haveFill ? target.classList.remove("fill") : target.classList.add("fill");
    });
  });
}
initStar("#star-rating-1");