Build a Simple Digital Clock with JavaScript, HTML and CSS

In this article, I have shown you how to create a digital clock using HTML, CSS, and JavaScript programming code. If you are a beginner and want to know how to make a digital clock using JavaScript programming code, you can definitely find out from this article. 

Earlier I made many more types of watches like analog, digital, etc. You can see those designs if you want. It is made very commonly. There are three types of time such as hour, minute, and second. Similarly here you can see three types of time.

You can see the demo below which will help you how it works. If you want, you can copy the HTML, CSS, and JavaScript code below and use it for your own needs. However, if you are a beginner, I would request you to learn how to make it by following the tutorial below.

See the Pen javascript clock 2 by shantanu jana (@fghty) on CodePen.

In this digital watch, I have used Neumorphism design i.e. in this case I have arranged the background in the form of Neumorphism design. Time showing numbers are made in white.

Step1: Create and design the basic structure of the digital clock

This digital clock is structured using the following Html codes. The following CSS programming codes have been used to design the background.

<div class="date"><span class="hour"></span><span class="min"></span><span class="sec"></span></div>

*, *::before, *::after {

  box-sizing: border-box;

}

body {

    background-color: #131419;

  font-family: Roboto, sans-serif;

}

Step 2: Activate the clock using JavaScript

This digital watch has been enabled using the following JavaScript codes. Basically, the time you have in this design will depend on the time of your device. That means the time you have on your device can be seen on the time clock.

console.clear();

function clock() {

let d = new Date(),

h = d.getHours(),

m = d.getMinutes(),

s = d.getSeconds();

if (h < 10) h = `0${h}`;

if (m < 10) m = `0${m}`;

if (s < 10) s = `0${s}`;

document.querySelector('.hour').textContent = h;

document.querySelector('.min').textContent = m;

document.querySelector('.sec').textContent = s;

setTimeout(clock, 1000);

}

clock();

Step 3: Design the clock using the CSS code below

Using the below programming code, I designed the numbers to show the time on this digital watch. In this case, the space shown in the second has been made much smaller. You can also make other changes here if you want, such as color, size, etc.

.date {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  font-size: 30vmin;

  font-weight: 300;

  color: #fff;

 padding-left: 20px;

 padding-right: 30px;

  box-shadow: -5px -5px 5px 0 rgba(255, 255, 255, 0.04),

    7px 7px 7px 0 rgba(0, 0, 0, 2);

}

.date .sec {

  font-size: 0.5em;

}

.date .min::before,

.date .sec::before {

  content: ":";

}

Hopefully from this article, you have learned how to make a digital clock using HTML, CSS, and JavaScript programming code. If there is a problem, of course, you can comment. You can use the download button below to download the source code required to make this kite.

Download Code