JSFiddle - React, Tailwind, and code Playground

by BurpmanJunior

HTML

<div class="btn" id="up">+</div>
<div class="btn" id="down">-</div>
<div id="output"></div>

CSS

.btn{
    background:#ccc;
    padding: 10px;
    text-align: center;
    width: 50px;
    color: #333;
    font-family: sans-serif;
    margin: 10px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    -ms-user-select: none;
}

JavaScript

var timer = new Object();
timer.upID = '#up';
timer.downID = '#down';
timer.outputID = '#output';
timer.numVal = 1;
timer.showMore = false;
timer.initialize = function(){
    if(timer.showMore){
        $(timer.outputID).html('more: '+timer.numVal);
    }else{
        $(timer.outputID).html(timer.numVal);
    }
    timer.checkNum();
}
timer.checkNum = function(){
    if(timer.numVal > 3){
        timer.showMore = true;
    }else{
        timer.showMore = false;
    }
    if(timer.numVal < -5){
        window.clearInterval(timer.repInit);
        $(timer.outputID).html('Lower limit reached');
    }
}
timer.repFunc = function(){
    return window.setInterval(timer.initialize, 250);
}
$(function(){
    timer.repInit = timer.repFunc();
    $(timer.upID).click(function(){
        timer.numVal++;
    });
    $(timer.downID).click(function(){
        timer.numVal--;
    });
});