A watch on a website??

Code

<!DOCTYPE html>

<html>

<head>

<title>Digital Clock, Stopwatch & Timer</title>

<style>

body {

font-family: Arial, sans-serif;

text-align: center;

margin-top: 50px;

}

h1 {

font-size: 2.5rem;

}

.section {

margin: 30px 0;

padding: 20px;

border: 2px solid #ccc;

border-radius: 10px;

display: inline-block;

}

button {

margin: 5px;

padding: 10px 20px;

font-size: 1rem;

cursor: pointer;

}

input[type="number"] {

width: 50px;

text-align: center;

}

</style>

</head>

<body>

<h1>🕒 Digital Clock, Stopwatch & Timer</h1>

<h2>⏰ Digital Clock</h2>

<button onclick="toggleClockFormat()">Toggle 12/24 Hour</button>

</div>

<h2>⏱️ Stopwatch</h2>

<button onclick="startStopwatch()">Start</button>

<button onclick="resetStopwatch()">Reset</button>

</div>

<h2>⏲️ Countdown Timer</h2>

<div>

<input type="number" id="timerMinutes" placeholder="Min" min="0" /> :

</div>

<button onclick="startTimer()">Start Timer</button>

<button onclick="stopTimer()">Stop Timer</button>

<button onclick="resetTimer()">Reset Timer</button>

</div>

// =================== DIGITAL CLOCK ===================

let is24Hour = true;

function updateClock() {

const now = new Date();

let hours = now.getHours();

const minutes = String(now.getMinutes()).padStart(2, '0');

const seconds = String(now.getSeconds()).padStart(2, '0');

let period = '';

if (!is24Hour) {

period = hours >= 12 ? ' PM' : ' AM';

hours = hours % 12 || 12;

}

hours = String(hours).padStart(2, '0');

document.getElementById('digitalClock').innerText = `${hours}:${minutes}:${seconds}${period}`;

}

function toggleClockFormat() {

is24Hour = !is24Hour;

updateClock();

}

setInterval(updateClock, 1000);

updateClock();

// =================== STOPWATCH ===================

let stopwatchInterval;

let stopwatchMilliseconds = 0;

function startStopwatch() {

if (!stopwatchInterval) {

stopwatchInterval = setInterval(() => {

stopwatchMilliseconds += 10;

displayStopwatch();

}, 10);

}

function stopStopwatch() {

clearInterval(stopwatchInterval);

stopwatchInterval = null;

}

function resetStopwatch() {

stopwatchMilliseconds = 0;

displayStopwatch();

stopStopwatch();

}

function displayStopwatch() {

const totalSeconds = Math.floor(stopwatchMilliseconds / 1000);

const hrs = String(Math.floor(totalSeconds / 3600)).padStart(2, '0');

const mins = String(Math.floor((totalSeconds % 3600) / 60)).padStart(2, '0');

const secs = String(totalSeconds % 60).padStart(2, '0');

const millis = String(stopwatchMilliseconds % 1000).padStart(3, '0');

document.getElementById('stopwatch').innerText = `${hrs}:${mins}:${secs}.${millis}`;

}

// =================== COUNTDOWN TIMER ===================

let timerInterval;

let timerTime = 0;

function startTimer() {

const minutes = parseInt(document.getElementById('timerMinutes').value) || 0;

const seconds = parseInt(document.getElementById('timerSeconds').value) || 0;

timerTime = (minutes * 60 + seconds) * 1000;

if (timerTime <= 0) {

alert('Please set a valid time!');

return;

}

displayTimer();

if (!timerInterval) {

timerInterval = setInterval(() => {

if (timerTime > 0) {

timerTime -= 10;

displayTimer();

} else {

clearInterval(timerInterval);

timerInterval = null;

alert('⏲️ Time’s up!');

}

}, 10);

}

function stopTimer() {

clearInterval(timerInterval);

timerInterval = null;

}

function resetTimer() {

stopTimer();

timerTime = 0;

displayTimer();

document.getElementById('timerMinutes').value = '';

document.getElementById('timerSeconds').value = '';

}

function displayTimer() {

const totalSeconds = Math.floor(timerTime / 1000);

const mins = String(Math.floor(totalSeconds / 60)).padStart(2, '0');

const secs = String(totalSeconds % 60).padStart(2, '0');

const millis = String(timerTime % 1000).padStart(3, '0');

document.getElementById('countdown').innerText = `${mins}:${secs}.${millis}`;

}

</script>

</body>

</html>