My solution with HTML and JavaScript inside it:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="time" style="border: 3px solid blue; text-align: center;font-size: 2em; margin-bottom: 10px">00:00</div>
<button id="startBtn">Start the clock</button>
<button id="stopBtn" disabled="true">Stop the clock</button>
<script>
window.onload = function () {
stopWatch();
}
</script>
<script>
function stopWatch() {
let time, intervalId;
let startBtn = document.getElementById("startBtn");
let stopBtn = document.getElementById("stopBtn");
startBtn.addEventListener("click", function () {
time = -1;
incrementTime();
intervalId = setInterval(incrementTime, 1000);
startBtn.disabled = true;
stopBtn.disabled = false;
});
stopBtn.addEventListener("click", function () {
clearInterval(intervalId);
startBtn.disabled = false;
stopBtn.disabled = true;
});
function incrementTime() {
time++;
document.getElementById("time").textContent =
("0" + Math.trunc(time / 60)).slice(-2) +
":" + ("0" + (time % 60)).slice(-2);
}
}
</script>
</body>
</html>
Account
