174-lab-chronometer-bonus-iteration-solution.js

// main.js

const chronometer = new Chronometer();

const btnLeft = document.getElementById('btn-left');
const btnRight = document.getElementById('btn-right');

const minDec = document.getElementById('min-dec');
const minUni = document.getElementById('min-uni');
const secDec = document.getElementById('sec-dec');
const secUni = document.getElementById('sec-uni');
const milDec = document.getElementById('mil-dec');
const milUni = document.getElementById('mil-uni');

const splits = document.getElementById('splits');

function printTime(chronometer) {
  const minutes = chronometer.getMinutes();
  const seconds = chronometer.getSeconds();
  const milliseconds = chronometer.getMilliseconds();
  printMinutes(minutes);
  printSeconds(seconds);
  printMilliseconds(milliseconds);
  // console.log(milliseconds);
}

function printMinutes(minutes) {
  const value = chronometer.twoDigitsNumber(minutes).split('');
  minUni.innerText = value[1];
  minDec.innerText = value[0];
}

function printSeconds(seconds) {
  const value = chronometer.twoDigitsNumber(seconds).split('');
  secUni.innerText = value[1];
  secDec.innerText = value[0];
}

function printMilliseconds(milliseconds) {
  const value = chronometer.twoDigitsNumber(milliseconds).split('');
  milUni.innerText = value[1];
  milDec.innerText = value[0];
}

function printSplit(chronometer) {
  const minutes = chronometer.getMinutes();
  const seconds = chronometer.getSeconds();
  const milliseconds = chronometer.getMilliseconds();

  const twoDigitMinutes = chronometer.twoDigitsNumber(minutes);
  const twoDigitSeconds = chronometer.twoDigitsNumber(seconds);
  const twoDigitMilliseconds = chronometer.twoDigitsNumber(milliseconds);

  const text = `${twoDigitMinutes}:${twoDigitSeconds}:${twoDigitMilliseconds}`;
  splits.innerHTML += `<li>${text}</li>`;
}

function clearSplits() {}

function setStopBtn() {}

function setSplitBtn() {}

function setStartBtn() {}

function setResetBtn() {}

// Start/Stop Button
btnLeft.addEventListener('click', () => {
  const isRunning = typeof chronometer.intervalId !== 'undefined';
  if (isRunning) {
    btnLeft.innerText = 'START';
    btnLeft.className = 'btn start';
    btnRight.innerText = 'RESET';
    btnRight.className = 'btn reset';
    chronometer.stopClick();
  } else {
    btnLeft.innerText = 'STOP';
    btnLeft.className = 'btn stop';
    btnRight.innerText = 'SPLIT';
    btnRight.className = 'btn split';
    chronometer.startClick();
  }
});

// Reset/Split Button
btnRight.addEventListener('click', () => {
  const isRunning = typeof chronometer.intervalId !== 'undefined';
  if (isRunning) {
    printSplit(chronometer);
  } else {
    chronometer.resetClick();
  }
});


// chronometer.js

class Chronometer {
  constructor() {
    this.startTime = 0;
    this.intervalId;
  }

  startClick() {
    this.startTime = Date.now();
    this.intervalId = setInterval(() => {
      // this.currentTime++;
      printTime(this);
    }, 1000 / 60);
  }

  getTime() {
    const currentTime = Date.now();
    const timeElapsedSinceStart = currentTime - this.startTime;
    return timeElapsedSinceStart;
  }

  getMinutes() {
    const milliseconds = this.getTime();
    return Math.floor(milliseconds / 1000 / 60) % 60;
  }

  getSeconds() {
    const milliseconds = this.getTime();
    return Math.floor(milliseconds / 1000) % 60;
  }

  getMilliseconds() {
    const milliseconds = this.getTime();
    return Math.floor(milliseconds / 10) % 100;
  }

  twoDigitsNumber(number) {
    return number < 10 ? '0' + number : number.toString();
  }

  stopClick() {
    clearInterval(this.intervalId);
    delete this.intervalId;
  }

  resetClick() {
    delete this.currentTime;
    printTime(this);
  }

  // splitClick() {
  // ..
  // }
}