JSFiddle - React, Tailwind, and code Playground

by dunerunner

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css">
<div class="show-rating clearfix">
  <div class="rating">
    <div class="rating">
      <i data-rating=1 class="rating__star glyphicon glyphicon-star-empty"></i>
      <i data-rating=2 class="rating__star glyphicon glyphicon-star-empty"></i>
      <i data-rating=3 class="rating__star glyphicon glyphicon-star-empty"></i>
      <i data-rating=4 class="rating__star glyphicon glyphicon-star-empty"></i>
      <i data-rating=5 class="rating__star glyphicon glyphicon-star-empty"></i>
    </div>
  </div>
  <div class="rating-clear">
    <i class="glyphicon glyphicon-minus-sign"></i>
  </div>
</div>

SCSS

.rating {
	position: relative;
	display: inline-block;
	overflow: hidden;
	float: left;
	white-space: nowrap;
	font-size: 60px;
	cursor: pointer;
 }
 
.rating__star {
  display: inline-block;
  float: left;
  color: #aaa;
}

.rating__star--hovered {
      color: #ed9017;
      background: linear-gradient(to bottom, #f6e6b4 0%,#ed9017 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}
.rating__star--selected {
      color: #ed9017;
      background: linear-gradient(to bottom, #f6e6b4 0%,#ed9017 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
}

 .rating-clear {
    display: inline-block;
    float: left;
    padding: 13px 0 0 25px;
    font-size: 40px;
    color: #BB9A9A;
}
.rating-clear > i {
      line-height: 47px;
}

.rating-clear > i:hover {
    color: #DA7F7F;
    cursor: pointer;

}

JavaScript

var ratingModule = (function() {
  var selectedRating = 0;
  var stars;

  function starMouseover() {
          setSelectedRating($(this).data('rating'));
    
  }

  function starMouseout() {
    setSelectedRating(selectedRating, true);
  }

  function starClick() {
    setSelectedRating($(this).data('rating'), true);
  }

  function addBindings() {
    stars = $('.rating__star');
    stars.on('mouseover', starMouseover);
    stars.on('mouseout', starMouseout);
    stars.on('click', starClick);
    $('.rating-clear').on('click', clearRating);
  }

  function setSelectedRating(rating, saveRating) {
    if (saveRating) {
      selectedRating = rating;
    }
    stars.removeClass('rating__star--selected');
    for (var i = 0; i < rating; i++) {
      $(stars[i]).addClass('rating__star--selected');
    }
  }

  function clearRating() {
    selectedRating = 0;
    stars.removeClass('rating__star--selected');
  }
  return {
    addBindings: addBindings,
    clearRating: clearRating
  };
})();

$(document).ready(function() {
  ratingModule.addBindings();
});