+
+
+
+
diff --git a/stopwatch/stopwatch-SGS/prompt.md b/stopwatch/stopwatch-SGS/prompt.md
new file mode 100644
index 0000000..99e8dac
--- /dev/null
+++ 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!
\ No newline at end of file
diff --git a/stopwatch/stopwatch-SGS/script.js b/stopwatch/stopwatch-SGS/script.js
new file mode 100644
index 0000000..a2a591c
--- /dev/null
+++ 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');
+});