Merge pull request #32 from tajulafreen/Stop_Watch

tajulafreen · web-flow · commit a2f4669c8c15 · 2024-07-29T22:59:25.000+05:30
50Projects-HTML-CSS-JavaScript : Stop watch
diff --git a/README.md b/README.md
@@ -331,6 +331,17 @@ In order to run this project you need:
 </details>
 </li>
 
+<li>
+<details>
+<summary>Stop Watch</summary>
+<p>This project is a simple and interactive stopwatch application created using HTML, CSS, and JavaScript. The stopwatch can be started, stopped, and reset, allowing users to measure elapsed time accurately. It displays minutes, seconds, and milliseconds, providing a clear and precise time tracking interface. The application is styled with CSS for a clean and modern look, and it is fully responsive, ensuring usability across different devices.</p>
+<ul>
+<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/StopWatch/">Live Demo</a></li>
+<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/StopWatch">Source</a></li>
+</ul> 
+</details>
+</li>
+
 </ol>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>
diff --git a/Source-Code/StopWatch/index.html b/Source-Code/StopWatch/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Stop watch</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div class="container">
+      <h1>Stopwatch</h1>
+      <div class="stopwatch">
+        <span id="minutes">00</span>:<span id="seconds">00</span>:<span
+          id="milliseconds"
+          >00</span
+        >
+      </div>
+      <div class="buttons">
+        <button id="start">Start</button>
+        <button id="stop">Stop</button>
+        <button id="reset">Reset</button>
+      </div>
+    </div>
+    <script src="script.js"></script>
+  </body>
+</html>
diff --git a/Source-Code/StopWatch/script.js b/Source-Code/StopWatch/script.js
@@ -0,0 +1,46 @@
+let milliseconds = 0;
+let seconds = 0;
+let minutes = 0;
+let timer;
+
+const startButton = document.getElementById('start');
+const stopButton = document.getElementById('stop');
+const resetButton = document.getElementById('reset');
+
+const updateTime = () => {
+  milliseconds += 1;
+  if (milliseconds === 100) {
+    milliseconds = 0;
+    seconds += 1;
+  }
+  if (seconds === 60) {
+    seconds = 0;
+    minutes += 1;
+  }
+  document.getElementById('milliseconds').innerText = milliseconds < 10 ? `0${milliseconds}` : milliseconds;
+  document.getElementById('seconds').innerText = seconds < 10 ? `0${seconds}` : seconds;
+  document.getElementById('minutes').innerText = minutes < 10 ? `0${minutes}` : minutes;
+};
+
+const startTimer = () => {
+  clearInterval(timer);
+  timer = setInterval(updateTime, 10);
+};
+
+const stopTimer = () => {
+  clearInterval(timer);
+};
+
+const resetTimer = () => {
+  clearInterval(timer);
+  milliseconds = 0;
+  seconds = 0;
+  minutes = 0;
+  document.getElementById('milliseconds').innerText = '00';
+  document.getElementById('seconds').innerText = '00';
+  document.getElementById('minutes').innerText = '00';
+};
+
+startButton.addEventListener('click', startTimer);
+stopButton.addEventListener('click', stopTimer);
+resetButton.addEventListener('click', resetTimer);
diff --git a/Source-Code/StopWatch/style.css b/Source-Code/StopWatch/style.css
@@ -0,0 +1,47 @@
+body {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #2e2a2a;
+  margin: 0;
+  font-family: Arial, sans-serif;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+}
+
+.stopwatch,
+h1,
+span {
+  color: aliceblue;
+}
+
+.stopwatch {
+  font-size: 48px;
+  margin-bottom: 20px;
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+  gap: 10px;
+}
+
+button {
+  padding: 10px 20px;
+  font-size: 16px;
+  cursor: pointer;
+  border: none;
+  border-radius: 5px;
+  background-color: #007bff;
+  color: #fff;
+}
+
+button:active {
+  background-color: #0056b3;
+}
