Stop Watch html full code free
index.html
1
<html>2
<head>3
<title>Digital Clock with Stopwatch</title>4
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css">5
</head>6
<body style="background-color: black; color: white; text-align: center; padding-top: 20vh; font-size: 3rem;">7
<div id="clock">00:00:00</div>8
<div class="mt-3">9
<button id="startBtn" class="btn btn-primary">Start Stopwatch</button>10
<button id="stopBtn" class="btn btn-danger">Stop Stopwatch</button>11
</div>12
13
<script>14
let timer;15
let hours = 0;16
let minutes = 0;17
let seconds = 0;18
19
function displayTime() {20
document.getElementById("clock").textContent = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;21
}22
23
function startStopwatch() {24
timer = setInterval(() => {25
seconds++;26
if (seconds === 60) {27
seconds = 0;28
minutes++;29
}30
if (minutes === 60) {31
minutes = 0;32
hours++;33
}34
displayTime();35
}, 1000);36
}37
38
function stopStopwatch() {39
clearInterval(timer);40
}41
42
document.getElementById("startBtn").addEventListener("click", startStopwatch);43
document.getElementById("stopBtn").addEventListener("click", stopStopwatch);44
</script>45
46
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script>47
</body>48
</html>styles.css
1
/* Replace with your CSS Code 2
(Leave empty if not needed) */ 3
main.js
1
/* Replace with your JS Code 2
(Leave empty if not needed) */3
