Build Analog Clock Using Html Css And Javascript

Creating an analog clock using HTML, CSS, and JavaScript is a great way to improve your programming skills and gain valuable web development experience.

Today in this blog you will learn how to create an analog clock using HTML, CSS and JavaScript. I also provide the download source code in bottom on the blog post.

The analog clock we build will have a user interface identical to the illustration provided. Additionally, I will share with you all the HTML, CSS and JavaScript code that I use to create this clock.

Table of Contents

How to Create Analog Clock in html css and javascript

In this tutorial, I will show you how to create analog clock using html css and javascript. this is the very easy way to learn analog clock with javascript.

I strongly suggest that you learn this tutorial to build this Analog Clock using HTML, CSS, and JavaScript. However, if you prefer to skip the video tutorial, you may proceed with reading the blog.

Steps for creating Analog Clock

To create Analog Clock, follow the given steps line by line:

Create a folder. You can name this folder what ever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css
Create a script.js file. The file name must be script and its extension .js

Once you create these files, paste the given codes into the specified files. If you don’t want to do these then scroll down and download the Analog Clock by clicking on the given download button.

First, paste the following codes into your index.html file.

Create HTML Page

index.html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>How to Create Analog Clock using html css and javascript</title>
   <link href="style.css" rel="stylesheet">
</head>
<body>

   <div class="container">
      <div class="clock">
         <span style="--i:1;"><b>1</b></span>
         <span style="--i:2;"><b>2</b></span>
         <span style="--i:3;"><b>3</b></span>
         <span style="--i:4;"><b>4</b></span>
         <span style="--i:5;"><b>5</b></span>
         <span style="--i:6;"><b>6</b></span>
         <span style="--i:7;"><b>7</b></span>
         <span style="--i:8;"><b>8</b></span>
         <span style="--i:9;"><b>9</b></span>
         <span style="--i:10;"><b>10</b></span>
         <span style="--i:11;"><b>11</b></span>
         <span style="--i:12;"><b>12</b></span>
      </div>
   </div>
   <div style="--color:#ff3d58; --height:100px; --width:8px" id="hour" class="hand"><i></i></div>
   <div style="--color:#00a6ff; --height:110px; --width:6px" id="minute" class="hand"><i></i></div>
   <div style="--color:#ffffff; --height:120px; --width:4px" id="second" class="hand"><i></i></div>
   
   <script src="javascript.js"></script>
</body>
</html>

Create CSS Page

Second, paste the following codes into your style.css file.

style.css

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: rgb(59, 57, 57);
  color: #ffffff;
}

.container{
  position: relative;
}

.clock{
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background-color: rgb(255, 255, 255, 0.1);
  border:2px solid rgb(255, 255, 255, 0.25);
  box-shadow: rgba(180, 172, 172, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
}

.clock span{
  position: absolute;
  transform: rotate(calc(30deg * var(--i)));
  inset: 12px;
  text-align: center;
}

.clock span b{
  transform: rotate(calc(-30deg * var(--i)));
  display: inline-block;
  font-size: 24px;
  padding: 5px;
}

.clock::before{
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #ffffff;
  z-index: 2;
}
.hand{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.hand i{
  position: absolute;
  background-color: var(--color);
  width: var(--width);
  height: var(--height);
  border-radius: 8px;

}

Create Javascript Page

Third, paste the following codes into your script.js file.

javascript.js

let hour = document.getElementById('hour');
let minute = document.getElementById('minute');
let second = document.getElementById('second');

function displayClock(){

   // Getting hour, minute and second from date function
   let date = new Date();
   
   let hh = date.getHours();
   let mm = date.getMinutes();
   let ss = date.getSeconds();

   let hRotation = 30*hh + mm/2;
   let mRotation = 6*mm;
   let sRotation = 6*ss;

   hour.style.transform = `rotate(${hRotation}deg)`;
   minute.style.transform = `rotate(${mRotation}deg)`;
   second.style.transform = `rotate(${sRotation}deg)`;
}

setInterval(displayClock, 1000);

That’s all, now you’ve successfully created a project on Analog Clock. If your code doesn’t work or you have faced any problems, please download the source code files from the given download button. It’s free and a zip file containing the project folder with source code files will be downloaded.

Download Source Code

You can always support by sharing on social media or recommending my blog to your friends and colleagues. If you have any suggestions or problems about this tutorial, please comment on the form below.😊