JSFiddle - React, Tailwind, and code Playground

by ian_smithz

HTML

<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<div id="progressBar"></div>

<button id="upBtn">UP</button>
<button id="dwnBtn">DOWN</button>
<button id="checkBtn">Check</button>
<p class="correct" style="display:none">That's correct</p>
<p class="incorrect" style="display:none">Sorry, that's not right</p>

CSS

.correct{
color:#009900;
}
.incorrect{
color:#990000;
}

JavaScript

$(function(){
    var progress = $('#progressBar').progressbar({
        value:50
    });
    
    $('#upBtn').click(function(){
        progress.progressbar('value', progress.progressbar('value') + 10);        
    });
    
    $('#dwnBtn').click(function(){
        progress.progressbar('value', progress.progressbar('value') - 10);        
    });
    
    $('#checkBtn').click(function(){
        var value = progress.progressbar('value');
        if(value > 50){
            $('.incorrect').hide();
            $('.correct').fadeIn('slow');
        } else{
            $('.correct').hide();
            $('.incorrect').fadeIn('slow');            
        }
    });
});