Stunning Digital Watch with Glass Effect

In the realm of web design, creating visually stunning elements can captivate users and elevate the user experience. Today, we’ll embark on a journey to build a Glassmorphic Clock – a sleek and modern timepiece that combines the elegance of glassmorphism with the functionality of a clock. Let’s break down the code step by step and understand the magic behind it.

Setting the Stage: HTML Structure

Our HTML provides the foundation for our Glassmorphic Clock. Let’s explore the structure:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Glassmorphism Clock</title>
  </head>
  <body>
    <div class="clock-container">
      <div class="shape1"></div>
      <div class="shape2"></div>
      <div class="clock-box">
        <div id="day"></div>
        <div class="wrapper">
          <div id="time"></div>
          <div id="midday"></div>
        </div>
      </div>
    </div>
  </body>
</html>

HTML

Styling Elegance: CSS Magic

Our CSS brings the glassmorphic design to life. Let’s delve into the styling:

@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@500&display=swap");
*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  font-family: "Outfit", sans-serif;
}
body {
  background-color: #02070d;
}
.clock-container {
  width: 450px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}
.clock-container * {
  color: #ffffff;
  font-family: "Roboto Mono", monospace;
}
.clock-box {
  width: 100%;
  background-color: rgba(255, 255, 255, 0.06);
  padding: 50px 25px;
  border: 1.5px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 25px 30px rgba(0, 0, 0, 0.15);
  backdrop-filter: blur(15px);
}
#day {
  position: relative;
  font-size: 20px;
  text-transform: uppercase;
  color: #c5c5c5;
  text-align: center;
}
.wrapper {
  text-align: center;
}
#time {
  font-size: 70px;
  display: inline-block;
}
#midday {
  display: inline-block;
  font-size: 30px;
}
.shape1 {
  height: 250px;
  width: 250px;
  position: absolute;
  background: linear-gradient(45deg, #ff5b84, #eb3461);
  border-radius: 50%;
  z-index: -1;
  bottom: 100px;
  right: -100px;
}
.shape2 {
  height: 250px;
  width: 250px;
  position: absolute;
  background: linear-gradient(135deg, #426cf8, #3ebdf0);
  border-radius: 50%;
  top: 100px;
  left: -100px;
  z-index: -1;
}

CSS

Unraveling the Glassmorphic Script: JavaScript Magic

Our JavaScript script animates and updates the clock. Let’s unravel the code:

var time = document.getElementById("time");
var day = document.getElementById("day");
var midday = document.getElementById("midday");

var clock = setInterval(function calcTime() {
  var date_now = new Date();
  var hr = date_now.getHours();
  var min = date_now.getMinutes();
  var sec = date_now.getSeconds();
  var middayValue = "AM";
  var days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ];

  day.textContent = days[date_now.getDay()];

  middayValue = hr >= 12 ? "PM" : "AM";

  if (hr == 0) {
    hr = 12;
  } else if (hr > 12) {
    hr -= 12;
  }

  hr = hr < 10 ? "0" + hr : hr;
  min = min < 10 ? "0" + min : min;
  sec = sec < 10 ? "0" + sec : sec;

  time.textContent = hr + ":" + min + ":" + sec;
  midday.textContent = middayValue;
}, 1000);

JavaScript

Breaking Down the Magic

Clock Initialization:
- Sets up the basic structure of the glassmorphic clock.
Shapes for Aesthetics:
- Adds gradient-filled shapes for a glassmorphic effect.
Text Elements:
- Displays the day, time, and midday elements.
JavaScript Updates:
- Dynamically updates the clock every second.

Testing the Elegance

Check the Glassmorphic Beauty:
- Open the HTML file in a browser and witness the elegance of the Glassmorphic Clock.

Conclusion: Share the Elegance!

You’ve just crafted a stunning Glassmorphic Clock! This combination of design and functionality not only enhances your web page but also showcases your creative prowess. Share the elegance with your audience and keep exploring the fascinating world of web development.

Happy Coding!