Creating a Stopwatch with HTML, CSS & Javascript

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>Stopwatch</title>
    <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="stopwatch.js"></script>
  </head>
  <body>
    <div id="container">
      <div class="box">
        <div class="timer">
          <h1>
            <span id="hours">00</span>
            :
            <span id="minutes">00</span>
            :
            <span id="seconds">00</span>
            .
            <span id="hundredths">00</span>
          </h1>
        </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: #4eb4e1;
  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: center;
  align-items: center;
  position: relative;
  width: 100%;
  max-width: 360px;
}
.timer {
  width: 100%;
}
.timer h1 {
  margin: 0;
  padding: 0;
  color: #fff;
  font-weight: 500;
  font-size: 3.5rem;
  text-align: center;
}
#hundredths {
  font-size: 2rem;
}
.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: #e2ab1a;
  color: #fff;
  font-size: 1.5rem;
  outline: none;
}
.button:disabled {
  background-color: #ccc;
  cursor: default;
}
@media screen and (max-width: 480px) {
  .box {
    width: 230px;
  }
  .timer h1 {
    font-size: 2.25rem;
  }
  #hundredths {
    font-size: 1.125rem
  }
}

Javascript

var hr = 0;
var min = 0;
var sec = 0;
var c = 0;
var t;

function setTimer() {
  if(c <= 99) {
    c++;
    document.getElementById("hundredths").innerHTML = ("0" + c).slice(-2);
  } else {
    c = 0;
    sec++;
    if(sec <= 59) {
      document.getElementById("seconds").innerHTML = ("0" + sec).slice(-2);
    }
  }
  if(sec <= 59) {
    document.getElementById("minutes").innerHTML = ("0" + min).slice(-2);
  } else {
    sec = 0;
    min++;
    document.getElementById("seconds").innerHTML = ("0" + sec).slice(-2);
    if(min <= 59) {
      document.getElementById("minutes").innerHTML = ("0" + min).slice(-2);
    }
  }
  if(min <= 59) {
    document.getElementById("hours").innerHTML = ("0" + hr).slice(-2);
  } else {
    min = 0;
    hr++;
    document.getElementById("minutes").innerHTML = ("0" + min).slice(-2);
    document.getElementById("hours").innerHTML = ("0" + hr).slice(-2);
  }
}
function start() {
  t = setInterval(setTimer, 10);
  document.getElementById("start").disabled = true;
}
function stop() {
  clearInterval(t);
  document.getElementById("start").disabled = false;
}
function reset() {
  clearInterval(t);
  hr = 0;
  min = 0;
  sec = 0;
  c = 0;
  document.getElementById("hundredths").innerHTML = "00";
  document.getElementById("seconds").innerHTML = "00";
  document.getElementById("minutes").innerHTML = "00";
  document.getElementById("hours").innerHTML = "00";
  document.getElementById("start").disabled = false;
}