Task Two Stopwatch

├── README.md ├── stopwatch-logo-icon-vector.jpg ├── index.html ├── styles.css └── scripts.js /README.md: -------------------------------------------------------------------------------- 1 | # PRODIGY_WD__02 -------------------------------------------------------------------------------- /stopwatch-logo-icon-vector.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Praveena142004/PRODIGY_WD__02/HEAD/stopwatch-logo-icon-vector.jpg -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Task Two Stopwatch 6 | 7 | 8 | 9 | 10 |

11 |

12 | 00:00:00 13 |

14 |

15 | 16 | 17 | 18 |

19 |

20 |

21 | 22 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: flex; 3 | justify-content: center; 4 | align-items: center; 5 | height: 100vh; 6 | background-color:rgba(52, 42, 42, 0.699); 7 | font-family: Arial, sans-serif; 8 | margin: 0; 9 | } 10 | 11 | .stopwatch { 12 | background: #fff; 13 | padding: 20px; 14 | border-radius: 8px; 15 | border-width: 5px; 16 | border: black; 17 | box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 18 | text-align: center; 19 | } 20 | 21 | .display { 22 | font-size: 2em; 23 | margin-bottom: 20px; 24 | } 25 | 26 | .controls button { 27 | font-size: 1em; 28 | padding: 10px 20px; 29 | margin: 5px; 30 | border: none; 31 | border-radius: 5px; 32 | cursor: pointer; 33 | } 34 | 35 | #startStopBtn { 36 | background-color: #28a745; 37 | color: white; 38 | } 39 | 40 | #resetBtn { 41 | background-color: #dc3545; 42 | color: white; 43 | } 44 | 45 | #lapBtn { 46 | background-color: #007bff; 47 | color: white; 48 | } 49 | 50 | #laps { 51 | list-style: none; 52 | padding: 0; 53 | } 54 | 55 | #laps li { 56 | background: #e9ecef; 57 | margin: 5px 0; 58 | padding: 10px; 59 | border-radius: 5px; 60 | } 61 | -------------------------------------------------------------------------------- /scripts.js: -------------------------------------------------------------------------------- 1 | let startTime, updatedTime, difference, tInterval; 2 | let running = false; 3 | let laps = []; 4 | 5 | const startStopBtn = document.getElementById('startStopBtn'); 6 | const resetBtn = document.getElementById('resetBtn'); 7 | const lapBtn = document.getElementById('lapBtn'); 8 | const minutesDisplay = document.getElementById('minutes'); 9 | const secondsDisplay = document.getElementById('seconds'); 10 | const millisecondsDisplay = document.getElementById('milliseconds'); 11 | const lapsList = document.getElementById('laps'); 12 | 13 | function startStop() { 14 | if (!running) { 15 | startTime = new Date().getTime(); 16 | tInterval = setInterval(updateTime, 10); 17 | startStopBtn.textContent = "Pause"; 18 | running = true; 19 | } else { 20 | clearInterval(tInterval); 21 | running = false; 22 | startStopBtn.textContent = "Start"; 23 | } 24 | } 25 | 26 | function reset() { 27 | clearInterval(tInterval); 28 | running = false; 29 | startStopBtn.textContent = "Start"; 30 | minutesDisplay.textContent = "00"; 31 | secondsDisplay.textContent = "00"; 32 | millisecondsDisplay.textContent = "00"; 33 | laps = []; 34 | updateLaps(); 35 | } 36 | 37 | function lap() { 38 | if (running) { 39 | laps.push(minutesDisplay.textContent + ":" + secondsDisplay.textContent + ":" + millisecondsDisplay.textContent); 40 | updateLaps(); 41 | } 42 | } 43 | 44 | function updateLaps() { 45 | lapsList.innerHTML = ''; 46 | laps.forEach((lap, index) => { 47 | const lapItem = document.createElement('li'); 48 | lapItem.textContent = `Lap ${index + 1}: ${lap}`; 49 | lapsList.appendChild(lapItem); 50 | }); 51 | } 52 | 53 | function updateTime() { 54 | updatedTime = new Date().getTime(); 55 | difference = updatedTime - startTime; 56 | 57 | const minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60)); 58 | const seconds = Math.floor((difference % (1000 * 60)) / 1000); 59 | const milliseconds = Math.floor((difference % 1000) / 10); 60 | 61 | minutesDisplay.textContent = (minutes < 10) ? "0" + minutes : minutes; 62 | secondsDisplay.textContent = (seconds < 10) ? "0" + seconds : seconds; 63 | millisecondsDisplay.textContent = (milliseconds < 10) ? "0" + milliseconds : milliseconds; 64 | } 65 | 66 | startStopBtn.addEventListener('click', startStop); 67 | resetBtn.addEventListener('click', reset); 68 | lapBtn.addEventListener('click', lap); 69 | --------------------------------------------------------------------------------