INTRODUCTION
Today we will learn about How To Create a Stylish 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>Stylish 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">Stylish Digital Clock</h1>
<div id="clock" class="alert alert-primary"></div>
</div>
</body>
</html>CSS STRUCTURE
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #333;
color: #fff;
font-family: 'Arial', sans-serif;
margin: 0;
}
#clock {
font-size: 6em;
font-weight: bold;
background-color: rgba(0, 0, 0, 0.2);
border-radius: 20px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
padding: 20px;
letter-spacing: 0.05em;
}
.container {
text-shadow: 2px 2px 4px #000;
}
.alert-primary {
background-color: #007bff;
color: white;
border: none;
}
</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
Stylish Digital Clock FEATURES
- Desktop View is Perfect
- Mobile View is Perfect
- Include Bootstrap CDN Library
- Live Webpage Preview Button
How To Create a Stylish-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.
