Introduction

Basic usage

Events

HTML

  
  <div class="star-rating star-rating--basic" data-ratingValue="4">
    <ul class="star-rating__list">
      <li data-star="5"></li>
      <li data-star="4"></li>
      <li data-star="3"></li>
      <li data-star="2"></li>
      <li data-star="1"></li>
    </ul>
  </div>
  
      

JS

  
  import Zvezdochki from "zvezdochki";

  let ratingEl = document.querySelector(".star-rating--basic");

  new Zvezdochki(ratingEl);

  ratingEl.addEventListener("vote", ev => {
    console.log(ev.detail.star)
  });
  
    

Advanced usage

Events

HTML

  
  <div class="emoji-rating" data-ratingValue="hankey">
    <div class="emoji-rating__list">
      <span data-emoji="love">😍</span>
      <span data-emoji="yep">😃</span>
      <span data-emoji="maybe">😏</span>
      <span data-emoji="nope">😐</span>
      <span data-emoji="hankey">💩</span>
    </div>
  </div>
  
      

JS

  
  import Zvezdochki from "zvezdochki";

  let ratingEl = document.querySelector(".emoji-rating");

  let options = {
    activeClass: "active",
    starDataAttr: "emoji",
    ratingDataAttr: "rating",
    votedClassName: 'emoji-rating--blocked',
    voted: false
  };

  new Zvezdochki(ratingEl, options);

  ratingEl.addEventListener("vote", ev => {
    console.log(ev.detail);
  });
  
    

Save already voted ratings ID in localstorage (for better compatibility with caching services)

Events

HTML

 
  <div class="star-rating star-rating--storage" data-id="321" data-ratingValue="3">
    <ul class="star-rating__list">
      <li data-star="5"></li>
      <li data-star="4"></li>
      <li data-star="3"></li>
      <li data-star="2"></li>
      <li data-star="1"></li>
    </ul>
  </div>
  
      

JS

  
  import Zvezdochki from "zvezdochki";

  let ratingEl = document.querySelector('.star-rating--storage');

  let options = {
    id: ratingEl.dataset.id,
    localStorageName: 'votes'
  };

  new Zvezdochki(ratingEl, options);

  ratingEl.addEventListener("vote", ev => {
    console.log(ev.detail);
  });