Add files via upload

mridul0703 · Jun 10, 2024 · df571b5 · df571b5
1 parent 05a0830
commit df571b5
Show file tree

Hide file tree

Showing 4 changed files with 173 additions and 0 deletions.
diff --git a/PRODIGY_WD_02/bg.png b/PRODIGY_WD_02/bg.png
diff --git a/PRODIGY_WD_02/index.html b/PRODIGY_WD_02/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stopwatch</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>Stopwatch</h1>
+        <div class="stopwatch">
+            <div id="display">00:00:00</div>
+            <div class="buttons">
+                <button id="startStopBtn">Start</button>
+                <button id="resetBtn">Reset</button>
+                <button id="lapBtn">Lap</button>
+            </div>
+            <div class="laps">
+                <h2>Laps</h2>
+                <ul id="lapsList"></ul>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/PRODIGY_WD_02/script.js b/PRODIGY_WD_02/script.js
@@ -0,0 +1,68 @@
+let timer;
+let startTime;
+let elapsedTime = 0;
+let running = false;
+let lapNumber = 0;
+
+const display = document.getElementById('display');
+const startStopBtn = document.getElementById('startStopBtn');
+const resetBtn = document.getElementById('resetBtn');
+const lapBtn = document.getElementById('lapBtn');
+const lapsList = document.getElementById('lapsList');
+
+function formatTime(ms) {
+    let date = new Date(ms);
+    let minutes = String(date.getUTCMinutes()).padStart(2, '0');
+    let seconds = String(date.getUTCSeconds()).padStart(2, '0');
+    let milliseconds = String(Math.floor(date.getUTCMilliseconds() / 10)).padStart(2, '0');
+    return `${minutes}:${seconds}:${milliseconds}`;
+}
+
+function updateDisplay(time) {
+    display.textContent = formatTime(time);
+}
+
+function startStop() {
+    if (running) {
+        clearInterval(timer);
+        elapsedTime += Date.now() - startTime;
+        startStopBtn.textContent = 'Start';
+    } else {
+        startTime = Date.now();
+        timer = setInterval(() => {
+            updateDisplay(Date.now() - startTime + elapsedTime);
+        }, 10);
+        startStopBtn.textContent = 'Stop';
+    }
+    running = !running;
+}
+
+function reset() {
+    clearInterval(timer);
+    elapsedTime = 0;
+    running = false;
+    startStopBtn.textContent = 'Start';
+    updateDisplay(elapsedTime);
+    lapsList.innerHTML = '';
+    lapNumber = 0;
+}
+
+function addLap() {
+    if (running) {
+        if (lapNumber < 10) {
+            lapNumber++;
+            let lapTime = formatTime(Date.now() - startTime + elapsedTime);
+            let lapElement = document.createElement('li');
+            lapElement.textContent = `Lap ${lapNumber}: ${lapTime}`;
+            lapsList.appendChild(lapElement);
+        } else {
+            alert('Maximum of 10 laps reached.');
+        }
+    }
+}
+
+startStopBtn.addEventListener('click', startStop);
+resetBtn.addEventListener('click', reset);
+lapBtn.addEventListener('click', addLap);
+
+updateDisplay(elapsedTime);
diff --git a/PRODIGY_WD_02/styles.css b/PRODIGY_WD_02/styles.css
@@ -0,0 +1,78 @@
+body {
+    font-family: 'Arial', sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-image: url(./bg.png);
+    background-position: left;
+    background-repeat: no-repeat;
+    background-size: cover;
+    color: #333;
+}
+
+.container {
+    text-align: center;
+}
+
+.stopwatch {
+    background: #fff;
+    padding: 20px;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
+    width: 300px;
+}
+
+#display {
+    font-size: 3rem;
+    margin-bottom: 20px;
+    color: #333;
+}
+
+.buttons {
+    margin-bottom: 20px;
+}
+
+button {
+    font-size: 1rem;
+    padding: 10px 20px;
+    margin: 5px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background: #f9f9f9;
+    color: #333;
+    cursor: pointer;
+    transition: background 0.3s, border-color 0.3s;
+}
+
+button:hover {
+    background: #e0e0e0;
+    border-color: #bbb;
+}
+
+.laps {
+    text-align: left;
+    margin-top: 20px;
+}
+
+.laps h2 {
+    margin-bottom: 10px;
+    color: #333;
+}
+
+#lapsList {
+    list-style-type: none;
+    padding: 0;
+    max-height: 200px;
+    overflow-y: auto;
+}
+
+#lapsList li {
+    background: #f9f9f9;
+    padding: 5px;
+    margin-bottom: 5px;
+    border-radius: 5px;
+    color: #333;
+    border: 1px solid #ccc;
+}