<span id='hours'>00</span>
:
<span id='minutes'>00</span>
:
<span id='seconds'>00</span>
<p>
  Press 'Space' to pause/unpause
</p>

span {
  display: inline-block;
  width: 1.5em;
  text-align: center;
}

const makeTimer = (hr, min, sec) => {
  let startTime;
  let pauseTime;
  let state = 'stop';
  let interval = null;
  
  const timer = () => {
    const secs = Math.round((Date.now() - startTime) / 1000);
    sec.innerText = String(secs % 60).padStart(2, '0');
    min.innerText = String(Math.floor(secs / 60) % 60).padStart(2, '0');
    hr.innerText = String(Math.floor(secs / 3600)).padStart(2, '0');
  }
  
  return {
    start: () => {
      if (state !== 'stop') {
        return;
      }
      startTime = Date.now();
      interval = setInterval(timer, 500);
      state = 'run';
    },
    
    stop: () => {
      if (state !== 'run') {
        return;
      }
      clearInterval(interval);
      interval = null;
      state = 'stop';
    },
    
    togglePause: () => {
      switch (state) {
        case 'run':
          pauseTime = Date.now();
          clearInterval(interval);
          interval = null;
          state = 'pause';
          break;
        case 'pause':
          startTime += Date.now() - pauseTime;
          interval = setInterval(timer, 500);
          state = 'run';
          break;
        default:
      }
    },

    getState: () => { 
      return state;
    }
  };
};

const myTimer = makeTimer(
  document.querySelector('#hours'),
  document.querySelector('#minutes'),
  document.querySelector('#seconds'),
);

const toggler = (timer) => {
  return (e) => {
    console.log(e); 
    if (e.key === ' ') {
      timer.togglePause();
    }
  }
}

document.addEventListener('keyup', toggler(myTimer));
myTimer.start();