JSFiddle - React, Tailwind, and code Playground

by learner001

HTML

<div class="countdown">
	<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> 
</div>
<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; 
	}
	
.countdown
{
text-align:center; 
margin-left:50px;
}

JavaScript

/*******Code for the three buttons*********/
$(document).ready(function (){
		$("#startClock").click(function (){
				$("#startClock").fadeOut(function(){
$("#walkaway").fadeIn().delay(120000).fadeOut();                        $("#submitamt").fadeIn().delay(120000).fadeOut(function(){
		$("#startClock").fadeIn();
		});
	})
});
});

/*******Code for running test.php script*********/
$(document).ready(function(){
$('#submitamt').click(function(){
    var txtbox = $('#txt').val();
    var hiddenTxt = $('#hidden').val();
   
        $.ajax({
            type:'post',
             url:'test.php',
            data:{txt:txtbox,hidden:hiddenTxt},
            cache:false,
            success: function(returndata){
                $('#proddisplay').html(returndata);
                console.log(returndata)
            }
        });
})
})

/*******Code for starting the clock*********/
$('#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);

});