I was needing a simple JavaScript count-up timer with play, stop and reset buttons.

After searching the internet, I borrowed a couple of ideas from the scripts I found online and came up with the following count-up timer:

The count-up timer uses the setInterval() method to update the timer once the start button is clicked

This is the HTML:

<div class="timer-container">
  <div class="timer-buttons">
    <span id="start">START</span>
    <span id="stop">STOP</span>
    <span id="reset">RESET</span>
  </div>
  <span id="counter">00:00</span>
</div>

Here's the JavaScript:

<script>
// add a leading zero if number is < 10
function padDigit(i) {
  if (i < 10) {
    i = "0" + i;
  };
  return i;
};

var start = document.getElementById("start");
var stop = document.getElementById("stop");
var reset = document.getElementById("reset");
var timer_counter = document.getElementById("counter");

var counter = 0;

start.addEventListener("click", function() {
  myTimer = setInterval(function() {
    // get minutes
    var m = Math.floor(counter/60);
    // get seconds
    var s = counter - (m*60);
    // add a leading zero if it's single digit
    m = padDigit(m);
    // add a leading zero if it's single digit
    s = padDigit(s);
    // update the element where the timer will appear
    timer_counter.innerHTML = m + ":" + s;
    // add 1 to counter
    counter++;
  }, 1000);

  // hide start button
  start.style.display = "none";
  
  // show stop button
  stop.style.display = "inline-block";
});

stop.addEventListener("click", function() {
  // stop counter
  clearInterval(myTimer);
  // hide stop button
  stop.style.display = "none";
  // show start button
  start.style.display = "inline-block";
});

reset.addEventListener("click", function() {
  // reset counter on page
  timer_counter.innerHTML = "00:00";
  // reset counter variable
  counter = 1;
});
</script>

This is the CSS:

.timer-container {
  width: 130px;
  text-align: center;
  padding: 10px;
  border-radius: 4px;
  background-color: #000;
}
#start, #stop, #reset {
  color: #FFF;
  width: 54px;
  box-sizing: border-box;
  text-align: center;
  border-radius: 2px;
  font-size: 11px;
  font-weight: bold;
  padding: 6px 8px 5px;
  cursor: default;
}
#start {
  background-color: #1a73e8;
  display: inline-block;
}
#stop {
  background-color: #f42929;
  display: none;
}
#reset {
  background-color: #737070;
  display: inline-block;
}
#counter {
  font-size: 29px;
  color: #FFF;
}