DEV Community 👩‍💻👨‍💻

Cover image for How to create a digital clock in JavaScript
Stackfindover
Stackfindover

Posted on • Updated on

How to create a digital clock in JavaScript

Hello, guys in this tutorial we will create a digital clock using HTML CSS, and JavaScript.

Common Query

  1. how to make a digital clock in JavaScript
  2. how to write a digital clock in JavaScript
  3. code for the digital clock in JavaScript

Hello, guys In this tutorial we will try to solve above mention query. and also we will learn how to create a digital clock using HTML CSS, and JavaScript.

First, we need to create three files index.html and style.css then we need to do code for it.

Digital clock Step:1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Digital clock using javascript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@200;300;400&display=swap" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>  
    <div class="wrapper">
      <div id="digital_clock" class="glow">00:00:00</div>
    </div>
    <script>
      setInterval(showTime, 1000);

      function showTime(){
        let time = new Date();
        let hr = time.getHours();
        let min = time.getMinutes();
        let sec = time.getSeconds();
        AMPM = 'AM'; 

      if(hr > 12) {
        hr -= 12;
        AMPM = "PM";
      }
      if(hr == 0) {
        hr = 12;
        AMPM = "AM";
      }

      hr = hr < 10 ? "0" + hr : hr;
      min = min < 10 ? "0" + min : min;
      sec = sec < 10 ? "0" + sec : sec;

      let curentTime = hr + ":" + min + ":" + sec + AMPM; 

      document.getElementById('digital_clock').innerHTML = curentTime;

    }
    showTime();
    </script>
  </body>
</html>
Enter fullscreen mode Exit fullscreen mode

Digital clock Step:2

Then we need to add code for style.css which code I provide in the below screen.

* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-family: 'IBM Plex Sans', sans-serif;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #000;
}
.glow {
  font-size: 60px;
  color: #fff;
  font-weight: bold;
  animation: glow 1s ease-in-out infinite alternate;
  -moz-animation: glow 1s ease-in-out infinite alternate;
  -webkit-animation: glow 1s ease-in-out infinite alternate;
}

@keyframes glow {
  0% {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073, 0 0 50px #e60073, 0 0 60px #e60073, 0 0 70px #e60073;
  }
  100% {
    text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #534dff, 0 0 40px #534dff, 0 0 50px #534dff, 0 0 60px #534dff, 0 0 70px #534dff;
  }
}
Enter fullscreen mode Exit fullscreen mode

Digital clock Video Output:

Digital clock Codepen Output:

Top comments (0)

🌚 Life is too short to browse without dark mode