example timer

example.js

class Store {
  status = ""
  cycleCount = 0;
  count = 0;
  constructor(status){
    this.status = status
    this.cycleCount = 3;
    this.count = 1;
  }
  getSatus(){
    return this.status
  }
  setStatus(status){
    this.status = status
  }
  getCycleCount(){
    return this.cycleCount
  }
  setCycleCount(count){
    this.cycleCount = count
  }
  getCount(){
    return this.count
  }
  setCount(count){
    this.count = count
  }
}

const countDownForView = (time, timeInstance) => {
  const remainigTime = (time * 60 *1000) - timeInstance.getElapsedTime() - (Date.now() - timeInstance.getStartTime());
  const restMin = String(Math.floor((remainigTime / 1000 / 60) % 60)).padStart(2, '0');
  const restSec = String(Math.floor((remainigTime / 1000) % 60)).padStart(2, '0');
  return {res: `${restMin}:${restSec}`, remainigTime};
}

const reculcuteRemainingTime = (timeInstance, stateInstance, view, remainigTime) => {
  let id
  if (remainigTime >= 0) {
    id = setTimeout(() => {
      reculcuteRemainingTime(timeInstance)
  }, 100);
  timeInstance.setTimeOutId(id)
} else if (remainigTime < 0 ) {
  clearTimeout(timeInstance.getTimeOutId());
  timeInstance.setStartTime(Date.now())
  timeInstance.setElapsedTime(0);

  if (stateInstance.getCount() === stateInstance.getCycleCount() && stateInstance.getState() === "work") {
    stateInstance.setState("longBreak")
    view.displayState(stateInstance.getSatus());
    reculcuteRemainingTime(timeInstance, stateInstance, view, timeInstance.longBreakTime);
  } else if (stateInstance.getStatus() === "work") {
    stateInstance.setStatus("break")
    // displayState(state);
    view.display(stateInstance.getStatus(), timeInstance.getCount());
    reculcuteRemainingTime(timeInstance, stateInstance, view, timeInstance.ibreakTime);
  } else if (stateInstance.getState() === "break") {
    stateInstance.setStatus("work")
    timeInstance.setCount(timeInstance.getCount() + 1);
    view.display(stateInstance.getStatus(), timeInstance.getCount());
    reculcuteRemainingTime(timeInstance, stateInstance, view, timeInstance.workTime);
  } else if (stateInstance.getState() === "longBreak") {
    stateInstance.setStatus("work")
    timeInstance.setCount(1)
    view.display(stateInstance.getStatus(), timeInstance.getCount());
    reculcuteRemainingTime(timeInstance, stateInstance, view, timeInstance.workTime);
  }
}

class Time {
  remainigTime = null
  restMin = null
  restSec = null
  elapsedTime = null
  startTime = null
  timeOutId = ""
  static workTime = 25
  static breakTime = 5
  static longBreakTime = 30
  constructor(){
    this.startTime = Date.now();
  }
  getTimeOutId(){
    return this.timeOutId
  }
  setTimeOutId(id){
    this.timeOutId = id
  }
  setElapsedTime(time){
    this.elapsedTime = time
  }
  getElapsedTime(){
    return this.elapsedTime
  }
  static getRemainigTime (time, elapsedTime, startTime){
    return (time * 60 *1000) - elapsedTime - (Date.now() - startTime);
  }
  setStartTime(time){
    this.startTime = time
  }
  getStartTime(){
    return this.startTime
  }
  nowTime(){

  }
}

class View {
  timer = null;
  start = null;
  stop = null;
  reset = null;
  timeState = null;
  cycle = null;
  time = null

  constructor(document, time, store){
    this.timer = document.getElementById('timer');
    this.start = document.getElementById('start');
    this.stop = document.getElementById('stop');
    this.reset = document.getElementById('reset');
    this.timeState = document.getElementById('timeState');
    this.cycle = document.getElementById('cycle');
    this.time = time
    this.state = store

    const status = this.state.getSatus()
    const count = this.state.getCount()
    this.displayState(status, count)
    this.displayTime(Time.workTime)
    this.setButtonState(false, true, true)

    this.start.addEventListener('click', () => {
      this.setButtonState(true, false, true);
      this.time.setStartTime(Date.now())
      const status = this.state.getSatus()
      switch (status) {
        case "work":
        const {res: res1, remainigTime} = countDownForView(Time.workTime, this.time, this);
        this.displayTimeCountDown(res1)
        reculcuteRemainingTime(this.time, this.state, this, remainigTime)
          break;
        case "break":
        const {res: res2, remainigTime} = countDownForView(Time.breakTime, this.time, this);
        this.displayTimeCountDown(res2)
          break;
        case "longBreak":
        const {res: re3, remainigTime} = countDownForView(Time.longBreakTime, this.time, this, );
        this.displayTimeCountDown(re3)
          break;
        default:
          new Error("no status")
      }
    });

    this.stop.addEventListener('click', () => {
      this.setButtonState(false, true, false);
      clearTimeout(this.time.getTimeOutId());
      this.time.setElapsedTime(Date.now() - this.time.getStartTime());
    });

    this.reset.addEventListener('click', () => {
      this.setButtonState(false, true, true);
      const status = this.state.getSatus()
      switch (status) {
        case "work": this.displayTime(Time.workTime);
          break;
        case "break": this.displayTime(Time.breakTime);
          break;
        case "longBreak": this.displayTime(Time.longBreakTime);
          break;
      }
      this.time.setElapsedTime(0)
    })
  }
  displayState(status, count){
    if(status === "work"){
      this.cycle.textContent = `${count}/${this.state.getCycleCount()}`;
    }
  }
  setButtonState(isStart, isStop, isReset){
    this.start.disabled = isStart
    this.stop.disabled = isStop
    this.reset.disabled = isReset
  }
  displayCountDown(time){
    const remainigTime = (time * 60 *1000) - new Time().elapsedTime - (Date.now() - startTime);
    const restMin = String(Math.floor((remainigTime / 1000 / 60) % 60)).padStart(2, '0');
    const restSec = String(Math.floor((remainigTime / 1000) % 60)).padStart(2, '0');
    this.timer.textContent = `${restMin}:${restSec}`;
  }
  displayTime(time) {
    this.timer.textContent = `${String(time).padStart(2, '0')}:00`;
  }
  displayTimeCountDown(time) {
    this.timer.textContent = time
  }
}

function init(){
  new View(window.document, new Time(), new Store("work"))
}

init()