JSFiddle - React, Tailwind, and code Playground

by digitalicarus

HTML

<fieldset>
    <score>&nbsp;</score>
<label> start    <input type="start"    value="0"/></label>
<label> end      <input type="end"      value="10"/></label>
<label> duration <input type="duration" value="1000"/></label>
<label> easing   <input type="ease"     value="swing"/></label>
</fieldset>
<button class="up">up</button>
<button class="down">down</button>

CSS

score {
    display: block;
    font-weight: 600;
    float: left;
    font-size: 50px;
    border-bottom: 1px solid gray;    
    width: 100px;
    text-align: center;
}

button {
    width: 100px;
    padding: 10px;
    margin: 10px;
    float: right;
}
label {
    text-align: right;
    margin: 10px;
    display: block;
}
}

JavaScript

function animate (e) {
    var start = parseInt($('input[type="start"]').val(), 10)
    ,   end   = parseInt($('input[type="end"]').val(), 10)
    ,   ease  = $('input[type="ease"]').val()
    ,   dur   = parseInt($('input[type="duration"]').val(), 10)
    ,   tmp
    ;
    console.log(start, end, ease, dur);
    
    if ($(this).hasClass('down')) {
        tmp = end;
        end = start;
        start = tmp;
    }
    
    try {
        $({someValue: start}).animate({someValue: end}, {
            duration: dur,
            easing: ease, // can be anything
            step: function() { 
                $('score').html(Math.round(this.someValue));
            }
        });
    } catch (e) {}
}

$('.up, .down').on('click', animate);