Introduction:
In today's digital era, creating visually stunning and functional web elements is essential. A digital glowing clock exemplifies this fusion of form and function. In this post, we'll delve into building one using HTML, CSS, and JavaScript.
HTML Structure:
We'll start with the HTML, crafting a structured foundation comprising elements for hours, minutes, seconds, and optional AM/PM indicators. Accessibility is paramount, so we'll use semantic tags and provide meaningful descriptions.
CSS Styling:
Our next step involves CSS to create the glowing effect. Leveraging properties like box-shadow and text-shadow, we'll infuse vibrancy into our clock. By fine-tuning colors and glow intensity, we'll ensure it captivates users.
JavaScript Functionality:
JavaScript breathes life into our clock, enabling real-time updates of hours, minutes, and seconds. We'll also consider adding features like timezone support and customization options for user preference.
Performance and Compatibility:
As we finalize, we'll prioritize performance and cross-browser compatibility. Optimizing our code for efficiency ensures smooth operation across devices. Responsive design principles will guarantee seamless display on various screen sizes.
Conclusion:
Crafting a digital glowing clock merges creativity with technical prowess. By combining HTML, CSS, and JavaScript, we create captivating web elements. Whether for practical timekeeping or aesthetic enhancement, such a clock elevates the user experience with flair and functionality.
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Digital clock</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="hero">
<div class="box">
<style></style>
<div class="clock">
<span id="hrs">00</span>
<span>:</span>
<span id="min">00</span>
<span>:</span>
<span id="sec">00</span>
</div>
</div>
</div>
<script src="js/index.js"></script>
</body>
</html>
Css
* {
margin: 0;
padding: 0;
font-family: "Poppins", sans-serif;
box-sizing: border-box;
}
.hero {
width: 100%;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #2f363e;
position: relative;
}
.box {
position: relative;
width: 800px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
}
.clock {
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(40px);
color: #6e7f92f6;
z-index: 10;
}
.clock span {
font-size: 80px;
width: 110px;
display: inline-block;
text-align: center;
position: relative;
}
.clock span::after {
font-size: 16px;
position: absolute;
bottom: -15px;
left: 50%;
transform: translateX(-50%);
}
#hrs::after {
content: "HOURES";
color: #0f0;
font-weight: 600;
margin-bottom: -10px;
}
#min::after {
content: "MINS";
color: #0ff;
font-weight: 600;
margin-bottom: -10px;
}
#sec::after {
content: "SEC";
color: #ff0;
font-weight: 600;
margin-bottom: -10px;
}
/*------Anemated Border---------*/
.box::before {
content: "";
position: absolute;
inset: 0;
background: repeating-conic-gradient(
from var(--a),
#0f0,
#ff0,
#0ff,
#f0f,
#0ff
);
border-radius: 20px;
animation: rotate 6s linear infinite;
}
.box::after {
content: "";
position: absolute;
inset: 0;
background: repeating-conic-gradient(
from var(--a),
#0f0,
#ff0,
#0ff,
#f0f,
#0ff
);
border-radius: 20px;
animation: rotate 4s linear infinite;
filter: blur(40px);
opacity: 0.75;
}
.box style {
position: absolute;
inset: 4px;
background: #2f363e;
border-radius: 16px;
color: #ff0;
font-size: 20px;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
}
@property --a {
syntax: "<angle>";
inherits: false;
initial-value: 0deg;
}
@keyframes rotate {
0% {
--a: 0;
}
0% {
--a: -360deg;
}
}
Js
let hrs = document.getElementById("hrs");
let min = document.getElementById("min");
let sec = document.getElementById("sec");
setInterval(() => {
let currentTime = new Date();
hrs.innerHTML =
(currentTime.getHours() < 10 ? "0" : "") + currentTime.getHours();
min.innerHTML =
(currentTime.getMinutes() < 10 ? "0" : "") + currentTime.getMinutes();
sec.innerHTML =
(currentTime.getSeconds() < 10 ? "0" : "") + currentTime.getSeconds();
}, 1000);
Top comments (0)