Javascript Countdown Timer

Web Design & Web Development

Demo

Sponsored links

 

Code

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Javascript Countdown Timer</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" type="text/css" href="https://demo.plantpot.works/assets/css/normalize.css">
    <link rel="stylesheet" href="https://use.typekit.net/opg3wle.css">
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="countdowntimer.js"></script>
  </head>
  <body>
    <div id="container">
      <div class="box">
        <div id="msg" class="msg"></div>
        <div class="countdownt-timer">
          <input id="hours" type="number" name="hours" min="0" placeholder="HH"/>
          <span>:</span>
          <input id="minutes" type="number" name="minutes" min="0" max="59" placeholder="MM"/>
          <span>:</span>
          <input id="seconds" type="number" name="seconds" min="0" max="59" placeholder="SS"/>
        </div>
        <div class="buttons">
          <button id="start" class="button" onclick="start()">Start</button>
          <button id="stop" class="button" onclick="stop()">Stop</button>
          <button id="reset" class="button" onclick="reset()">Reset</button>
        </div>
      </div>
    </div>
  </body>
</html>

CSS

@charset "utf-8";
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  font-size: 16px;
}
body {
  background-color: #03031b;
  font-family: futura-pt, sans-serif;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}
#container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  padding: 30px 15px;
}
.box {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 300px;
  height: 130px;
}
.msg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #ff0101;
  font-size: 1.5rem;
  text-align: center;
}
.countdownt-timer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  color: #fff;
  font-size: 2rem;
}
input[type="number"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 30%;
  height: 40px;
  padding: 0;
  border: none;
  border-bottom: solid 1px #fff;
  border-radius: 0;
  background-image: url(ic_spin_button.svg);
  background-position: 95% 13px;
  background-size: 9px;
  background-repeat: no-repeat;
  background-color: rgba(255, 255, 255, 0);
  color: #fff;
  font-size: 1.5rem;
  text-align: center;
  outline: none;
}
input[type="number"]::-webkit-inner-spin-button {
  opacity: 0;
  cursor: pointer;
}
input[type="number"]::placeholder {
  color: #ccc;
  font-size: 1.25rem;
}
input[type="number"]:focus::placeholder {
  opacity: 0;
}
.buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 10px;
}
.button {
  cursor: pointer;
  width: 30%;
  padding: 8px 0;
  border: none;
  background-color: #fac984;
  color: #3d3935;
  font-size: 1.5rem;
  outline: none;
}
.button:disabled {
  background-color: #ccc;
  cursor: default;
}

Javascript

var hh;
var mm;
var ss;
var msg;
var time;
var t;

window.onload = function() {
  msg = document.getElementById("msg");
}

function countDown() {
  var intHH = (isNaN(hh) || !hh) ? 0 : parseInt(hh, 10);
  var intMM = (isNaN(mm) || !mm) ? 0 : parseInt(mm, 10);
  var intSS = (isNaN(ss) || !ss) ? 0 : parseInt(ss, 10);

  time = intHH*60*60 + intMM*60 + intSS;
  time = time - 1;
  hh = Math.floor(time / 3600);
  mm = Math.floor(time / 60) % 60;
  ss = (time % 60) % 60;
  document.getElementById("hours").value = hh;
  document.getElementById("minutes").value = ("0" + mm).slice(-2);
  document.getElementById("seconds").value = ("0" + ss).slice(-2);

  if(time == 0) {
    msg.innerHTML = "Time Up!";
    reset();
  }
}

function start() {
  hh = document.getElementById("hours").value;
  mm = document.getElementById("minutes").value;
  ss = document.getElementById("seconds").value;

  if(!hh && !mm && !ss) {
    msg.innerHTML = "Set Time!";
  }
  else {
    msg.innerHTML = "";
    t = setInterval(countDown, 1000);
    document.getElementById("start").disabled = true;
  }
}

function stop() {
  clearInterval(t);
  document.getElementById("start").disabled = false;
}

function reset() {
  clearInterval(t);
  hh = "";
  mm = "";
  ss = "";
  time = "";
  document.getElementById("hours").value = "";
  document.getElementById("minutes").value = "";
  document.getElementById("seconds").value = "";
  document.getElementById("start").disabled = false;
}