feat: stopwatch-solved - Jorge Luis Sánchez Ocampo

LIDR-academy · IamJorx · Oct 21, 2024 · Oct 21, 2024 · dda92b06c96b98e7bf48f6bc9a4e1f41174d9d37
commit dda92b06c96b98e7bf48f6bc9a4e1f41174d9d37
diff --git a/stopwatch/stopwatch-JLSO/index.html b/stopwatch/stopwatch-JLSO/index.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stopwatch</title>
+    <style>
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            background-color: #181818;
+            color: #fff;
+        }
+
+        .container {
+            display: grid;
+            gap: 20px;
+            justify-items: center;
+            padding: 20px;
+            background: #202020;
+            border-radius: 20px;
+            box-shadow: 10px 10px 20px #121212, -10px -10px 20px #2a2a2a;
+        }
+
+        #display {
+            font-size: 2rem;
+            padding: 20px;
+            background: #1c1c1c;
+            border-radius: 10px;
+            box-shadow: inset 5px 5px 10px #101010, inset -5px -5px 10px #282828;
+            width: 300px;
+            text-align: center;
+        }
+
+        button {
+            padding: 10px 20px;
+            border: none;
+            border-radius: 10px;
+            background: #1c1c1c;
+            color: #fff;
+            cursor: pointer;
+            font-size: 1rem;
+            width: 120px;
+            box-shadow: 5px 5px 10px #101010, -5px -5px 10px #282828;
+        }
+
+        button:hover {
+            background: #333;
+        }
+
+        button.start {
+            background-color: #4caf50;
+            color: white;
+        }
+
+        button.stop {
+            background-color: #ff5722;
+            color: white;
+        }
+
+        button.reset {
+            background-color: #f44336;
+            color: white;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <div id="display">00:00:00.000</div>
+        <button class="start" id="startStopBtn">Start</button>
+        <button class="reset" id="resetBtn">Reset</button>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/stopwatch/stopwatch-JLSO/prompts.md b/stopwatch/stopwatch-JLSO/prompts.md
@@ -0,0 +1,21 @@
+# stopwatch project
+I am planning to do a simple stopwatch project
+
+# output
+Two files: index.html and script.js (styles must be inside index.html file)
+
+# style
+You must to use modern design standards like vento grid, minimalism design and neumorphism
+
+# functionalities
+The stopwatch must to have this functionalities: 
+    1. A counter where i can visualize the updated value (must have hours, minutes, seconds and milliseconds)
+    2. A button to start the stopwatch
+    3. A button to stop the count
+    4. If the stopwatch already started and i press the stop button, this button has to change the functionality to allow resume the counter
+    5. A button to reset the stopwatch
+
+# Extra especifications
+1. The buttons must to have differents styles faclitating the diferenciation of each action.
+2. Add some styles for the buttons and the action of start/reset the stopwatch
+3. Make the project have a black theme
diff --git a/stopwatch/stopwatch-JLSO/script.js b/stopwatch/stopwatch-JLSO/script.js
@@ -0,0 +1,60 @@
+let timer;
+let running = false;
+let startTime = 0;
+let elapsedTime = 0;
+
+const display = document.getElementById('display');
+const startStopBtn = document.getElementById('startStopBtn');
+const resetBtn = document.getElementById('resetBtn');
+
+startStopBtn.addEventListener('click', () => {
+    if (!running) {
+        startStopBtn.textContent = 'Stop';
+        startStopBtn.classList.remove('start');
+        startStopBtn.classList.add('stop');
+        startTimer();
+    } else {
+        startStopBtn.textContent = 'Resume';
+        startStopBtn.classList.remove('stop');
+        startStopBtn.classList.add('start');
+        stopTimer();
+    }
+});
+
+resetBtn.addEventListener('click', () => {
+    resetTimer();
+    startStopBtn.textContent = 'Start';
+    startStopBtn.classList.remove('stop');
+    startStopBtn.classList.add('start');
+});
+
+function startTimer() {
+    running = true;
+    startTime = Date.now() - elapsedTime;
+    timer = setInterval(updateTime, 10);
+}
+
+function stopTimer() {
+    running = false;
+    clearInterval(timer);
+    elapsedTime = Date.now() - startTime;
+}
+
+function resetTimer() {
+    clearInterval(timer);
+    running = false;
+    elapsedTime = 0;
+    display.textContent = '00:00:00.000';
+}
+
+function updateTime() {
+    elapsedTime = Date.now() - startTime;
+    const time = new Date(elapsedTime);
+
+    const hours = String(time.getUTCHours()).padStart(2, '0');
+    const minutes = String(time.getUTCMinutes()).padStart(2, '0');
+    const seconds = String(time.getUTCSeconds()).padStart(2, '0');
+    const milliseconds = String(time.getUTCMilliseconds()).padStart(3, '0');
+
+    display.textContent = `${hours}:${minutes}:${seconds}.${milliseconds}`;
+}