<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Live Clock</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="clock-container">
<h1 id="live-clock">Loading time...</h1>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
function updateClock() {
const clockElement = document.getElementById('live-clock');
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2, '0');
const seconds = String(now.getSeconds()).padStart(2, '0');
const currentTime = `${hours}:${minutes}:${seconds}`;
clockElement.textContent = currentTime;
}
// Update the clock every second
setInterval(updateClock, 1000);
// Initialize the clock when the page loads
updateClock();
});
</script>
</body>
</html>
Scroll down..
