Rating Stars

by Ricardo Ruiz

HTML

<section class="rating" data-rating="4">
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
</section>

<section class="rating" data-rating="0">
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
  <svg class="icon icon-star-full">
    <use xlink:href="#icon-star-full"></use>
  </svg>
</section>



<svg class="svg-spritesheet">
  <symbol id="icon-star-full" viewBox="0 0 32 32">
    <title>star-full</title>
    <path d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"></path>
  </symbol>
</svg>

CSS

.svg-spritesheet { /* Hide the SVG Spritesheet to prevent some browsers to render an empty white space. */
  display: none;
}
.icon { /* Default icon properties, using the currentColor variable to be able to change the icon's color with the CSS color property. */
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
  cursor: pointer;
}
.icon-star-full { /* The icon's fill color */
  color: #C1C2C4;
}
.icon-star-full.rated { /* The icon's 'active' fill color */
  color: #F6DB08;
}

JavaScript

//Summary: Star Rating Component, get and/or set a rating displaying icons.
(function() {
// Assign variables for jQuery Objects and classes as string.
  var $rating = $(".rating"),
    sRatingClass = "rated",
    sIcon = "icon-star-full",
    $icon = $("." + sIcon);

// Iterate over jQuery Rating objects.
  $.each($rating, function() {
  // Get the rating if set, you can set this with a REST service and get the current rating.
    var iRating = $(this).data("rating");
    // Filter the icons with a :nth-child pseudo-class and add the 'active' class.
    $(this).find("."+ sIcon + ":nth-child(-n+" + iRating + ")").addClass(sRatingClass);
  });

// Add click event listener to jQuery Icon Objects.
  $icon.on("click", function() {
  // Get the index of the icon being clicked.
    var iIconIndex = $(this).index() + 1,
    // Select the parent of the icon being clicked.
      $iconParent = $(this).parent();
      // Remove the 'active' class to all the icons before setting the new ones.
    $iconParent.find("." + sIcon).removeClass(sRatingClass);
    // Add the 'active' class to the icon clicked and its previous siblings.
    $iconParent.find("." + sIcon + ":nth-child(-n+" + iIconIndex + ")").addClass(sRatingClass);
    // Set the rating to the parent, this can be sent to the backend with a REST service.
    $iconParent.attr("data-rating", iIconIndex);
  });

})();