How to Create An Analog Clock using HTML, CSS And JavaScript

Hello, readers! In this article, you'll learn How To Create An Analog Clock Using HTML, CSS And Javascript. An analog clock has hands on a dial that show the hours, minutes, and occasionally seconds. To determine the time, you must interpret it by calculating the position of the minute, hour, and seconds.

It will be very useful project for the beginners who are interested in web development and designing. If you are begineer then I'll recommend you to not just copy and paste the entire code, Please take an idea of the project and do it yourself, It will be helpful for you in the future.

Demo

Without Wasting any time let's begin Making Our Simple analog Clock usnig HTML, CSS And Javascript. We Will Make Three files for it (HTML Document, A CSS Document, And JavaScript Document).

Benefits of using this Project

• Skill enhancement
• Improves creativity
• It's fun & Interesting
• It improves your ability to solve problems.
• Enhancing creative skills
• Gain A lot of Experience
• Constantly making changes
• Long work hours
• Use of many programming languages

Where to use this Analog Clock Project

You can use this project anywhere. You can also use it on your website. I will also tell you how to use it in the Blogger Website below. You can enhance your skills by modifying this project in different ways, which will be of great benefit to you. This Project Analog Clock using HTML, CSS And JavaScript can be used as a presentation in college or universities

How to Create An Analog Clock using HTML, CSS And JavaScript

We are going to create this Analog Clock in just three Simple Steps.

1. HTML Setup

   So First step would be to add HTML, or Hypertext Markup Language, to Design a Basic Analog Clock Structure. With the help of HTML we can design The Analog Clock Webpage's fundamental structure and classes for the clock's components are contained in this straightforward file.

   In order to create the Analog Clock using HTML, CSS And JavaScript, structure, we must first make use of all of its components and attributes. Our first step in creating the Analog Clock using HTML, CSS And JavaScript will be this HTML code. Later, we will understand how to code the CSS component to include styling and align the tags.

   The code is provided for you to use immediately whatever you want. You can copy the code below and start using it.

<div class="clock">
   <div class="hour">
      <div class ="hr" id="hr"></div>
   </div>
   <div class="min">
      <div class="mn" id="mn" ></div>
   </div>
   <div class="sec">
       <div class="sc" id="sc"></div>
   </div>
</div>

Output Till Now:-

2. CSS Setup

   Now we have html classes, we have to write CSS for it. We have the CSS code, which we have styled to fit the structure of the Analog Clock using HTML, CSS And JavaScript. Also, we have adjusted and situated the CSS code so it is appropriately situated and doesn't become jumbled with proper CSS components. Let's have a look below the CSS code for Analog Clock.

/* Analog Clock by Informatology.eu.org */

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

.clock{
    width: 350px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("https://github.com/Thoda-sa-pagal/analog-clock/blob/main/clock.png?raw=true");
    background-size: cover;
    border: 5px solid #ebf5fa;
    border-radius: 50%;
    box-shadow: 0 -15px 15px rgba(255,255,255,0.05),
                inset 0 -10px 10px rgba(255,255,255,0.05),
                0 4px 15px rgba(0, 0, 0, 0.3),
                inset 0 4px 10px rgba(0, 0, 0, 0.3);
}

.clock:before{
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: #008EFF;
    border-radius: 50%;
    z-index: 10000;
}

.clock .hour,
.clock .min,
.clock .sec{
    position: absolute;
}

.clock .hour, .hr{
    width: 160px;
    height: 160px;
}

.clock .min, .mn{
    width: 190px;
    height: 190px;
}

.clock .sec, .sc{
    width: 230px;
    height: 230px;
}

.hr, .mn, .sc{
    display: flex;
    justify-content: center;
    /* align-items: center; */
    position: absolute;
    border-radius: 50%;
}

.hr:before{
    content: '';
    position: absolute;
    width: 8px;
    height: 80px;
    background: black;
    border-radius: 6px 6px 0 0;
    z-index: 10;
}

.mn:before{
    content: '';
    position: absolute;
    width: 4px;
    height: 90px;
    background: black;
    border-radius: 6px 6px 0 0;
    z-index: 11;
}

.sc:before{
    content: '';
    position: absolute;
    width: 2px;
    height: 150px;
    background: #008EFF;
    border-radius: 6px 6px 0 0;
    z-index: 12;
}

Output till now

