Crafting a Digital Glowing Clock with HTML, CSS, and JavaScript

Rohit Jha — Tue, 09 Apr 2024 05:37:38 +0000

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.

Link

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);

DEV Community: Rohit Jha

Crafting a Digital Glowing Clock with HTML, CSS, and JavaScript