JSFiddle - React, Tailwind, and code Playground

by woozyking

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/rivets/0.8.0/rivets.bundled.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div id="binder">
    <span rv-stars="rating"></span>
</div>

JavaScript

rivets.binders.stars = function (el, value) {
    value = parseFloat(value || 0);
    value = value > 5 ? 5 : value

    if (value === 0) {
        $(el).append('<i class="fa fa-star-o"></i>');
    }

    for (var i = 0; i < parseInt(value); i++) {
        $(el).append('<i class="fa fa-star"></i>');
    }

    if (value % 1 > 0) {
        $(el).append('<i class="fa fa-star-half-o"></i>');
    }
};

var data = {
    rating: 4.5
};

rivets.bind($('#binder'), data);