JSFiddle - React, Tailwind, and code Playground

by iamacatperson

HTML

<div id="wrapper">
    <ul>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
        <li><a href=""></a></li>
    </ul>
    
    <br clear="all" />
    
    <div id="votenum"></div>
    
</div>

CSS

#wrapper { margin: 20px 0 0 20px; } 

p { font: 12px Arial, Helvetica, sans-serif; margin-top: 20px; }

ul li {
    float: left;
    list-style: none;
}

ul li a {
    width: 36px;
    height: 35px;
    display: block;
}

a.fill {
    background: url(http://i54.tinypic.com/2a95nb9.png) no-repeat;
}

a.empty {
    background: url(http://i54.tinypic.com/2urxtt2.png) no-repeat;
}

a.voted {
    background: url(http://i56.tinypic.com/2ko7jp.png) no-repeat;
}

JavaScript

function voting() {
    $('ul li').bind("click", function() {
        var ind = $(this).index();
        $(this).prevAll().children().removeClass('fill').addClass('voted');
        $(this).children('a').removeClass('fill').addClass('voted');
        var votes = ind + 1;
        $('#votenum').html("<p>You voted " + votes + " stars.</p>");
        $('this').children().css({
            'cursor': 'default'
        });
        $('ul li').unbind();
        return false;
    });
}

$('ul li a').addClass('empty');

$('ul li').hover(

function() {
    $(this).prevAll().children().removeClass('empty').addClass('fill');
    $(this).children('a').removeClass('empty').addClass('fill');
}, function() {
    $(this).prevAll().children().removeClass('fill').addClass('empty');
    $(this).children('a').removeClass('fill').addClass('empty');
});

voting();