diff --git a/examples/Stopwatch-app/index.html b/examples/Stopwatch-app/index.html new file mode 100644 index 00000000..91ddd665 --- /dev/null +++ b/examples/Stopwatch-app/index.html @@ -0,0 +1,21 @@ + + + + + + Stopwatch + + + +
+
00:00:00
+
+ + + +
+
+ + + + \ No newline at end of file diff --git a/examples/Stopwatch-app/script.js b/examples/Stopwatch-app/script.js new file mode 100644 index 00000000..213b21bf --- /dev/null +++ b/examples/Stopwatch-app/script.js @@ -0,0 +1,54 @@ +const display = document.getElementById("display"); +const startBtn = document.getElementById("startBtn"); +const stopBtn = document.getElementById("stopBtn"); +const resetBtn = document.getElementById("resetBtn"); + +let startTime; +let elapsedTime = 0; +let timerInterval; +let running = false; + +function start() { + if (!running) { + startTime = Date.now() - elapsedTime; + timerInterval = setInterval(updateTime, 10); + running = true; + } +} + +function stop() { + if (running) { + clearInterval(timerInterval); + elapsedTime = Date.now() - startTime; + running = false; + } +} + +function reset() { + clearInterval(timerInterval); + elapsedTime = 0; + display.textContent = "00:00:00"; + running = false; +} + +function updateTime() { + const currentTime = Date.now(); + const currentElapsedTime = currentTime - startTime; + + let minutes = Math.floor(currentElapsedTime / (1000 * 60)); + let seconds = Math.floor((currentElapsedTime % (1000 * 60)) / 1000); + let milliseconds = Math.floor((currentElapsedTime % 1000) / 10); + + display.textContent = `${pad(minutes)}:${pad(seconds)}:${pad( + milliseconds + )}`; +} + +function pad(number) { + // Add a leading zero if the number is less than 10 + return number < 10 ? "0" + number : number; +} + +startBtn.addEventListener("click", start); +stopBtn.addEventListener("click", stop); +resetBtn.addEventListener("click", reset); diff --git a/examples/Stopwatch-app/styles.css b/examples/Stopwatch-app/styles.css new file mode 100644 index 00000000..67f89c85 --- /dev/null +++ b/examples/Stopwatch-app/styles.css @@ -0,0 +1,51 @@ +body { + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; + background-color: #f0f0f0; + font-family: 'Arial', sans-serif; +} + +.stopwatch { + text-align: center; + background-color: white; + padding: 40px; + border-radius: 15px; + box-shadow: 0 10px 20px rgba(0,0,0,0.1); + width: 90%; + max-width: 400px; +} + +#display { + font-size: 3.5rem; + font-weight: bold; + margin-bottom: 20px; + color: #333; + font-family: 'Courier New', Courier, monospace; +} + +.buttons { + display: flex; + justify-content: center; + gap: 15px; +} + +.buttons button { + font-size: 1.2rem; + padding: 10px 20px; + border: none; + border-radius: 8px; + cursor: pointer; + transition: background-color 0.3s, transform 0.1s; + color: white; +} + +#startBtn { background-color: #28a745; } +#stopBtn { background-color: #dc3545; } +#resetBtn { background-color: #007bff; } + +.buttons button:hover { + opacity: 0.9; +}