Analog Clock using javascript poject

Simple Analog Clock Using HTML , CSS And Javascript

Simple Analog Clock Using HTML, CSS, And Javascript

Hello, coders👨‍💻!! In this article, I’ll show you how to create an analog clock with HTML, CSS, and JavaScript code. There are three hands to indicate the hours, minutes, and seconds, just like on a traditional analog clock. I used a combination of symbols and numbers in this case (3,6,9,12). We have also added the date and day to our clock.

This clock was created entirely with CSS. There were no images used. We created it using the most fundamental concept, which is easily understood by beginners.

Analog Clock Using HTML , CSS And Javascript
Analog Clock Using HTML, CSS, And Javascript

 

Basic Concepts of the Analog Clock

What is an Analog Clock?

An analog clock is a round-shaped dialed watch that was mostly created in the 1990s for determining times. Analog-type face watches contain numerics from 1 to 12, along with some black line strips where bold stripes tell about hours and small strips indicate intermediate times. Mostly, we see physical analog watches that we can wear on our hands, but we will be using JavaScript and CSS to make similar web analog watches for a front-end project.

What is the use of this type of project?

This type of project helps developers clear their frontend concepts by working on this type of small project. It enhances user javascript time concepts to fetch exact time through the user’s browser and also enhances design skills through the building of different styles of watches.

The page’s structure was created with HTML and CSS, and the automatic time is retrieved with JavaScript.

To watch the live preview look at the live demo below👇.

[Live Demo]

I’ve included a step-by-step breakdown of how I created this Javascript analog clock. First, you must create an HTML and CSS file. Make sure to include your CSS file with the HTML file.

Step1: Creating The Basic Structure of the Clock 

<div class="clock">


</div>

We added a block-level element for our clock using the Basic tag. We will now style and add the basic structure to our clock using the (.clock) class.

.clock {
  background: #ececec;
  width: 300px;
  height: 300px;
  margin: 8% auto 0;
  border-radius: 50%;
  border: 14px solid #333;
  position: relative;
  box-shadow: 0 2vw 4vw -1vw rgba(0,0,0,0.8);
}

We’ve added a background color “white” and set the width and height of our clock to “300px” of our clock. We also increased the border radius to 50% and added a solid 14px border in dark charcoal. The position is set to relative. In addition, we added some box shadows to our clock.

Analog Clock Using HTML , CSS And Javascript
Clock Structure

 

Step2: Adding the date and dialine to our clock

    <div>
      <div class="info date"></div>
      <div class="info day"></div>
    </div>
    <div class="dot"></div>
    <div>
      <div class="hour-hand"></div>
      <div class="minute-hand"></div>
      <div class="second-hand"></div>
    </div>
    <div>
      <span class="h3">3</span>
      <span class="h6">6</span>
      <span class="h9">9</span>
      <span class="h12">12</span>
    </div>
    <div class="diallines"></div>

The first two div tags are added here to display the date and day in our analog clock. We will add a dot at the center of our clock using the (.dot) class div, which will hold the hands of our clock. We will now add the hour, minute, and second hands to our clock using the div tag to show the display in the clock. We will add the most important time using the span tag, such as (3,6,9,12). Finally, we’ll use the div tag to add the remaining dialog boxes.

Portfolio Website Using HTML CSS And JAVASCRIPT ( Source Code)

Now we’ll use CSS to style our clock hands and dials.

  • We will add the width and height as “14px” using the dot class. We also changed the border-radius to “50%” and the background colour to “silvergrey.” The dot has been added to the centre, and position is defined as “absolute.” We’ve added the Z-index to make the dot stand out more, and we’ve also given it a box-shadow.
.dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #ccc;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  position: absolute;
  z-index: 10;
  box-shadow: 0 2px 4px -1px black;
}
  • Using CSS, we will add the hour, minute, and second hands to our clock. We’ll add the hour hand with (.hour). The position has been added as “absolute” with a z index of “5”. We’ve added the width “4px” and height “65px” dimensions. We’ve given our hour hand a “black” background. Using the top property, we added and moved the hour hand “79px” from the top. Using the “transform origin” property, we will centre the hour hand, and we have set the top-left and top-right-radius to “50%” to give our clock hand a sharp pointer look.
  • We followed the same method to create our minute and second hand to our clock.
Simple Analog Clock Using HTML , CSS And Javascript
Analog Clock CSS
  • Now we’ll add the dialline and number to our clock. Using the span tag, we will add the common style to our clock number. The display is set to “inline-block” and the position is set to “absolute.” We will add black to our colour scheme. The font size of the clock number dials is “22px.” We also added the z-index to our numbers.
  • Now we will position our dial number using the defined classes (.h12,.h6,.h3,.h9).
  • The diallines will be added to our remaining dial. We defined the position as absolute. The width is “2px,” the height is “15px,” and the background colour is “charcol black.”
.hour-hand {
  position: absolute;
  z-index: 5;
  width: 4px;
  height: 65px;
  background: #333;
  top: 79px;
  transform-origin: 50% 72px;
  left: 50%;
  margin-left: -2px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
}

