Analog Clock using HTML CSS & Javascript

Hello reader, Today in this blog you'll learn how to Build A Working Analog Clock using HTML CSS and Javascript. Previously I have shared a Responsive Footer Section Design using HTML and CSS. Now it's time to make an analog clock using javascript.

You can tell JavaScript is the core of any web page, in other words, without JavaScript, a web page just is a dead body. We can create so many basic to high-level program only using JavaScript (without any javascript libraries).

As you can in the image, this is an Analog Clock using HTML CSS & Javascript. This is a real-time clock, not a dummy. You can find the clock program, but you will get most just CSS stuff. Just a vector of the clock. But I am sharing a live clock, which functions is work in javascript.

>CSS file

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
 *{
  margin: 0;
  padding: 0;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #00a2ff;
}
.clock{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 250px;
  height: 250px;
  background: #e9fcfc;
  border-radius: 50%;
  border: 16px solid #303030;
  box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.8);
}
.clock:before{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: '';
  width: 259px;
  height: 259px;
  border: 6px solid #202020;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.clock:after{
  position: absolute;
  content: '';
  height: 150px;
  width: 150px;
  border-radius: 50%;
  background: #59c3ff;
  z-index: 1;
}
.center-nut,.center-nut2{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.center-nut{
  height: 15px;
  width: 15px;
  background: #262626;
  z-index: 2;
}
.center-nut2{
  width: 9px;
  height: 9px;
  background: red;
  z-index: 6;
}
.indicator div{
  position: absolute;
  width: 2px;
  height: 5px;
  background: #404040;
}
.indicator div:nth-child(1) {
  transform: rotate(30deg) translateY(-113px);
}
.indicator div:nth-child(2) {
  transform: rotate(60deg) translateY(-113px);
}
.indicator div:nth-child(3) {
  transform: rotate(90deg) translateY(-113px);
  background: red;
}
.indicator div:nth-child(4) {
  transform: rotate(120deg) translateY(-113px);
}
.indicator div:nth-child(5) {
  transform: rotate(150deg) translateY(-113px);
}
.indicator div:nth-child(6) {
  transform: rotate(180deg) translateY(-113px);
  background: red;
}
.indicator div:nth-child(7) {
  transform: rotate(210deg) translateY(-113px);
}
.indicator div:nth-child(8) {
  transform: rotate(240deg) translateY(-113px);
}
.indicator div:nth-child(9) {
  transform: rotate(270deg) translateY(-113px);
  background: red;
}
.indicator div:nth-child(10) {
  transform: rotate(300deg) translateY(-113px);
}
.indicator div:nth-child(11) {
  transform: rotate(330deg) translateY(-113px);
}
.indicator div:nth-child(12) {
  transform: rotate(360deg) translateY(-113px);
  background: red;
}
.sec-hand{
  position: absolute;
  height: 1px;
  width: 1px;
  z-index: 5;
  animation: sec-hand 60s linear infinite;
}
.sec-hand:before{
  position: absolute;
  content: '';
  height: 130px;
  width: 3px;
  left: -1px;
  top: -25px;
  background: red;
  border-radius: 3px;
}
.sec-hand:after{
  position: absolute;
  content: '';
  height: 45px;
  width: 7px;
  left: -3px;
  top: -55px;
  background: red;
  border-radius: 3px;
}
.min-hand{
  position: absolute;
  height: 1px;
  width: 1px;
  z-index: 4;
  animation: min-hand 3600s linear infinite;
}
.min-hand:before{
  position: absolute;
  content: '';
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 70px solid #303030;
  left: -3px;
  top: -95px;
  width: 1px;
  height: 1px;
}
.min-hand:after{
  position: absolute;
  content: '';
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 25px solid #303030;
  left: -3px;
  top: -25px;
  width: 3px;
  height: 1px;
}
.hr-hand{
  position: absolute;
  height: 1px;
  width: 1px;
  z-index: 3;
  animation: hr-hand 43200s linear infinite;
}
.hr-hand:before{
  position: absolute;
  content: '';
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-bottom: 55px solid #303030;
  left: -3px;
  top: -75px;
  width: 1px;
  height: 1px;
}
.hr-hand:after{
  position: absolute;
  content: '';
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 20px solid #303030;
  left: -3px;
  top: -20px;
  width: 3px;
  height: 1px;
}

HTMl Code

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
 
   <!DOCTYPE html>
<!-- Created By Mirulcoding - https://mirulcoding.blogspot.com/ -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <!-- Somehow I got an error, so I comment the title, just uncomment to show -->
    <title>Clock | Mirulcoding</title>
 
    <style id="clock-animate"></style>
  </head>
  <body>
    <div class="clock">
      <div class="center-nut">
</div>
<div class="center-nut2">
</div>
<div class="indicator">
        <div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
<div>
</div>
</div>
<div class="sec-hand">
</div>
<div class="min-hand">
</div>
<div class="hr-hand">
</div>
</div>
<script>
(function() {
  var time = new Date(), //we get this time from our pc time not from server
  second = time.getSeconds() / 60 * 360,
  minute = time.getMinutes() / 60 * 360 + time.getSeconds() / 60 *6,
  hour = time.getHours() / 12 * 360 + time.getMinutes() /60 * 30,
  animation = [
    "@keyframes sec-hand{from{transform: rotate(" + second + "deg);}to{transform: rotate(" + (second  + 360) + "deg);}}",
    "@keyframes min-hand{from{transform: rotate(" + minute + "deg);}to{transform: rotate(" + (minute + 360) + "deg);}}",
    "@keyframes hr-hand{from{transform: rotate(" + hour + "deg);}to{transform: rotate(" + (hour + 360) + "deg);}}"
  ].join("");
  document.querySelector("#clock-animate").innerHTML = animation;
})();

//EXAMPLE TO GET EXACT TIME IN READABLE FORMATE
// function abc(){
//   var time = new Date;
//   var hr = time.getHours();
//   var min = time.getMinutes();
//   var sec = time.getSeconds();
//   alert(hr + "hr " + min + "min " + sec + "sec ");
// }
// abc();
</script>
  </body>
</html>

Analog Clock using HTML CSS & Javascript

Post a Comment

Post a Comment

Contact Form