JSFiddle - React, Tailwind, and code Playground

by bryanb

HTML

<a class="action" title="A is for Alpha">A</a>
<a class="action inprogress" title="B is for Bravo">B</a>
<a class="action complete" title="C is for Charlie">C</a>
<a class="action" title="D is for Delta">D</a>
<a class="action" title="E is for Echo">E</a>
<a class="action" title="F is for Foxtrot">F</a>

CSS

.action {
    float:left;
    margin:0 1px;
    border-radius: 50%;
    behavior: url(PIE.htc); /* remove if you don't care about IE8 */

    width: 20px;
    height: 20px;
    padding: 3px;
    
    background: #fff;
    border: 2px solid #BDBDBD;
    color: #BDBDBD;
    text-align: center;
    font-weight:bold;
    font: 18px Arial, sans-serif;
    cursor:pointer;    
    
}
.inprogress {
    background:#5882FA;
    color:#fff;
    border: 2px solid #5882FA;
}
.complete {
    background:#01DF01;
    color:#fff;
    border: 2px solid #01DF01;
}

JavaScript

(function($) {
    // on document ready    
    $(".action").click(function(e) {
       e.preventDefault(); 
       var $btn = $(this);
        
       if ($btn.hasClass("inprogress")) {
            //move to complete
            $btn.removeClass('inprogress').addClass('complete');
            return;    //exit
       }
       if ($btn.hasClass("complete")) {
            //move to null
            $btn.removeClass('complete');
            return;    //exit
       }
        
       //this will only be triggered if the above two conditions fail
       $btn.addClass('inprogress');
       return;    //exit
       
    });

}(jQuery));