<!-- let's creat a timer with js -->

    <div class="container">

      <div class="groub">

        <button disabled="disabled" class="reset">reset timer</button>
        <button class="start">Start timer</button>
        <button disabled="disabled" class="pause">pause timer</button>
      </div>


      <div id="hours"> 0 </div>
      :
      <div id="minutes"> 0 </div>
      :
      <div id="seconds"> 0 </div>
    </div>
*
  padding: 0
  margin: 0
  box-sizing: border-box
  font-family: sans-serif
  text-transform: uppercase

.container
  position: absolute
  height: 100%
  width: 100%
  top: 0
  left: 0
  background: black
  display: flex
  align-items: center
  justify-content: center
  font-family: sans-serif
  font-size: 80px
  color: white
  letter-spacing: 10px

.groub
  position: absolute
  top: 0
  left: 0
  width: 100%
  padding: 30px 30px
  display: flex
  align-items: center
  justify-content: center

button
  position: relative
  width: 200px
  height: 60px
  background: transparent
  font-size: 18px
  letter-spacing: 3px
  color: white
  border: 2px solid white
  cursor: pointer
  transition: 0.4s ease-in-out all
  &:hover
    background: white
    color: black

button[disabled="disabled"]
  color: gray
  border-color: gray
  &:hover
    background: transparent
    cursor: default
View Compiled
var hours = document.getElementById('hours'),
    minutes = document.getElementById('minutes'),
    seconds = document.getElementById('seconds'),
    container = document.querySelector('.container'),
    start = document.querySelector('.start'),
    pause = document.querySelector('.pause'),
    reset = document.querySelector('.reset'),
    count_time = 0;


start.onclick = function(){
  var counter = setInterval(function(){
    count_time++;
    if (count_time > 0) {
      seconds.textContent = count_time;
    }
    if (count_time === 60) {
      count_time = 0;
      minutes.textContent++;
    }
    if (minutes.textContent == 60) {
      minutes.textContent = 0;
      hours.textContent++;
    }
  }, 1000);

  pause.removeAttribute('disabled');
  reset.removeAttribute('disabled');
  start.setAttribute('disabled', 'disabled');

  pause.onclick = function(){
    clearInterval(counter);
    start.removeAttribute('disabled');
    pause.setAttribute('disabled', 'disabled');
  }
  reset.onclick = function(){
    clearInterval(counter);
    count_time = 0;
    seconds.textContent = 0;
    minutes.textContent = 0;
    hours.textContent = 0;
    start.removeAttribute('disabled');
    reset.setAttribute('disabled', 'disabled');
    pause.setAttribute('disabled', 'disabled');
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.