LIDR-academy · sgomezsosa · Oct 21, 2024
diff --git a/stopwatch/stopwatch-SGS/index.html b/stopwatch/stopwatch-SGS/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stopwatch App</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="flex justify-center items-center min-h-screen bg-gray-100">
+<div class="text-center">
+    <!-- Stopwatch Display -->
+    <div id="display" class="text-6xl bg-blue-100 text-black font-mono border-4 border-black rounded-lg py-4 px-12 mb-8">
+        00:00:00
+    </div>
+
+    <!-- Buttons -->
+    <div class="flex justify-center space-x-6">
+        <button id="startPause" class="bg-green-500 text-white text-2xl py-3 px-8 rounded-lg focus:outline-none hover:bg-green-600">
+            Start
+        </button>
+        <button id="clear" class="bg-red-500 text-white text-2xl py-3 px-8 rounded-lg focus:outline-none hover:bg-red-600">
+            Clear
+        </button>
+    </div>
+</div>
+
+<script src="script.js"></script>
+</body>
+</html>
diff --git a/stopwatch/stopwatch-SGS/prompt.md b/stopwatch/stopwatch-SGS/prompt.md
@@ -0,0 +1,46 @@
+# Prompt 1
+
+You're a Senior Frontend Developer. Using the previous image as a reference, create a stopWatch app with the functionalities described below:
+
+1. The initial value will be 00:00:00, and it will have two buttons Start and Clear as shown in the reference image.
+2. When pressing the Start button, the clock will start running, and the Start button now changes to Pause.
+3. Once the clock starts, the user can pause it by pressing the Pause button. If it gets pressed the button will change to Continue and will have light blue colour.
+3. If the Continue button gets pressed,  the clock will keep running from its previous value and will change its text to Pause and will be shown in green colour once again.
+4. If the Clear button gets pressed, the clock will restart to its initial value.
+
+Use tailwind library for page styles.
+
+Ask me if you have any doubt with the prompt whatever if there is missing information or because it isn't clear.
+
+# ChatGPT
+
+Got it! I understand the requirements, and here's how I would build the stopwatch app using Tailwind CSS for styling. Below is the code broken down into HTML, Tailwind CSS, and JavaScript.
+
+### HTML (Structure)
+We will use Tailwind classes to style the buttons and the display based on the reference image.
+
+### Tailwind CSS (Already included in the HTML)
+The styling is done using Tailwind CSS classes directly in the HTML file, making the stopwatch layout responsive and easy to modify.
+
+####
+- **Display:** The clock display is styled with a light blue background (bg-blue-100), black text, and a rounded border to match the reference image.
+- **Buttons:** The Start and Clear buttons are styled with Tailwind classes for colors, sizes, and hover effects.
+
+### JavaScript (Functionality)
+This part handles the stopwatch logic. It starts, pauses, continues, and clears the timer as per your requirements.
+
+### Key Features:
+####
+1. **Initial Value:** The stopwatch initially displays 00:00:00 (hours, minutes, seconds).
+2. **Start/Pause Button:**
+- When clicked, the button text changes to "Pause" and the stopwatch starts.
+- If paused, the button changes to "Continue" with a light blue color (bg-blue-400).
+3. **Continue Functionality:** Clicking "Continue" resumes the stopwatch from where it left off.
+4. **Clear Button:** Clicking "Clear" resets the stopwatch to 00:00:00 and changes the button text back to "Start."
+
+### Styling with Tailwind CSS:
+- The **Start/Pause** button switches between green (Start/Pause state) and blue (Continue state).
+- The **Clear button** remains red, resetting the timer as specified.
+- The layout is responsive and centered on the page.
+
+This should give you the stopwatch app you're aiming for. Let me know if any details need to be adjusted or clarified!
diff --git a/stopwatch/stopwatch-SGS/script.js b/stopwatch/stopwatch-SGS/script.js
@@ -0,0 +1,47 @@
+let timerInterval;
+let timeElapsed = 0; // In seconds
+let paused = true;
+
+const display = document.getElementById('display');
+const startPauseButton = document.getElementById('startPause');
+const clearButton = document.getElementById('clear');
+
+// Function to format time as HH:MM:SS
+function formatTime(seconds) {
+    const hours = Math.floor(seconds / 3600).toString().padStart(2, '0');
+    const minutes = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
+    const secs = (seconds % 60).toString().padStart(2, '0');
+    return `${hours}:${minutes}:${secs}`;
+}
+
+// Start or pause the stopwatch
+startPauseButton.addEventListener('click', function () {
+    if (paused) {
+        paused = false;
+        startPauseButton.textContent = 'Pause';
+        startPauseButton.classList.remove('bg-blue-400');
+        startPauseButton.classList.add('bg-green-500', 'hover:bg-green-600');
+
+        timerInterval = setInterval(function () {
+            timeElapsed++;
+            display.textContent = formatTime(timeElapsed);
+        }, 1000); // Increment every second
+    } else {
+        paused = true;
+        clearInterval(timerInterval);
+        startPauseButton.textContent = 'Continue';
+        startPauseButton.classList.remove('bg-green-500', 'hover:bg-green-600');
+        startPauseButton.classList.add('bg-blue-400', 'hover:bg-blue-500');
+    }
+});
+
+// Clear the stopwatch
+clearButton.addEventListener('click', function () {
+    paused = true;
+    clearInterval(timerInterval);
+    timeElapsed = 0;
+    display.textContent = '00:00:00';
+    startPauseButton.textContent = 'Start';
+    startPauseButton.classList.remove('bg-blue-400');
+    startPauseButton.classList.add('bg-green-500', 'hover:bg-green-600');
+});