How to Create a Digital Clock Using HTML, CSS and JavaScript

In this tutorial, we are going to create Digital Clock using HTML, CSS & JavaScript. You have to follow the belowing steps to create digital clock using javascript. In the last tutorial we are created Animated Login Form Using Only HTML & CSS | SignIn Form Design.

Create Digital Clock using HTML & JavaScript

Create a root folder that contains the HTML, CSS, and JavaScript files. You can name the files anything you want. Here the root folder is named digital-clock. According to the standard naming convention, the HTML, CSS, and JavaScript files are named index.htmlstyles.css, and script.js respectively.

index.html


 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Digital Clock Javascript</title>
  <!--Google Font-->
  <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap" rel="stylesheet">
  <!--Stylesheet-->
  <link rel="stylesheet" href="style.css">

</head>
<body>
 <div class="clock">
   <div id="hour">00</div>
   <span>:</span>
   <div id="minute">00</div>
   <span>:</span>
   <div id="seconds">00</div>
 </div>
<!--Script-->
<script src="script.js"></script>
</body>
</html>

style.css


*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    height: 100vh;
    background: linear-gradient(
        135deg,
        #8052ec,
        #d161ff
    );
}
.clock{
    width: 550px;
    height: 150px;
    position: absolute;
    transform: translate(-50%,-50%);
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.clock div{
    position: relative;
    background-color: #ffffff;
    height: 100%;
    width: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Open Sans',sans-serif;
    font-size: 60px;
    color: #202020;
    border-radius: 5px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    letter-spacing: 3px;
}
.clock span{
    font-weight: bolder;
    font-size: 60px;
    color: #ffffff;
}

script.js

This is the JavaScript file. You have to paste below js code to your script.js file.


var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var seconds = document.getElementById("seconds");

var clock = setInterval(
    function time(){
      var date_now = new Date();
      var hr = date_now.getHours();
      var min = date_now.getMinutes();
      var sec = date_now.getSeconds();
      
      if(hr < 10){
          hr = "0" + hr;
      } 
      if(min < 10){
          min = "0" + min;
      } 
      if(sec < 10){
          sec = "0" + sec;
      }

      hour.textContent = hr;
      minute.textContent = min;
      seconds.textContent = sec;



    },1000
);

Also Read : How To Install WordPress Manually in 2022

If you wann to check the demo of this code, then you can check using below demo button.

Click on the following download button to download all source code files of Digital Clock directly on your computer.

Final Words

In this way, we can created the digital clock using html & javascript. You can also get this code on our github account.

Also Read : Top 10 WordPress Magazine Premium Themes in 2022

If you’re a beginner at JavaScript and want to be a good web developer, you need to build some good JavaScript-based projects. They can add value to your resume as well as your career.

How to Create a Digital Clock Using HTML, CSS and JavaScript

Published on 25-Dec-2021 18:45:48

You may also like this!