JSFiddle - React, Tailwind, and code Playground

by rcugut

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://codenapse-6ab.kxcdn.com/jqAwesomeStarRating-0.1.1.min.js"></script>
<h4>Rate it!</h4>
<div id="rate_it" class="star-rating"></div>

<h4>It has 4 stars. Aggree?</h4>
<div id="rate_it2" class="star-rating" data-score="4"></div>

CSS

.star-rating i {
    margin-right: 0.2em;
    font-size: 16px;
    cursor: pointer;
}

.star-rating .fa-star, .star-rating .fa-star-half-o {
    color: #f8a000;
}

.star-rating .fa-star-o {
    color: #cccccc;
}

JavaScript

jQuery(function () {
    $('#rate_it').awesomeStarRating({
        onChange: function (score) {
            if(score > 3) {
                alert('Awesome! You give it ' + score + ' stars!');
            } else if ( score > 1 ) {
                alert('You give it ' + score + ' stars. That\'s ok :-)');
            } else {
                alert('Oh... just one star? Really?');
            }
        }
    });
    
    $('#rate_it2').awesomeStarRating();
});