174-lab-chronometer-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();
  printMinutes(minutes);
  printSeconds(seconds);
}

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

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

function printMilliseconds() {}

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

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

  const text = `${twoDigitMinutes}:${twoDigitSeconds}`;
  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.currentTime = 0;
    this.intervalId;
  }

  startClick() {
    this.intervalId = setInterval(() => {
      this.currentTime++;
      printTime(this);
    }, 1000);
  }

  getMinutes() {
    return Math.floor(this.currentTime / 60);
  }

  getSeconds() {
    return this.currentTime % 60;
  }

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

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

  resetClick() {
    this.currentTime = 0;
    printTime(this);
  }

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