Single File HTML Clock </head> <body> <h1>Single File HTML Clock Toolbox</h1> <div class="container">  <div id="clock" style="border: 1px solid #ccc; padding: 1em;"> <h2>Clock</h2> <div id="current-time" style="font-size: 2em;"></div> </div>  <div style="border: 1px solid #ccc; padding: 1em;"> <h2>Countdown Timer</h2> <input type="text" id="countdown-input" value="0:00:00"> <input type="button" id="start-countdown" value="Start"> <input type="button" id="stop-countdown" <div id="countdown-time" style="font-size: 2em;"></div> </div>  <div style="border: 1px solid #ccc; padding: 1em;"> <h2>Stopwatch</h2> <input id="start-stopwatch" value="Start"> <input type="button" id="stop-stopwatch" value="Stop"> <input type="button" id="reset-stopwatch" value="Reset"> <div id="stopwatch-time" style="font-size: 2em;">00:00:00.000</div> <div </div> </div> <script> // Clock setInterval(() => { let date = new Date(); let hh = date.getHours() 10 ? "0" + date.getHours() : date.getHours(); let mm = date.getMinutes() < 10 ? "0" + : date.getMinutes(); let ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds(); document.getElementById("current-time").innerHTML = }, 1000); // Countdown Timer let countdownTime; let countdownInterval; document.getElementById('start-countdown').addEventListener('click', () => { countdownTime = [...document.getElementById('countdown-input').value.split(':').map(x => parseInt(x, 10))]; countdown(); }); document.getElementById('stop-countdown').addEventListener('click', () => { clearInterval(countdownInterval); }); function countdown() { countdownInterval = setInterval(() { let minutes = countdownTime[0]; let seconds = countdownTime[1]; if (--seconds < 0 && minutes > 0) { seconds = 59; minutes--; } if (minutes < 0) returnclearInterval(countdownInterval); if (seconds < 0) seconds = document.getElementById('countdown-time').innerHTML = `${minutes}:${seconds < 10 ? "0" + seconds : seconds}`; countdownTime[0] = minutes; countdownTime[1] = seconds; if (minutes === 0 && seconds === 0) { clearInterval(countdownInterval); alert('Time is up!'); } }, 1000); } // Stopwatch let startTime; let elapsedTime = 0; let stopwatchInterval; document.getElementById('start-stopwatch').addEventListener('click', () => { if (!startTime) { startTime = new Date(); startStopwatch(); document.getElementById('start-stopwatch').value = "Pause"; } else { clearInterval(stopwatchInterval); let currentTime = new Date(); elapsedTime += (currentTime - document.getElementById('start-stopwatch').value = "Resume"; startTime = null; } }); document.getElementById('stop-stopwatch').addEventListener('click', () => { clearInterval(stopwatchInterval); document.getElementById('start-stopwatch').value = "Start"; }); document.getElementById('reset-stopwatch').addEventListener('click', () => { clearInterval(stopwatchInterval); elapsedTime = 0; document.getElementById('start-stopwatch').value = "Start"; document.getElementById('stopwatch-time').innerHTML = "00:00:00.000"; }); function { stopwatchInterval = setInterval(() => { let ct = new Date(elapsedTime); let m = ct.getMinutes(); let = ct.getSeconds(); let ms = ct.getMilliseconds(); document.getElementById('stopwatch-time').innerHTML = `${m}:${s < 10 ? "0" + s : s}.${ms < 100 ? (ms < 10 ? "00" : "0") + ms : ms}`; elapsedTime += 10; 10); } </script> </body> </html>