Font Awesome Stars

by PraVitelb

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="starrr" data-rating="5.3" id="1"></div>
<div class="starrr" data-rating="7.1" id="2"></div>
<script>
	$(".starrr").starrr({
		max: 10.0
	});
  </script>

CSS

.starrr a {
    font-size: 16px;
    padding: 0 1px;
    cursor: pointer;
    color: #dc3545;
	  text-decoration: none; 
}

JavaScript 1.7

var slice = [].slice;
(function($, window) {
	var Starrr;
	window.Starrr = Starrr = (function() {
		Starrr.prototype.defaults = {
			rating: void 0,
			max: 10.0,
			readOnly: false,
			emptyClass: 'fa fa-star-o',
			fullClass: 'fa fa-star',
			halfClass: 'fas fa-star-half-alt',
			change: function(e, value) {}
		};

		function Starrr($el, options) {
			this.options = $.extend({}, this.defaults, options);
			this.$el = $el;
			this.createStars();
			this.syncRating();
			if (this.options.readOnly) {
				$(this)[0].$el.children().addClass('readonly')
				return;
			}
			this.$el.on('mouseover.starrr', 'a', (function(_this) {
				return function(e) {
					return _this.syncRating(_this.getStars().index(e.currentTarget) + 1.0);
				};
			})(this));
			this.$el.on('mouseout.starrr', (function(_this) {
				return function() {
					return _this.syncRating();
				};
			})(this));
			this.$el.on('click.starrr', 'a', (function(_this) {
				return function(e) {
					e.preventDefault();
					return _this.setRating(_this.getStars().index(e.currentTarget) + 1.0);
				};
			})(this));
			this.$el.on('starrr:change', this.options.change);
		}
		Starrr.prototype.getStars = function() {
			return this.$el.find('a');
		};
		Starrr.prototype.createStars = function() {
			var j, ref, results;
			results = [];
			for (j = 0.5, ref = this.options.max; 0.5 <= ref ? j <= ref : j >= ref; 0.5 <= ref ? j++ : j--) {
				results.push(this.$el.append("<a href='#rating' />"));
			}
			return results;
		};
		Starrr.prototype.setRating = function(rating) {
			/*if (this.options.rating === rating) {
				rating = void 0;
			}*/
			this.options.rating = rating;
			this.syncRating();
			return this.$el.trigger('starrr:change', rating);
		};
		Starrr.prototype.getRating = function() {
			return this.options.rating;
		};
		Starrr.prototype.syncRating = function(rating) {
			var $stars, i, j, ref, results;
			rating || (rating = this.options.rating);
			$stars = this.getStars();
			results = [];
			for...