OOP-Refector-Solution.js

class StopWatch {
  constructor() {
    this.seconds = 0
    this.timerId = null
    this.startButton = document.getElementById("start")
    this.pauseButton = document.getElementById("pause")
    this.resetButton = document.getElementById("reset")
    this.h1          = document.getElementsByTagName("h1")[0]
    this.addEventListeners()
  }

  addEventListeners() {
    this.startButton.addEventListener("click", () => { this.start(this) })
    this.pauseButton.addEventListener("click", () => { this.pause(this) })
    this.resetButton.addEventListener("click", () => { this.reset(this) })
  }

  start(context) {
    if(!context.timerId){
      context.timerId = setInterval(() => {
        context.h1.innerHTML = "Time Elapsed: " + Math.round(context.seconds * 100) / 100 
        context.seconds = context.seconds += 0.01
      }, 10)
    }
  }

  pause(context) {
    context.timerId = clearInterval(context.timerId);
  }

  reset(context) {
    context.timerId = clearInterval(context.timerId)
    context.h1.innerHTML = "Stop Watch"
    context.seconds = 0
  }
}

let stopWatch = new StopWatch();