Introduction
Today we will learn about How To Create a Modern Digital Clock.
HTML STRUCTURE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modern Digital Clock</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container text-center">
<h1 class="my-3">Modern Digital Clock</h1>
<div id="clock"></div>
</div>
</body>
</html>CSS STRUCTURE
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: linear-gradient(to right, #6dd5ed, #2193b0);
font-family: 'Arial', sans-serif;
margin: 0;
animation: backgroundChange 15s ease infinite;
}
@keyframes backgroundChange {
0% { background: linear-gradient(to right, #6dd5ed, #2193b0); }
50% { background: linear-gradient(to right, #ff758c, #ff7eb3); }
100% { background: linear-gradient(to right, #6dd5ed, #2193b0); }
}
#clock {
font-size: 6em;
font-weight: bold;
color: #fff;
background-color: rgba(255, 255, 255, 0.2);
border-radius: 20px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
padding: 20px;
letter-spacing: 0.05em;
backdrop-filter: blur(5px);
}
.container h1 {
color: #fff;
text-shadow: 2px 2px 4px #000;
margin-bottom: 30px;
}
</style>JAVASCRIPT AND JQUERY
<script>
function updateClock() {
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');
document.getElementById('clock').textContent = `${hours}:${minutes}:${seconds}`;
}
setInterval(updateClock, 1000);
updateClock(); // Initialize clock immediately
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>CODE INCLUDE
This Login Form code includes the mentioned things
- HTML Code
- JavaScript Code
- CSS Code
Modern Digital Clock FEATURES
- Desktop View is Perfect
- Mobile View is Perfect
- Include Bootstrap CDN Library
- Live Webpage Preview Button
How To Create a Modern Digital Clock. Manglastubh By Ankit Akolkar. Search on Google Free Online Courses.
Welcome to Manglastubh By Ankit Akolkar. Manglastubh website is designed and developed for all kinds of Knowledge-Based Blogs and Articles. Everyone will gain knowledge over here from this website.