.minute-hand {
  position: absolute;
  z-index: 6;
  width: 4px;
  height: 100px;
  background: #666;
  top: 46px;
  left: 50%;
  margin-left: -2px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  transform-origin: 50% 105px;
}

.second-hand {
  position: absolute;
  z-index: 7;
  width: 2px;
  height: 120px;
  background: gold;
  top: 26px;
  lefT: 50%;
  margin-left: -1px;
  border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  transform-origin: 50% 125px;
}

span {
  display: inline-block;
  position: absolute;
  color: #333;
  font-size: 22px;
  font-family: 'Poiret One';
  font-weight: 700;
  z-index: 4;
}

.h12 {
  top: 30px;
  left: 50%;
  margin-left: -9px;
}
.h3 {
  top: 140px;
  right: 30px;
}
.h6 {
  bottom: 30px;
  left: 50%;
  margin-left: -5px;
}
.h9 {
  left: 32px;
  top: 140px;
}

.diallines {
  position: absolute;
  z-index: 2;
  width: 2px;
  height: 15px;
  background: #666;
  left: 50%;
  margin-left: -1px;
  transform-origin: 50% 150px;
}
.diallines:nth-of-type(5n) {
  position: absolute;
  z-index: 2;
  width: 4px;
  height: 25px;
  background: #666;
  left: 50%;
  margin-left: -1px;
  transform-origin: 50% 150px;
}

 

Simple Analog Clock Using HTML , CSS And Javascript
Simple Analog Clock

 

  • Now we will style our display to show the date and day of our clock.
.info {
  position: absolute;
  width: 120px;
  height: 20px;
  border-radius: 7px;
  background: #ccc;
  text-align: center;
  line-height: 20px;
  color: #000;
  font-size: 11px;
  top: 200px;
  left: 50%;
  margin-left: -60px;
  font-family: "Poiret One";
  font-weight: 700;
  z-index: 3;
  letter-spacing: 3px;
  margin-left: -60px;
  left: 50%;
}
.date {
    top: 80px;
  }
.day {
    top: 200px;
}

Step3: Activating the time in the analog clock using Javascript

We have completed the design of this analog clock. This watch will now be implemented using JavaScript. we have only used JavaScript to execute the hands on this watch. This design is simple enough for a beginner to grasp. I’ve provided a detailed explanation of why I used each code below.

Now using the variable diallines, ClockEl which will contain the value of dialline and clock which we have selected using the document.getElementByClassName() .

var dialLines = document.getElementsByClassName('diallines');
var clockEl = document.getElementsByClassName('clock')[0];

We will run a loop with the for loop, and if the value of I is less than or equal to 60, the dials will rotate 6 degrees every second.

for (var i = 1; i < 60; i++) {
  clockEl.innerHTML += "<div class='diallines'></div>";
  dialLines[i].style.transform = "rotate(" + 6 * i + "deg)";
}

Now we’ll create a function called clock ().

ADVERTISEMENT

We’ll add an array of weekdays inside the function.

ADVERTISEMENT

new Date() creates an instance of the Date class from which we can obtain information such as the current date, hours, minutes, seconds, and so on.

ADVERTISEMENT

Now we will be creating different variables that will store the value of hours, minutes, second. which we will fetch using methods like .getHours() , .getMinutes() etc.

ADVERTISEMENT

function clock() {
  var weekday = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday"
      ],
      d = new Date(),
      h = d.getHours(),
      m = d.getMinutes(),
      s = d.getSeconds(),
      date = d.getDate(),
      month = d.getMonth() + 1,
      year = d.getFullYear(),

Now we’ll add rotation to our clock hands, as well as some variables that hold the value of our date, day, and other HTML elements using their classes, and we’ll get the value of day from the getday() method.

ADVERTISEMENT

Finally, we will call our function with a specified interval using the set interval method; in this case, we have specified an interval of 100 milliseconds.

We now have the functionality to our analog clock. Let’s watch a quick video to see how it works.

Final Output Of Analog Clock Using Javascript: 

 

Live Preview Analog Clock using javascript project


Now We have Successfully created our Analog Clock using a javascript project.  We hope you understood the project, If you have any doubts feel free to comment!!

If you find this Blog helpful, then make sure to search code random on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Written By : @arun
Code By : @Vasko Petrov

What is an Analog Clock?

An analog clock is a round-shaped dialed watch that was mostly created in the 1990s for determining times. Analog-type face watches contain numerics from 1 to 12, along with some black line strips where bold stripes tell about hours and small strips indicate intermediate times. Mostly, we see physical analog watches that we can wear on our hands, but we will be using JavaScript and CSS to make similar web analog watches for a front-end project.

What is the use of this type of project?

This type of project helps developers clear their frontend concepts by working on this type of small project. It enhances user javascript time concepts to fetch exact time through the user’s browser and also enhances design skills through the building of different styles of watches.



Leave a Reply