Real Time Pendulum Clock with Javascript

Hello readers, Today in this blog you’ll learn how to create a real-time pendulum clock with Javascript. Earlier, you learned to send emails using PHP. I have also created a blog on other cool stuff about web designing.

Creating such a pendulum clock is really fun and full of excitement. Trying these sorts of fun projects helps you to grow your skills. Today I’m going to show you how you can create a real-time pendulum clock with awesome animation. The whole animation is done with CSS and the time-showing functionality is created in Javascript. At first, I created some div for the frame, pendulum & other parts of the clock then I styled them nicely with CSS and at last, I created time-showing functionality using Javascript.

As you notice, the numbers of the clock are perfectly placed in the correct position just like in a real clock. For that, I have given the ‘position relative’ property to the parent div and the ‘position absolute’ property to the child div which makes all numbers from 1 to 12 be placed at the same place by overlapping each other. After that, I rotated the numbers starting from 30 degrees to 360 degrees increasing each by the value of 30.

The pendulum completes its animation within 2 seconds but it is given for infinite time so the animation never ends. The pendulum moves 30 degrees to the right and returns to 0 degrees within 1 second and then it moves 30 degrees to the left and again returns to 0 degrees within the remaining 1 second. I have also set the ‘transform-origin’ property at the top of the pendulum which does not allow to move the top of the pendulum. It makes the top of the pendulum be placed in the same position without rotating. That’s all how I animate pendulum. The cross at the bottom of the pendulum is created with the ‘after’ pseudo-element which has the clip-path property to give the cross shape.

For getting the exact time I used the ‘Date()’ function of Javascript, then I stored the hour, minute & second values in different variables. I have submitted the hour time to the hour hand, the minute time to the minute hand & second time to the second hand. At last, I have set the rotation property to all the hands so that they continue their rotation as per time. That’s all I have done for showing time with hands.

If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program (Real Time Pendulum Clock with Javascript).

Video Tutorial of Real-Time Pendulum Clock with Javascript

All this page design and animation are based on CSS and time showing are based on Javascript. If you’re a beginner you can also create this type of pendulum clock. If you like this program (Real Time Pendulum Clock with Javascript) and want to get source code. You can easily get the source code of this program. To get the source code you just need to scroll down.

Real-Time Pendulum Clock with Javascript [Source Codes]

To create this program (Real Time Pendulum Clock with Javascript), you need to create three files one HTML file, one CSS file & one Javascript file. After creating these files just paste the following code into your file. First, create an HTML file with the name index.html and paste the given codes into your HTML file. Note it, you’ve to create a file with a .html extension.

HTML

  <!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">
    <title>Pendulum Clock</title>
</head>
<body>
    <div class="container">
        <div class="frame1">
            <div class="frame2">
                <div class="clock">
                    <div class="hand hour"></div>
                    <div class="hand min"></div>
                    <div class="hand sec"></div>
                    <div class="time time1">1</div>
                    <div class="time time2">2</div>
                    <div class="time time3">3</div>
                    <div class="time time4">4</div>
                    <div class="time time5">5</div>
                    <div class="time time6">6</div>
                    <div class="time time7">7</div>
                    <div class="time time8">8</div>
                    <div class="time time9">9</div>
                    <div class="time time10">10</div>
                    <div class="time time11">11</div>
                    <div class="time time12">12</div>
                </div>
                <div class="handle"></div>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Second, create a CSS file with the name style.css and paste the given code into your CSS file. Note it, you’ve to create a file with a .css extension.

