JSFiddle - React, Tailwind, and code Playground

by Thomas McManus

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<div id="timercontainer">
<div id="timerdiv">
</div>
<div class="section">
<input id="ten" type="submit" value="start 10 seconds">
<input id="twenty" type="submit" value="start 20 seconds">
<input id="thirty" type="submit" value="start 30 seconds">
<input id="one-min" type="submit" value="start 1 min">
<input id="five-min" type="submit" value="start 5 min">
</div>
<div class="section">
<input id="add" type="submit" value="add 10 seconds">
<input id="remove" type="submit" value="remove 10 seconds"></div>
<div class="section">
<input id="half" type="submit" value="cut time in half">
<input id="double" type="submit" value="double time"><br />
<input id="pause" type="submit" value="pause">
</div>
</body>

CSS

#timercontainer{
    margin-top:30px;
}
#timerdiv{
    height:15px;
}
input{
    margin:10px 5px;
}
.section{
    margin:10px 0;
    background:#f1f1f1;
    border:1px solid #ccc;
}

JavaScript

pingSound = new Audio("https://www.sounddogs.com/previews/2176/mp3/115553_SOUNDDOGS__ca.mp3");
	pingSoundNear = new Audio("https://www.sounddogs.com/previews/25/mp3/234977_SOUNDDOGS__cl.mp3");
	pingSound.preload = "auto";
	pingSoundNear.preload = "auto";
    timeout = null;
    time = null;

    $('#ten').on('click', function(){
			startCountdown(10, 1000, end);
    });
    $('#twenty').on('click', function(){
			startCountdown(20, 1000, end);
    });
    $('#thirty').on('click', function(){
			startCountdown(30, 1000, end);
    });
    $('#one-min').on('click', function(){
			startCountdown(60, 1000, end);
    });
    $('#five-min').on('click', function(){
			startCountdown(300, 1000, end);
    });

    $('#pause').on('click', function(){
			time = clearInterval(time);
		});
    $('#add').on('click', function(){
        time = time+10;
        startCountdown(time, 1000, end);
    });
    $('#remove').on('click', function(){
        time = time-10;
        startCountdown(time, 1000, end);
    });
    $('#half').on('click', function(){
        time = time *.5;
				roundedTime = Math.round(time);
        startCountdown(roundedTime, 1000, end);
    });
    $('#double').on('click', function(){
        time = time *2;
				roundedTime = Math.round(time);
        startCountdown(roundedTime, 1000, end);
    });

    $('#pause').click(function () {
        if (clicked) {
            counter = setInterval(function () {
                var m = $('.min', timer),
                    s = $('.sec', timer);
                if (seconds === 0) {
                    minutes--;
                    seconds = 59;
                } else {
                    seconds--;
                }
                m.text(minutes);
                s.text(leadingZero(seconds));
            }, 1000);
        } else {
            clearInterval(counter);
        }
        clicked = !clicked;
	});

    function startCountdown(timen, pause, callback) {
        time = timen;
       ...