JSFiddle - React, Tailwind, and code Playground

by Bai Shiuan Huang

HTML

<div id = "myBackground" style="background : lightyellow ; width:50vw ; height:50vw ; text-align:center">
  <button id="mybutton" style="position:absolute; top:10vw">
    press me
  </button>
  <input type="text" id = "myinput" style='width:20%' value="0">
  <p id='myshow' style="position:absolute; top:15vw ; left:25vw"> </p>
</div>
 
<script src="https://code.jquery.com/jquery-2.1.4.min.js">
</script>

JavaScript

$("#mybutton").click ( function() {
	countDown.counter = $("#myinput").val();
	setTimeout (countDown, 1000);   
});
function countDown() {
   if (countDown.counter > 0) {
   	--countDown.counter;
    $("#myshow").text(countDown.counter);
		setTimeout (countDown, 1000);   
   }
   else{
    alert ('time out');
    flashing();
    }
}
function flashing(){
    flashing.counter = flashing.counter || 20;
    --flashing.counter;
    if (flashing.counter > 0) {
        if(flashing.counter%2){
            $('#myBackground').css('background', 'blue');
        }
        else{
            $('#myBackground').css('background', 'red');
        }
    setTimeout (flashing, 100);   
    }
    else{
      $('#myBackground').css('background', 'lightyellow');;
      alert ('DONE');
    }
}