lab-javascript-chronometer/javascript/index.js at ec1a8e4773eced5ee3e0034fc10f68b63cc2d092 · ironhack-labs/lab-javascript-chronometer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
const chronometer = new Chronometer();

// get the buttons:
const btnLeftElement = document.getElementById('btnLeft');
const btnRightElement = document.getElementById('btnRight');

// get the DOM elements that will serve us to display the time:
const minDecElement = document.getElementById('minDec');
const minUniElement = document.getElementById('minUni');
const secDecElement = document.getElementById('secDec');
const secUniElement = document.getElementById('secUni');
// const milDecElement = document.getElementById('milDec');
// const milUniElement = document.getElementById('milUni');
const splitsElement = document.getElementById('splits');

function printTime()
{
  printMinutes();
  printSeconds();
}

function printMinutes()
{
  const minutes = chronometer.computeTwoDigitNumber(chronometer.getMinutes());
  minDecElement.textContent = minutes[0];
  minUniElement.textContent = minutes[1];
}

function printSeconds()
{
  const seconds = chronometer.computeTwoDigitNumber(chronometer.getSeconds());
  secDecElement.textContent = seconds[0];
  secUniElement.textContent = seconds[1];
}

// ==> BONUS
function printMilliseconds()
{
  const miliSeconds = chronometer.computeTwoDigitNumber(chronometer.getmiliSeconds());
    milDecElement.textContent = miliSeconds[0];
    milUniElement.textContent = miliSeconds[1];
}

function printSplit()
{
  const splitTime = chronometer.split();
  const newLi = document.createElement('li');
  newLi.textContent = splitTime;
  splitsElement.appendChild(newLi);
}

function clearSplits()
{
  splitsElement.innerHTML = '';
}

function setStopBtn()
{
  btnLeftElement.textContent = 'STOP';
  btnLeftElement.className = 'btn stop';
}

function setSplitBtn()
{
  btnRightElement.textContent = 'SPLIT';
  btnRightElement.className = 'btn split';
}

function setStartBtn()
{
  btnLeftElement.textContent = 'START';
  btnLeftElement.className = 'btn start';
}

function setResetBtn()
{
  btnRightElement.textContent = 'RESET';
  btnRightElement.className = 'btn reset';

  document.getElementById("minDec").textContent = '0';
  document.getElementById("minUni").textContent = '0';
  document.getElementById("secDec").textContent = '0';
  document.getElementById("secUni").textContent = '0';
  // document.getElementById("milDec").textContent = '0';
  // document.getElementById("milUni").textContent = '0';
}

// Start/Stop Button
btnLeftElement.addEventListener('click', () =>
{
  if (btnLeftElement.classList.contains('start')) {
    chronometer.start(printTime);
    setStopBtn();
    setSplitBtn();
  } else {
    chronometer.stop();
    setStartBtn();
    setResetBtn();
  }
});

// Reset/Split Button
btnRightElement.addEventListener('click', () =>
{
  if (btnRightElement.classList.contains('reset')) {
    chronometer.reset();
    setResetBtn();
    clearSplits();
  } else {
    printSplit();
  }
});