Star rating con JS

by Diego La Monica

HTML

<script src="https://kit.fontawesome.com/a9758a1a63.js"></script>
<div class="star-rating" data-rating="3.4">

  <div class="empty-stars">
    <i class="far fa-star"></i>
    <i class="far fa-star"></i>
    <i class="far fa-star"></i>
    <i class="far fa-star"></i>
    <i class="far fa-star"></i>
  </div>

  <div class="full-stars">
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
    <i class="fas fa-star"></i>
  </div>

</div>

CSS

.star-rating {
  display: inline-block;
  position: relative;
}

.empty-stars {
  position: absolute;
  color: #222;
}

.full-stars {
  overflow: hidden;
  
  white-space: nowrap;
  color: yellow;
  opacity: 0.8;
}

JavaScript

var starRatings = document.querySelectorAll('.star-rating');

for (var index = 0; index < starRatings.length; index++) {
  var starRating = starRatings[index];
  var fullStars = starRating.querySelector('.full-stars');
    rating = parseFloat(starRating.dataset.rating) || 0;
    percentWidth = rating * 20;

  fullStars.style.width = percentWidth + '%';
}