desclock/script.js at main · RamaDachille/desclock · 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
113
114
115
const playBtn = document.querySelector(".play-button");
const restartBtn = document.querySelector(".restart-button");
const lapBtn = document.querySelector(".lap-button");
const playIcon = document.getElementById("play-icon");
const lapIcon = document.getElementById("lap-icon");

const lapsBody = document.querySelector("tbody");
const lapsTable = document.querySelector(".laps");
const stopwatchIcon = document.querySelector(".stopwatch-icon");

let minutes = document.querySelector(".mins");
let secsAndMills = document.querySelector(".blue-text");

// STOPWATCH
let timeCounter = 0;
let stopwatchRunning = false;
let laps = [0];
let intervalId;

const animateIcon = function (animate) {
  if (animate && timeCounter <= 1) {
    stopwatchIcon.classList.add("fa-shake");
    setTimeout(function () {
      stopwatchIcon.classList.remove("fa-shake");
    }, 950);
  }
};

const calcTime = function (unit, time = timeCounter) {
  if (unit === "minutes") return Math.floor(time / 100 / 60);
  if (unit === "seconds") return Math.floor((time / 100) % 60);
  if (unit === "milliseconds") return time % 100;
};

const formatTime = (timeNum) => (timeNum + "").padStart(2, "0");

const startStopwatch = function () {
  if (!stopwatchRunning) {
    animateIcon(true)
    playIcon.classList.remove("fa-play");
    playIcon.classList.add("fa-pause");

    restartBtn.classList.remove("hidden");
    lapBtn.classList.remove("hidden");
    lapsTable.classList.remove("hidden");

    stopwatchRunning = true;
    intervalId = setInterval(() => {
      minutes.textContent = formatTime(calcTime("minutes"));
      secsAndMills.textContent = `${formatTime(
        calcTime("seconds")
      )}.${formatTime(calcTime("milliseconds"))}`;
      timeCounter++;
    }, 10);
  } else {
    clearInterval(intervalId);
    stopwatchRunning = false;

    playIcon.classList.remove("fa-pause");
    playIcon.classList.add("fa-play");
  }
};

const restartStopwatch = function () {
  clearInterval(intervalId);
  timeCounter = 0;
  stopwatchRunning = false;

  playIcon.classList.remove("fa-pause");
  playIcon.classList.add("fa-play");

  minutes.textContent = "00";
  secsAndMills.textContent = `00.00`;

  restartBtn.classList.add("hidden");
  lapBtn.classList.add("hidden");

  laps = [0];
  while (lapsBody.firstChild) lapsBody.removeChild(lapsBody.firstChild);
  lapsTable.classList.add("hidden");
};

const createLap = function () {
  laps.push(timeCounter);

  let curMins = formatTime(calcTime("minutes"));
  let curSecs = formatTime(calcTime("seconds"));
  let curMils = formatTime(calcTime("milliseconds"));
  let lapMin = formatTime(calcTime("minutes", timeCounter - laps.at(-2)));
  let lapSec = formatTime(calcTime("seconds", timeCounter - laps.at(-2)));
  let lapMil = formatTime(calcTime("milliseconds", timeCounter - laps.at(-2)));

  if (timeCounter !== laps.at(-2)) {
    lapsBody.insertAdjacentHTML(
      "afterbegin",
      `<tr>
      <td>${formatTime(laps.length)}</td>
      <td>+ ${lapMin}:${lapSec}.${lapMil}</td>
      <td>${curMins}:${curSecs}.${curMils}</td>
    </tr>`
    );
  }
  lapIcon.classList.remove("fa-regular");
  lapIcon.classList.add("fa-solid");

  setTimeout(function () {
    lapIcon.classList.remove("fa-solid");
    lapIcon.classList.add("fa-regular");
  }, 90);
};

// EVENTS
playBtn.addEventListener("click", startStopwatch);
restartBtn.addEventListener("click", restartStopwatch);
lapBtn.addEventListener("click", createLap);