Building a Realistic Analog Clock in JavaScript

Analog clocks are a type of clock that display the time using a traditional clock face with moving hands. These types of clocks can be created using JavaScript, along with HTML and CSS, to create a dynamic and interactive user interface.

To create an analog clock in JavaScript, you would typically use the DOM (Document Object Model) to manipulate the HTML and CSS of the clock. This would involve creating a container element (such as a div) to hold the clock, and then using JavaScript to dynamically update the position of the clock hands based on the current time.

JavaScript can be used to retrieve the current time, either by using the built-in Date object or by making an API call to a timekeeping service. The position of the clock hands can then be calculated based on the current time and applied to the clock face using CSS styles.

Overall, creating an analog clock in JavaScript can be a fun and engaging project that can help you learn more about JavaScript, HTML, CSS, and front-end web development in general.

Source Code

<!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">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="analog-clock">
      <div class="needle hrs"></div>
      <div class="needle min"></div>
      <div class="needle sec"></div>

      <div class="number number-1">1</div>
      <div class="number number-2">2</div>
      <div class="number number-3">3</div>
      <div class="number number-4">4</div>
      <div class="number number-5">5</div>
      <div class="number number-6">6</div>
      <div class="number number-7">7</div>
      <div class="number number-8">8</div>
      <div class="number number-9">9</div>
      <div class="number number-10">10</div>
      <div class="number number-11">11</div>
      <div class="number number-12">12</div>

    </div>



  <script src="js/script.js"></script>
</body>
</html>

css/style.css

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Lobster&family=Poppins:wght@300;400;500;700&display=swap');

@font-face {
  font-family: Choco Truffle Demo;
  src: url('ChocoTruffleDemoRegular.ttf');
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;

}

:root{
  --theme-color:#EA2027;
}

body{
  background-color: #2f3640;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.analog-clock{
    width: 500px;
    height: 500px;
    background-image: url('../images/bg.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 50%;
    border:10px ridge var(--theme-color);
    position: relative;
}

.analog-clock::before{
  content:'Ajanta';
  color: var(--theme-color);
  position: absolute;
  top:20%;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 30px;
  font-family: 'Lobster', cursive;

}

.analog-clock::after{
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  background-color:var(--theme-color);
  border-radius: 50%;
  top:50%;
  left: 50%;
  transform: translate(-50%,-50%);
  z-index: 10;
}

.number{
  --rotate:0;
  position: absolute;
  width: 100%;
  height: 100%;
  color:var(--theme-color);
  text-align: center;
  font-size: 30px;
  transform: rotate(var(--rotate));
  font-family: 'Anton', sans-serif;

}

.number-1{ --rotate:30deg;}
.number-2{ --rotate:60deg;}
.number-3{ --rotate:90deg;}
.number-4{ --rotate:120deg;}
.number-5{ --rotate:150deg;}
.number-6{ --rotate:180deg;}
.number-7{ --rotate:210deg;}
.number-8{ --rotate:240deg;}
.number-9{ --rotate:270deg;}
.number-10{ --rotate:300deg;}
.number-11{ --rotate:330deg;}


.needle{
  --rotation:0;
  position: absolute;
  bottom: 50%;
  left: 50%;
 
  transform-origin: bottom;
  transform: translateX(-50%) rotate(calc(var(--rotation)*1deg));
  z-index: 8;
  border-top-left-radius:50%;
  border-top-right-radius:50%;
}


.sec{
  background-color: black;
  width: 3px;
  height: 40%;
}


.min{
  background-image: url('../images/min.png');
  background-size: cover;
  width: 50px;
  height: 40%;
}


.hrs{
  background-image: url('../images/hrs.png');
  background-size: cover;
  width: 50px;
  height: 25%;
}

The above code is using JavaScript to create an analog clock. It uses the setInterval method to run a function called runClock every second. The runClock function retrieves the current time using the built-in Date object, and calculates the rotation of each clock hand based on the current time.

First, it selects the clock hands by querying the DOM for elements with the class name hrs, min, and sec respectively, and assigns it to the variables hour, minute, and second. Then, it uses the setInterval method to run the runClock function every 1000 milliseconds (or one second). This is what updates the clock hands to show the current time.

Within the runClock function, it creates a new Date object, which will represent the current time. It then retrieves the current seconds, minutes, and hours using the getSeconds(), getMinutes(), and getHours() methods respectively. The code then calculates the rotation of the clock hands using the following logic:

sec is the current seconds divided by 60, which gives the percentage of the current minute that has passed.
min is the current minutes plus the percentage of the current minute that has passed, divided by 60, which gives the percentage of the current hour that has passed.
hrs is the current hours plus the percentage of the current hour that has passed, divided by 12, which gives the percentage of the current day that has passed.

js/script.js

const hour=document.querySelector('.hrs');
const minute=document.querySelector('.min');
const second=document.querySelector('.sec');

setInterval(runClock,1000);

function runClock(){
  const time=new Date();
  const sec=time.getSeconds()/60;
  const min=(sec+time.getMinutes())/60;
  const hrs=(min+time.getHours())/12;
  hour.style.setProperty('--rotation',hrs*360);
  minute.style.setProperty('--rotation',min*360);
  second.style.setProperty('--rotation',sec*360);

}

runClock();

Output

Live Preview

Finally, the code uses the style.setProperty method to set the --rotation CSS variable for each clock hand element to the calculated rotation value, in degrees.

The runClock function is called once at the end of the script so that the clock is displayed as soon as the page is loaded.