3. Javascript Setup

   The project's final phase was JavaScript, which we added logic to and coded in accordance with the requirements, with a few conditions. In addition, we have developed const declaration that store the responses and used the let keyword to explain the logic behind the analog clock's rotation.

   Below is the Simple JavaScript code for the Analog Clock, copy and paste it.

const deg = 6;
  const hr = document.querySelector('#hr');
  const mn = document.querySelector('#mn');
  const sc = document.querySelector('#sc');

setInterval(() => {

   let day = new Date();
   let hh = day.getHours() * 30;
   let mm = day.getMinutes() * deg;
   let ss = day.getSeconds() * deg;

   hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
   mn.style.transform = `rotateZ(${mm}deg)`;
   sc.style.transform = `rotateZ(${ss}deg)`;
})

Final Output:-

You can use this project in Blogger Website also. Follow the below instructions to use it.

How to use Analog Clock Script in Blogger

You can easily use this project in blogger. Simply follow the instructions given below.

1. : Most importantly Login into your Blogger Dashboard.
2. : On Blogger Dashboard, click on Pages.
3. : Click on the New Page button.
4. : Now switch Page view in HTML Mode via clicking on the down arrow icon on the top left side.
5. : Give Page a title which you like. I'll give the page title Analog Clock
6. : Now Copy the the following Source Code and paste it into the Page.

<style media="screen">
/* Analog Clock by Informatology.eu.org */

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

.clock{
    width: 350px;
    height: 350px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: url("https://github.com/Thoda-sa-pagal/analog-clock/blob/main/clock.png?raw=true");
    background-size: cover;
    border: 5px solid #ebf5fa;
    border-radius: 50%;
    box-shadow: 0 -15px 15px rgba(255,255,255,0.05),
                inset 0 -10px 10px rgba(255,255,255,0.05),
                0 4px 15px rgba(0, 0, 0, 0.3),
                inset 0 4px 10px rgba(0, 0, 0, 0.3);
}

.clock:before{
    content: '';
    position: absolute;
    width: 15px;
    height: 15px;
    background: #008EFF;
    border-radius: 50%;
    z-index: 10000;
}

.clock .hour,
.clock .min,
.clock .sec{
    position: absolute;
}

.clock .hour, .hr{
    width: 160px;
    height: 160px;
}

.clock .min, .mn{
    width: 190px;
    height: 190px;
}

.clock .sec, .sc{
    width: 230px;
    height: 230px;
}

.hr, .mn, .sc{
    display: flex;
    justify-content: center;
    /* align-items: center; */
    position: absolute;
    border-radius: 50%;
}

.hr:before{
    content: '';
    position: absolute;
    width: 8px;
    height: 80px;
    background: black;
    border-radius: 6px 6px 0 0;
    z-index: 10;
}

.mn:before{
    content: '';
    position: absolute;
    width: 4px;
    height: 90px;
    background: black;
    border-radius: 6px 6px 0 0;
    z-index: 11;
}

.sc:before{
    content: '';
    position: absolute;
    width: 2px;
    height: 150px;
    background: #008EFF;
    border-radius: 6px 6px 0 0;
    z-index: 12;
}

    </style>


 <div class="clock">
   <div class="hour">
      <div class ="hr" id="hr"></div>
   </div>
   <div class="min">
      <div class="mn" id="mn" ></div>
   </div>
   <div class="sec">
       <div class="sc" id="sc"></div>
   </div>
</div>

<script>
  const deg = 6;
  const hr = document.querySelector('#hr');
  const mn = document.querySelector('#mn');
  const sc = document.querySelector('#sc');

setInterval(() => {

   let day = new Date();
   let hh = day.getHours() * 30;
   let mm = day.getMinutes() * deg;
   let ss = day.getSeconds() * deg;

   hr.style.transform = `rotateZ(${(hh)+(mm/12)}deg)`;
   mn.style.transform = `rotateZ(${mm}deg)`;
   sc.style.transform = `rotateZ(${ss}deg)`;
})</script>

7. After that click on publish button
8. Done you have successfully added An Analog Clock using HTML, CSS And JavaScript in blogger website.

Final Words

We have created our Analog clock Using HTML, CSS, and JavaScript successfully. By copying this project into your IDE, you can use it immediately. We hope you understood the project; please let us know if you have any questions or concerns!

I hope this is of use to you, guys. We hope that this How to Create An Analog Clock using HTML, CSS And JavaScript will be of use to you. Please forward this article to your friends if you enjoyed it.

Feel free to leave a comment below or get in touch with us if you have any questions about this. Add your support for our website and share this post as widely as you can.