JSFiddle - React, Tailwind, and code Playground

by learner001

HTML

<span id="count">
    <span class="first_digit">2</span>
    <span class="second_digit">:</span>
    <span class="third_digit">0</span>
    <span class="fourth_digit">0</span>
</span> 

<button class="rightbtn" type="button" id="startClock">Start</button>
<button class="rightbtn" type="button" id="submitamt" style="display:none; ">Submit</button>
<button class="botleftbtn" type="button" id="walkaway" style="display:none">Walk Away</button>

CSS

.first_digit
	{
	width:60px; 
	font-size:40px; 
	padding:4px;
	color: #CCC; 
	text-shadow: 0px 1px 2px #000; 
	text-align: center; 
	background-color: #333;
	border-radius: 6px; 
	}
	
.second_digit
	{
		color: #333; 
		font-size:40px; 
	}

.third_digit
	{
	width:60px; 
	font-size:40px; 
	padding:4px;
	color: #CCC; 
	text-shadow: 0px 1px 2px #000; 
	text-align: center; 
	background-color: #333;
	border-radius: 6px; 
	}
	
.fourth_digit
	{
	width:60px; 
	font-size:40px; 
	padding:4px;
	color: #CCC; 
	text-shadow: 0px 1px 2px #000; 
	text-align: center; 
	background-color: #333;
	border-radius: 6px; 
	}

JavaScript

$(document).ready(function ()
	{
		$("#startClock").click(function () 
			{
				$("#startClock").fadeOut(function()
					{
						$("#walkaway").fadeIn().delay(120000).fadeOut();
                        $("#submitamt").fadeIn().delay(120000).fadeOut(function()
							{
								$("#startClock").fadeIn();
							});
					})
			});
	});

$('#startClock').click(function () {
    var counter = 120;
    setInterval(function () {
        counter--;
        if (counter >= 0) {
            span = document.getElementById("count");
            span.innerHTML = '<span class="first_digit">' + parseInt(counter / 60) + '</span><span class="second_digit">:</span><span class="third_digit">' + parseInt((counter % 60) / 10) + '</span> <span class="fourth_digit">' + (counter % 60) % 10;
        }
        if (counter === 0) {
            alert('sorry, out of time');
            clearInterval(counter);
        }
    }, 1000);

});