Home » Analog clock using HTML, CSS, and JavaScript

Analog clock using HTML, CSS, and JavaScript

by techmidpoint
Analog clock using HTML, CSS, and JavaScript

Analog clock using HTML, CSS, and JavaScript

Hello, guys welcome to you another tutorial of techmidpoint. In this tutorial, I am going to show you How to make an analog clock using HTML, CSS, and JavaScript. First, download the given below image and put the same directory of the HTML file then apply the CSS rules.

HTML and JavaScript

<!DOCTYPE html>
<html>
<head>
    <title>Analog Clock</title>
</head>
<body>
  <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; //360deg / 60(min||sec) => 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; //360deg / 12 hour => 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>

</body>
</html> 

CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #091921;
}

.clock {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-image: url("clock.png");
  background-size: cover;
  display: flex;
 
  justify-content: center;
  align-items: center;
  box-shadow: 0 -15px 15px rgba(255, 255, 255, 0.05),
    inset 0 -15px 15px rgba(255, 255, 255, 0.05), 0 15px 15px rgba(0, 0, 0, 0.3),
    inset 0 15px 15px rgba(0, 0, 0, 0.3);
}

.clock::before {
  content: "";
  width: 15px;
  height: 15px;
  position: absolute;
  background-color: #fff;
  border-radius: 50%;
  z-index: 1000;
}

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

.hr {
  width: 160px;
  height: 160px;
}

.mn {
  width: 190px;
  height: 190px;
}

.sc {
  width: 230px;
  height: 230px;
}

.hr,
.mn,
.sc {
  display: flex;
  justify-content: center;
}

.hr::before {
  content: "";
  width: 8px;
  height: 80px;
  background-color: #ff105e;
  z-index: 100;
  border-radius: 5px;
}

.mn::before {
  content: "";
  width: 6px;
  height: 90px;
  background-color: rgb(15, 105, 207);
  z-index: 11;
  border-radius: 5px;
}

.sc::before {
  content: "";
  width: 2px;
  height: 140px;
  background-color: #fff;
  z-index: 10;
  border-radius: 5px;
}

Download Source code

For More Tutorials Please  Click Here

You may also like

Leave a Comment