Digital Clock using HTML CSS & Javascript

Hello readers, Today in this blog you'll learn how to create a Digital Working Clock using Javascript. Earlier I have shared a Working Analog Clock using HTML CSS & Javascript, now it's time to create a Digital Clock using Javascript.

JavaScript gets real-time from your device and displays it on the webpage. And this post is about how JavaScript gets the time and displays with some basics ways. As you can see in the image this is a Digital Clock using Javascript means it shows time in number format. There is a realtime digital clock, which means you can see time in number with hour, minutes, and seconds. And the clock run normally you don’t have to refresh the webpage to see the updated time. There is just time in numbers format and am pm indicator.

Download code here

CSS Code

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,body{
  height: 100%;
}
body{
  display: grid;
  place-items: center;
  background: #131419;
}
.clock{
  background: #131419;
  height: 120px;
  
  line-height: 120px;
  text-align: center;
  padding: 0 30px;
  box-shadow: -3px -3px 7px rgba(255,255,255,0.05),
               3px 3px 5px rgba(0,0,0,0.5);
}
.clock .display{
  font-size: 60px;
  color: cyan;
  letter-spacing: 5px;
  font-family: 'Orbitron', sans-serif;
}

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>Digital Clock Javascript | Mirulcoding</title>
   
  </head>
  <body>
    <div class="clock">
      <div class="display">
</div>
</div>
<script>
      setInterval(function(){
        const clock = document.querySelector(".display");
        let time = new Date();
        let sec = time.getSeconds();
        let min = time.getMinutes();
        let hr = time.getHours();
        let day = 'AM';
        if(hr > 12){
          day = 'PM';
          hr = hr - 12;
        }
        if(hr == 0){
          hr = 12;
        }
        if(sec < 10){
          sec = '0' + sec;
        }
        if(min < 10){
          min = '0' + min;
        }
        if(hr < 10){
          hr = '0' + hr;
        }
        clock.textContent = hr + ':' + min + ':' + sec + " " + day;
      });
    </script>

  </body>
</html>

Digital Clock using HTML CSS & Javascript

Post a Comment

Post a Comment

Contact Form