JSFiddle - React, Tailwind, and code Playground

by Brock Callahan

HTML

<h1 id="time"></h1>

CSS

.serif {font-family: serif;}
.sans-serif {font-family: sans-serif;}
.monospace {font-family: monospace;}
.cursive {font-family: cursive;}
.fantasy {font-family: fantasy;}

JavaScript

var secondsRemaining;
var intervalHandle;

function tick() {

  // grab the h1
  var timeDisplay = document.getElementById('time');
  
  //turn seconds into mm:ss
  var min = Math.floor(secondsRemaining / 60);
  var sec = secondsRemaining - (min * 60);
  
  // add a leading zero (as a string value) if seconds less than 10
  if (sec < 10) {
  	sec = "0" + sec;
  }

  // concatenate with colon
  var message = min + ":" + sec;

  // now change the display
  timeDisplay.innerHTML = message;
  
  // stop if down to zero
  if (secondsRemaining === 0) {
    sound.play();
  	alert('done!');
    clearInterval(intervalHandle);
    resetPage();
  }

  secondsRemaining--;

}

function startCountDown(min) {

  // set the minutes
  var minutes = min;

  // How many seconds?
  secondsRemaining = minutes * 60;

  // Every second call the tick function
  intervalHandle = setInterval(tick, 1000);

}

startCountDown(20);