JSFiddle - React, Tailwind, and code Playground

by shamaleyte

HTML

<div>
<div>
<p id="demo"></p>
</div>
<div class="labels">
<span>MINUTES</span><span>SECONDS</span></p>
</div>
</div>

CSS

p {
	color: #000000;
  font-family: "Futura PT";
  font-size: 56px;
  font-weight: 300;
  line-height: 56px;
  text-align: center;
  margin:0 auto;
  
}
span{
  	opacity: 0.5;	color: #000000;	font-family: "Futura PT";	font-size: 14.4px;	font-weight: 300;	line-height: 18px;	text-align: center;
}
.labels{
  text-align:center;
}

JavaScript

function startCountDown(){
// Set the date we're counting down to
var countDownDate = new Date().getTime() + ( 60000 * 25 ) ;

// Update the count down every 1 second
var x = setInterval(function() {

    // Get todays date and time
    var now = new Date().getTime();
    
    // Find the distance between now an the count down date
    var distance = countDownDate - now;
    
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    // Output the result in an element with id="demo"
    document.getElementById("demo").innerHTML = minutes + " : " + seconds ;
    
    // If the count down is over, write some text 
    if (distance < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);

}
function tick()
{
    //get the mins of the current time
    var mins = new Date().getMinutes();
    console.log("mins : " + mins);
    if(mins == "00"){
        alert('Do stuff');
     }
     else
     {
     	console.log("StartCountDown");
     	startCountDown();
        clearInterval(checkNewHour);
     }
    console.log('Tick ' + mins);
}
var checkNewHour = setInterval(function() { tick(); }, 1000);