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

var clicked = false;

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

$('ul li').hover(function() {
 
 if(!clicked )
 {     
      $(this).prevAll().children().removeClass('empty').addClass('fill');
  $(this).children('a').removeClass('empty').addClass('fill');
 }

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

$('ul li').click(function() {

    if(!clicked )
    {        
       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>");
        $('ul li').children().css({
            'cursor': 'default'
        });
        
        clicked = true; 
        return false;  
    
    }else{return false;}       
});