JavaScript Clock | CSS Neumorphism Working Analog Clock UI Design

#html #css #javascript #webdev

In this article we will design a very beautiful neumorphism Analog Clock UI design using javascript css & html. I am Daman sure you all are familiar with this type of design. However i think there are many beginner who do not know How to create a Working Analog Clock UI Design using html css and javascript. Hopefully this article will help you out.

So lets understand the concepts of what is basically a neumorhism design .

Neumorphism is a modern design that is currently in great demand. It is much more beautiful and attractive than the general design.

If you want you can watch the live demo with this link.

if you are a beginner do follow my steps what i am doing to create this beautiful Analog Clock UI Design using html CSS and javascript.

Step 1: Basic HTML Code

First of all add the basic html code to create this Analog Clock UI Design using html css and javascript .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
    <title>The Best clocking system using css</title>
</head>
<body>

    <div class="container">
        <div class="background">
            <div class="shape"></div>
            <div class="shape"></div>
        </div>
        <div class="clock">
            <div class="hour hand" id="hour"></div>
            <div class="minute hand" id="minute"></div>
            <div class="seconds hand" id="seconds"></div>
        </div>
    </div>
</body>
</html>

Step 2: Basic CSS Code


*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

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%;
}

.shape:first-child{
    background: linear-gradient(
        #84fab0,
        #8fd3f4
    );
    left: -90px;
    top: -20px;
}

.shape:last-child{
    background: linear-gradient(
        to right,
        #e6b980,
        #eacda3
    );
    right: -70px;
    bottom: -60px;
}

.clock
{
    box-sizing: content-box;
    background-color: rgba(255,255,255,0.07);
    backdrop-filter: blur(10px);
    height: 320px;
    width: 320px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    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);

}

img{
    position: relative;
}

.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: #84fab0;
}

.seconds{
    height: 90px;
    width: 3px;
    top: 70px;
    background-color: #f8fc30;
}

Step 3: JavaScript Code

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

Step 4: Detail explanation of some code

1. setInterval() function

setInterval()

The setInterval() method, offered on the Window and Worker interfaces, repeatedly calls a function or executes a code snippet, with a fixed time delay between each call.

2. new Date() function
When called as a function, returns a string representation of the current date and time, exactly as new Date().toString() does.

new Date()

Hope you like this design and you have learned how to make it from this article. You can watch the live demo of this design if you want and download the source code if necessary. You can also see the designs I have made many more.
If there is any difficulty, of course you can comment.

You can visit my blog for more tutorials like this.
https://ziontutorial.com/