<div class="container">
  <h1>100</h1>
  <button class="start">Start Timer</button>
  <button class="stop">Stop Timer</button>
  <button class="reset">Reset Timer</button>
</div>

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

body {
  margin: 20px;
  font-family: 'Khand';
  font-size: 1.2em;
}

h1 {
  font-size: 5rem;
}

div.container {
  width: 420px;
  text-align: center;
  margin: 20px auto;
}

button {
  background: lightgrey;
  color: black;
  font-weight: bold;
  border: 1px solid black;
  padding: 0.5rem 1rem;
  font-family: 'Khand';
  font-size: 125%;
  cursor: pointer;
}

button:hover {
  background: yellowgreen;
}

const heading = document.querySelector("h1");
const start_btn = document.querySelector("button.start");
const stop_btn = document.querySelector("button.stop");
const reset_btn = document.querySelector("button.reset");

let timer_duration = 100;
let timer_interval_id;

start_btn.addEventListener('click', function() {
  timer_interval_id = setInterval(function(){
    timer_duration -= 1;
    
    heading.innerText = timer_duration;
  }, 1000);
});

stop_btn.addEventListener('click', function() {
  clearInterval(timer_interval_id);
});

reset_btn.addEventListener('click', function() {
  timer_duration = 100;
  heading.innerText = timer_duration;
});