Modern Digital Clock Using HTML, CSS and JavaScript

Digital Clock

Table of Contents

Introduction

Here we will make a modern digital clock today. using HTML, CSS, and JavaScript that will show the current time with 100% accuracy. This is very useful, as you will see this type of clock in many websites, clock alarms, etc. to see the
exact time.

HTML

First, we will make the structure of a digital clock. in HTML. In this, we will make 3-parent div 1st for
hour, 2nd for minute, and 3rd for second, and we will Also, make a mode section for dark and light modes. with logos. Another div will be shown here. AM and PM.

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Digital Clock Dark/Light</title>
  <link rel="stylesheet" href="style.css">
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css'><link rel="stylesheet" href="./style2.css">

</head>
<body>

<section>

  <div class="container">
    <div class="icons">
      <i class="fas fa-moon"></i>
      <i class="fas fa-sun"></i>
    </div>
    <div class="time">
      <div class="time-colon">
        <div class="time-text">
          <span class="num hour_num">08</span>
          <span class="text">Hours</span>
        </div>
        <span class="colon">:</span>
      </div>
      <div class="time-colon">
        <div class="time-text">
          <span class="num min_num">45</span>
          <span class="text">Minutes</span>
        </div>
        <span class="colon">:</span>
      </div>
      <div class="time-colon" >
        <div class="time-text"id="animation">
          <span class="num sec_num" >06</span>
          <span class="text">Seconds</span>
        </div>
        <span class="am_pm">AM</span>
      </div>
    </div>
  </div>

</section>

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

</body>
</html>

CSS

After making the structure of a digital clock, now we will design the clock with CSS (an external stylesheet). attached with an HTML file. In CSS, we will take the clock to the center of the screen, and then we will give it styling. like giving background color,text color,font size, and style ,box shadow and box border.

/* Google fonts import link */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Orbitron', sans-serif;
  transition: all 0.4s ease;
}
section{
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F0F8FF;
  padding: 0 20px;
}
section.dark{
  background: #000000;
}
section .container{
  display: flex;
  align-items center;
  justify-content: center;
  height: 220px;
  max-width: 560px;
  width: 100%;
  background: #fff;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  position: relative;
}
section.dark .container{
  background: #323840;
}
section .container .icons i{
  position: absolute;
  right: 17px;
  top: 17px;
  height: 30px;
  width: 30px;
  background: #24292D;
  color: #fff;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
}
section.dark .container .icons i{
  background: #fff;
  color: #323840;
}
.container .icons i.fa-sun{
  opacity: 0;
  pointer-events: none;
}
section.dark .container .icons i.fa-sun{
  opacity: 1;
  pointer-events: auto;
  font-size: 16px;
}
section .container .time{
  display: flex;
  align-items: center;
}
.container .time .time-colon{
  display: flex;
  align-items: center;
  position: relative;
}
.time .time-colon .am_pm{
  position: absolute;
  top: 0;
  right: -50px;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 1px;
}
section.dark .time .time-colon .am_pm{
  color: #fff;
}
.time .time-colon .time-text{
  height: 100px;
  width: 100px;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  background: #F0F8FF;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
section.dark .time .time-colon .time-text{
  background: #24292D;
}
.time .time-colon .time-text,
.time .time-colon .colon{
  font-size: 35px;
  font-weight: 600;
}
section.dark .time .time-text .num,
section.dark .time .colon{
  color: #fff;
}
.time .time-colon .colon{
  font-size: 40px;
  margin: 0 10px;
}
.time .time-colon .time-text .text{
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
}
section.dark  .time .time-colon .text{
  color: #fff;
}

/* animaition in second */

#animation{
  animation:second 1s 0s infinite ease-in;
}
@keyframes second{
         0%{
               background-color: rgb(144, 187, 181);
               color: black;
         }
         100%{
          background-color: #2f8462;

        color: #24292D;
         }
} 

Animation

It is the framework that CSS uses for giving animation in  webpages. In animation, we will give a changing color effect. to the second div, in which the background color of the div will change every second. 

Javascript

In JavaScript, we will make it workable. like a real clock and show the current time. First we will target the mode to change the mode from dark to light or light to dark. Then we will target the hour,minute and second divs, and will apply the logic in these divs. using functions and writing Javascript algorithms in functions to set the current time in India. The division of AM and PM will also have to set which will show the AM and PM according to time.
period.

let section = document.querySelector("section"),
  icons = document.querySelector(".icons");

icons.onclick = () => {
  section.classList.toggle("dark");
};

// creating a function and calling it in every seconds
setInterval(() => {
  let date = new Date(),
    hour = date.getHours(),
    min = date.getMinutes(),
    sec = date.getSeconds();

  let d;
  d = hour < 12 ? "AM" : "PM"; //if hour is smaller than 12, than its value will be AM else its value will be pm
  hour = hour > 12 ? hour - 12 : hour; //if hour value is greater than 12 than 12 will subtracted ( by doing this we will get value till 12 not 13,14 or 24 )
  hour = hour == 0 ? (hour = 12) : hour; // if hour value is  0 than it value will be 12

  // adding 0 to the front of all the value if they will less than 10
  hour = hour < 10 ? "0" + hour : hour;
  min = min < 10 ? "0" + min : min;
  sec = sec < 10 ? "0" + sec : sec;

  document.querySelector(".hour_num").innerText = hour;
  document.querySelector(".min_num").innerText = min;
  document.querySelector(".sec_num").innerText = sec;
  document.querySelector(".am_pm").innerText = d;
}, 1000); // 1000 milliseconds = 1s

Finally, our modern digital clock is ready to use. You can make such type of clock assigned to you, you just need to take ideas from here. Click the button given below to download the source code.

For more explanation, click on the link to watch the video.

Press the download button to download the source code

2 KB

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow Us

Latest Posts

Quick Links