codemediaweb.com

Code Media

hire me

Glassmorphism Analog Clock using HTML CSS & JavaScript

by
Glassmorphism Analog Clock using HTML CSS & JavaScript

In this article, you will learn how to create Glassmorphism Analog Clock using HTML CSS, and JavaScript. CSS Glassmorphism is an extraordinary trending design that is much more interesting than ordinary design.

CSS Glassmorphism Working Analog Clock is a simple design. HTML CSS and JavaScript have been used to build it. I have added the necessary information with the help of HTML. Designed by CSS Attic. And I have implemented an analog clock with the help of JavaScript.

Glassmorphism Analog Clock

Follow the tutorial below to know how to make Glassmorphism Analog Clock. First I used the background color of the webpage as black. Then I made two colorful circles. You can use colorful images instead of circles.

Then I created the basic structure of the analog clock. Here I have used a transparent image to write numbers from 1 to 12. Then with the help of HTML, I made three hands that will indicate the time of this watch.

See the Pen glass analog clock by Foolish Developer (@fghty) on CodePen.

This analog clock will take the current time from the device. Then at that time, these hands will continue to rotate by converting to degrees.

Hope you learned from the demo above how this Glassmorphism Analog Clockworks. Above you will get the required source code.

Step 1: Design the webpage

Using the code below I designed the background and created two colorful circles. I have used the width and height of the circles 240 px. Here we have used position: absolute which will keep it fixed in a certain place. I used border-radius: 50% with it which turned it into a circle.

<div class=”background”>
  <div class=”shape”></div>
  <div class=”shape”></div>
</div>
body{
    background-color: #080710;
}
.background{
    width: 430px;
    height: 520px;
    position: absolute;
    transform: translate(-50%,-50%);
    left: 50%;
    top: 50%;
}
.background .shape{
    height: 240px;
    width: 240px;
    position: absolute;
    border-radius: 50%;
}

Now using the following CSS codes I have placed the two circles in different places. I have also given different background colors for the two circles.

.shape:first-child{
    background: linear-gradient(
        #8414ce,
        #bf23f6
    );
    left: -90px;
    top: -20px;
}
.shape:last-child{
    background: linear-gradient(
        to right,
        #ff512f,
        #f09819
    );
    right: -70px;
    bottom: -60px;
}
Design the webpage

Step 2: Basic structure of Glassmorphism Analog Clock

Now I have created the basic structure of this analog clock. width, height 320px and border-radius: 50% helped to make it round. I used transparent background color here and backdrop-filter: blur (10px) helped to blur the background a bit.

<div class=”clock”>
</div>
.clock{
background-color: rgba(255,255,255,0.07);
    backdrop-filter: blur(10px);
    height: 320px;
    width: 320px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    box-sizing: content-box;
    border-radius: 50%;
    border: 15px solid rgba(255,255,255,0.07);
    box-shadow: 15px 15px 35px rgba(0,0,0,0.2),
    inset 0 0 30px rgba(0,0,0,0.4);
}
Basic structure of Glassmorphism Analog Clock

Step 3: Add images to make numbers from 1 to 12

Now I have added an image that has helped to create numbers from 1 to 12. In this case, I did not add any number in a custom way. I have used a transparent image which will help to see the times.

<img src=”https://dl.dropbox.com/s/f3b3lyanili7zl2/clock%20template-01.svg?raw=1″ alt=”clock”>
img{
    position: relative;
}
Add images to make numbers from 1 to 12

Step 4: Make hands in Glassmorphism Clock

Now we have created three hands in this Glassmorphism Analog Clock which will indicate the time in hours, minutes, and seconds. I have used different hand sizes and background colors.

  <div class=”hour hand” id=”hour”></div>
  <div class=”minute hand” id=”minute”></div>
  <div class=”seconds hand” id=”seconds”></div>
.hand{
    position: absolute; 
    margin: auto;
    left: 0;
    right: 0;
    border-radius: 5px;
    transform-origin: bottom;
}
.hour{
    height: 60px;
    width: 8px;
    top: 100px;
background-color: #ffffff;
}
.minute{
    height: 80px;
    width: 5px;
    top: 80px;
background-color: #40c9ff;
}
.seconds{
    height: 90px;
    width: 3px;
    top: 70px;
    background-color: #f8fc30;
}
Make hands in Glassmorphism Clock

Step 5: Activate Analog Clock with JavaScript

I have only designed it with the help of the HTML CSS above. Now is the time to implement it using JavaScript.

Below you will find the complete JavaScript. Below I have given a complete explanation that will help you to know which code has been used for which work.

let hour = document.getElementById(“hour”);
let minute = document.getElementById(“minute”);
let seconds = document.getElementById(“seconds”);
let set_clock = setInterval(() => {
    let date_now = new Date();
    let hr = date_now.getHours();
    let min = date_now.getMinutes();
    let sec = date_now.getSeconds();
    let calc_hr = (hr * 30) + (min / 2);
    let calc_min = (min * 6) + (sec / 10);
    let calc_sec = sec * 6;
    hour.style.transform = `rotate(${calc_hr}deg)`;
    minute.style.transform = `rotate(${calc_min}deg)`;
    seconds.style.transform = `rotate(${calc_sec}deg)`;
}, 1000);

Explanation of JavaScript

The following three code lines have helped to determine the constant of each of the three hands. Because we know that no ID function can be used directly in JavaScript.

let hour = document.getElementById(“hour”);
let minute = document.getElementById(“minute”);
let seconds = document.getElementById(“seconds”);

Now I have taken the current time from the device using JavaScript’s new Date method. As I said before it is not time on any server it will take time from the device and keep updating that time.

let date_now = new Date();

In the same way, I have collected hours, minutes, and seconds and then stored them in hr, min, sec.

    let hr = date_now.getHours();
    let min = date_now.getMinutes();
    let sec = date_now.getSeconds();

Converts those hours, minutes, and seconds to degrees using the code below. Because we know that in the case of analog clocks, the time has to be converted to degrees.

    let calc_hr = (hr * 30) + (min / 2);
    let calc_min = (min * 6) + (sec / 10);
    let calc_sec = sec * 6;

I have managed to rotate three hands using this JavaScript line code. Above we determined the degree for each hand. I have been instructed to rotate it using that degree.

    hour.style.transform = `rotate(${calc_hr}deg)`;
    minute.style.transform = `rotate(${calc_min}deg)`;
    seconds.style.transform = `rotate(${calc_sec}deg)`;

I put all the javascript in setInterval and added 1000 milliseconds. setInterval basically helps to update some system or program after some time. Here I have been instructed to update the program after 1000 milliseconds.

let set_clock = setInterval(() => {
}, 1000);
Glassmorphism Analog Clock using HTML CSS

Hope you found out from this article how I created this Glassmorphism Analog Clock using HTML CSS JavaScript. 

If you want to know more about CSS Glassmorphism design then of course you can watch my other tutorials. The source code required to create Analog Clock with Glassmorphism is in the download button below.

Leave a comment