update global css, add countdown and timer

timer/index.js

@@ -0,0 +1,54 @@
+const time = document.getElementById('time');
+const start = document.getElementById('start');
+const reset = document.getElementById('reset');
+const lap = document.getElementById('lap');
+const lapList = document.getElementById('lap-list');
+
+let isActive = false;
+let timer = null;
+let startTime = null;
+let elapsedTime = 0;
+
+function formatTime(duration) {
+    const milliseconds = Math.floor((duration % 1000) / 10);
+    const seconds = Math.floor((duration / 1000) % 60);
+    const minutes = Math.floor((duration / 1000) / 60);
+    const hours = Math.floor((duration / 1000) / 60 / 60);
+    return `
+    ${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}:${String(milliseconds).padStart(2, '0')}`;
+}
+
+start.addEventListener('click', () => {
+    if (! isActive) {
+        isActive = true;
+        start.innerHTML = "Stop";
+        startTime = Date.now() - elapsedTime;
+        timer = setInterval(() => {
+            elapsedTime = Date.now() - startTime;
+            time.textContent = formatTime(elapsedTime);
+        }, 10);
+    } else {
+        isActive = false;
+        clearInterval(timer);
+        start.innerHTML = "Start";
+    }
+});
+
+reset.addEventListener('click', () => {
+    isActive = false;
+    clearInterval(timer);
+    timer = null;
+    startTime = null;
+    elapsedTime = 0;
+    time.textContent = "00:00:00:00";
+    start.innerHTML = "Start";
+    lapList.innerHTML = "";
+});
+
+lap.addEventListener('click', () => {
+    if (isActive) {
+        const lapTime = document.createElement('li');
+        lapTime.textContent = formatTime(elapsedTime);
+        lapList.appendChild(lapTime);
+    }
+});