CSS

  *{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.container{
    height: 100vh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d8d8d8;
}
.container .frame1{
    width: 150px;
    height: 400px;
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSuLi4GjRzXB14owGvJMOwQmU2IJK4M0CQFww&usqp=CAU);
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #999;
}
.container .frame1 .frame2{
    width: 100px;
    height: 450px;
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQlhp1kS1XUMvXbrll_SBQQEg3OMNuPwVVJxg&usqp=CAU);
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: -6px 0px 10px -7px #000;
}
.container .frame1 .frame2 .clock{
    width: 200px;
    height: 200px;
    background-color: #fff;
    border-radius: 50%;
    margin-top: 40px;
    z-index: 1;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 10px solid #ca8b03;
    box-shadow: 0px 0px 10px #000;
}
.container .frame1 .frame2 .clock .time{
    position: absolute;
    width: 180px;
    height: 180px;
    display: flex;
    justify-content: center;
    font-size: 20px;
    transform: rotate(var(--rotate));
    --rotate: 0;
}
.container .frame1 .frame2 .clock .time1{
    --rotate: 30deg;
}
.container .frame1 .frame2 .clock .time2{
    --rotate: 60deg;
}.container .frame1 .frame2 .clock .time3{
    --rotate: 90deg;
}.container .frame1 .frame2 .clock .time4{
    --rotate: 120deg;
}.container .frame1 .frame2 .clock .time5{
    --rotate: 150deg;
}.container .frame1 .frame2 .clock .time6{
    --rotate: 180deg;
}.container .frame1 .frame2 .clock .time7{
    --rotate: 210deg;
}.container .frame1 .frame2 .clock .time8{
    --rotate: 240deg;
}.container .frame1 .frame2 .clock .time9{
    --rotate: 270deg;
}.container .frame1 .frame2 .clock .time10{
    --rotate: 300deg;
}.container .frame1 .frame2 .clock .time11{
    --rotate: 330deg;
}.container .frame1 .frame2 .clock .time12{
    --rotate: 360deg;
}
.container .frame1 .frame2 .clock .hand{
    position: absolute;
    bottom: 50%;
    transform-origin: bottom;
    transform: rotate(calc(var(--rotate)*1deg));
    --rotate: 0deg;
}
.container .frame1 .frame2 .clock .hour{
    width: 5px;
    height: 45px;
    background-color: #000;
}
.container .frame1 .frame2 .clock .min{
    width: 3px;
    height: 60px;
    background-color: #0e89b9;
}
.container .frame1 .frame2 .clock .sec{
    width: 2px;
    height: 70px;
    background-color: red;
}
.container .frame1 .frame2 .clock::after{
    content: "";
    position: relative;
    width: 15px;
    height: 15px;
    background-color: #000;
    border-radius: 50%;
}
.container .frame1 .frame2 .handle{
    width: 15px;
    height: 150px;
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSuLi4GjRzXB14owGvJMOwQmU2IJK4M0CQFww&usqp=CAU);
    margin-top: -10px;
    position: relative;
    animation: handle 2s linear infinite;
    transform-origin: top;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
.container .frame1 .frame2 .handle::after{
    content: "";
    position: absolute;
    width: 40px;
    height: 40px;
    top: 100%;
    left: -12px;
    margin-top: -60px;
    background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTl5i5NUx4p9qf0BisbmiAaYkCyikPZFYxoaw&usqp=CAU);
    clip-path: polygon(20% 0%, 0% 20%, 30% 50%,
                       0% 80%, 20% 100%, 50% 70%,
                       80% 100%, 100% 80%, 70% 50%,
                       100% 20%, 80% 0%, 50% 30%);
    animation: cross 2.5s linear infinite;
}
@keyframes handle {
    0%{
        transform: rotate(0deg);
    }
    25%{
        transform: rotate(-30deg);
    }
    50%{
        transform: rotate(0deg);
    }
    75%{
        transform: rotate(30deg);
    }
    100%{
        transform: rotate(0deg);
    }
}
@keyframes cross {
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}

At last, create a Javascript file with the name script.js and paste the given code into your Javascript file. Note it, you’ve to create a file with a .js extension.

JavaScript

  setInterval(setClock, 1000);

const hour_hnd = document.querySelector('.hour');
const min_hnd = document.querySelector('.min');
const sec_hnd = document.querySelector('.sec');

function setClock(){
    const currentdate = new Date();
    const sec = currentdate.getSeconds()/60;
    const min = (sec + currentdate.getMinutes())/60;
    const hour = (min + currentdate.getHours())/12;

    setRotation(hour_hnd, hour);
    setRotation(min_hnd, min);
    setRotation(sec_hnd, sec);
}

function setRotation(element, rotationRatio){
    element.style.setProperty('--rotate', rotationRatio * 360);
}

That’s all, now you’ve successfully created a Real-Time Pendulum Clock with Javascript. If your code does not work or you’ve faced any errors/problems then please comment down. If you feel this article had helped you, please share it with your friends.

You Might Also Like

Video Tutorial of Real-Time Pendulum Clock with Javascript

Real-Time Pendulum Clock with Javascript [Source Codes]

HTML

CSS

Post a Comment

Post a Comment

About Us

Contact Form