Star rating con JS

by Diego La Monica

HTML

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

  <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 {
  color: yellow;
  opacity: 0.8;
}