Shuvkant
diff --git a/‎projects/simple-stopwatch/index.html
-16 b/‎projects/simple-stopwatch/index.html
-16
diff --git a/‎projects/simple-stopwatch/stopwatch.js
-78 b/‎projects/simple-stopwatch/stopwatch.js
-78
diff --git a/‎projects/stopwatch/index.html
+20 b/‎projects/stopwatch/index.html
+20
diff --git a/‎projects/stopwatch/index.js
+54 b/‎projects/stopwatch/index.js
+54
diff --git a/‎projects/simple-stopwatch/style.css renamed to ‎projects/stopwatch/style.css
+5-21 b/‎projects/simple-stopwatch/style.css renamed to ‎projects/stopwatch/style.css
+5-21
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stopwatch</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div id="timer">00:00:00</div>
+    <div id="buttons">
+        <button id="start">Start</button>
+        <button id="stop">Stop</button>
+        <button id="reset">Reset</button>
+    </div>
+    <script src="index.js"></script>
+</body>
+</html>
@@ -0,0 +1,54 @@
+const timerEl = document.getElementById("timer");
+const startButtonEl = document.getElementById("start");
+const stopButtonEl = document.getElementById("stop");
+const resetButtonEl = document.getElementById("reset");
+
+let startTime = 0;
+let elapsedTime = 0;
+let timerInterval;
+
+function startTimer() {
+  startTime = Date.now() - elapsedTime;
+
+  timerInterval = setInterval(() => {
+    elapsedTime = Date.now() - startTime;
+    timerEl.textContent = formatTime(elapsedTime);
+  }, 10);
+
+  startButtonEl.disabled = true;
+  stopButtonEl.disabled = false;
+}
+
+function formatTime(elapsedTime) {
+  const milliseconds = Math.floor((elapsedTime % 1000) / 10);
+  const seconds = Math.floor((elapsedTime % (1000 * 60)) / 1000);
+  const minutes = Math.floor((elapsedTime % (1000 * 60 * 60)) / (1000 * 60));
+  const hours = Math.floor(elapsedTime / (1000 * 60 * 60));
+  return (
+    (hours ? (hours > 9 ? hours : "0" + hours) : "00") +
+    ":" +
+    (minutes ? (minutes > 9 ? minutes : "0" + minutes) : "00") +
+    ":" +
+    (seconds ? (seconds > 9 ? seconds : "0" + seconds) : "00") +
+    "." +
+    (milliseconds > 9 ? milliseconds : "0" + milliseconds)
+  );
+}
+function stopTimer() {
+  clearInterval(timerInterval);
+  startButtonEl.disabled = false;
+  stopButtonEl.disabled = true;
+}
+function resetTimer() {
+  clearInterval(timerInterval);
+
+  elapsedTime = 0;
+  timerEl.textContent = "00:00:00";
+
+  startButtonEl.disabled = false;
+  stopButtonEl.disabled = true;
+}
+
+startButtonEl.addEventListener("click", startTimer);
+stopButtonEl.addEventListener("click", stopTimer);
+resetButtonEl.addEventListener("click", resetTimer);
@@ -4,17 +4,16 @@ body {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  align-items: center;
-  height: 100vh;
+  min-height: 100vh;
   overflow: hidden;
+  align-items: center;
 }
 
 #timer {
   font-size: 7rem;
   font-weight: 700;
-  color: #f92672;
   text-shadow: 2px 2px #f8a5c2;
-  /* In the current code, the value 2px 2px #f8a5c2 sets a shadow that is 2 pixels to the right and 2 pixels down of the text, with a blur radius of 0 (no blur), and a color of #f8a5c2. */
+  color: #f92672;
   width: 600px;
   text-align: center;
   margin: 40px auto;
@@ -29,34 +28,26 @@ button {
   background-color: #f92672;
   color: white;
   border: none;
-  border-radius: 30px;
   font-size: 2rem;
   font-weight: bold;
   padding: 1.5rem 4rem;
-  /* In the current code, the value 1.5rem 4rem sets a padding of 1.5rem (24px) for the top and bottom sides of the buttons, and 4rem (64px) for the left and right sides of the buttons. */
   margin: 1rem;
+  border-radius: 30px;
   cursor: pointer;
-  transition: background-color 0.2s;
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.3);
+  transition: all 0.2s;
 }
 
 button:hover {
   background-color: #f44583;
   box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
 }
 
-button:active {
-  background-color: #f34282;
-  box-shadow: none;
-}
-
 button[disabled] {
   opacity: 0.5;
   cursor: default;
 }
 
-/* add media query */
-
 @media (max-width: 800px) {
   #timer {
     font-size: 4rem;
@@ -67,11 +58,4 @@ button[disabled] {
     font-size: 1.5rem;
     padding: 1rem 2rem;
   }
-
 }
-
-
-
-
-/* add media query for tablet size */
-