Digital Clock using HTML, CSS and Javascript

We all watch the clock, sometimes the hand, sometimes on the computer screen. Now if that watch is seen on your own website, how will it be? Live where the time is updated in seconds in seconds.

That's actually a digital clock. Here the time is shown through numbers. And the funny thing is, using Javascript, you can easily make a digital clock.

The JavaScript Date object gives us the current time. If we put it in the HTML little format, a live digital clock is created. And if you want, you can make it beautiful with CSS.

In this tutorial, we will go step by step to see how to make a great digital clock by writing a few lines of code. Let us get started.

HTML:

Using HTML, we will create a digital clock structure. The entire clock will be placed inside a div, which is named 'time-wrap'. Inside it, the h1 tag will be used to display the time in a large format. Inside that H1, we will place three separate parts. The parts are am/pm, hour/minute, and second. That is, the top line is the full-time display. Below it, the date will be displayed in the h2 tag, for example… Thu, August 28, 2025.

After creating the basic frame of our digital clock, we will use CSS and Javascript to beautically style it and run it in live time.

<div class="time-wrap">
    <h1>
      <span class="am-pm">AM</span> 
      <span class="hour-min">11:50</span>
      <span class="sec">49</span> 
    </h1>
    <h2 class="date">Thu, August 28, 2025</h2>
</div>

Stylesheet (CSS):

Centering Digital Clock:

We brought the whole body to the center with the Flexbox method so that the digital clock is always in the middle of the screen. A min-height of 100vh will take up the entire viewport height and no extra parts will be visible on screen with hidden overflow.

body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    font-family: monospace;
}

Positioning the Digital Clock:

By making '.time-wrap' relative, it will be made a "reference frame" so that the internal parts of the clock can be controlled nicely.

.time-wrap {
    position: relative;
}

Styling time:

Here the font size will be kept at 25px so that the time can be read easily. The value of 100 for font weight means the text will look very light and thin. With the use of text transform, all letters will be converted into capital letters. And the vertical-align sorts the text with the upper side so that the numbers or AM/PM sit properly on one line.

h1 {
    font-size: 25px;
    font-weight: 100;
    text-transform: uppercase;
    vertical-align: top;
}

Styling AM/PM:

This '.am-pm' CSS class is actually used to separate the "AM" or "PM" text next to the clock and arrange it nicely. Here, position 'absolute' is used so that it can be placed in a specific place in the main time. Then, 35 pixels from the top and -55 pixels from the left will be used to set it to the exact position.

40px of font size makes the text appear larger so that it is easy to see, and 10px of margin creates some space around the text.

.am-pm {
    position: absolute;
    top: 35px;
    left: -55px;
    font-size: 40px;
    margin: 10px;
}

Styling Hours/Minutes:

This '.hour-min' class is used to display the hours and minutes of the clock. The font size used here is 14VH which depends on the height of the viewport so the number will be bigger or smaller depending on the screen size. This will make the clock look bigger on large screens and smaller on small screens.

A value of 300 for font weight is set so that the number is not too thick but rather looks like a modern digital clock in a light, thin font.

The value of 1.2 for line height to balance each line so that the numbers don't look too crowded. And 0 pixels of margin are used to remove excess blank space so that the clock fits perfectly.

.hour-min {
    font-size: 14vh;
    font-weight: 300;
    text-align: center;
    line-height: 1.2;
    margin: 0px;
}

Styling Seconds:

The '.sec' class is used to separate the second of the clock. With 76 pixels at the top, it is placed nicely next to the main hour and minute numbers of the clock.

Using a font size of 2.5EM, the seconds number is kept a little larger, but not as large as the hours and minutes. And with 10px of margin, a light space is left around it so that the numbers do not look crowded.

.sec {
    position: absolute;
    top: 76px;
    font-size: 2.5em;
    margin: 10px;
}

Styling Date:

We will use the '.date' class to show the date under the watch. Here the date is kept in the middle with text aligned, as if the entire clock design looks balanced.

20 pixels of font size has kept it smaller than an hour, minute, or second, because the original focus is on time, and the date is supporting information.

.date {
    text-align: center;
    font-size: 20px;
    font-weight: 100;
    margin-top: -20px;
}

Javascript:

Here, with querySelector, HTML's .hour-minute, .sec, .am-PM, and '.date' elements are considered variables, which will show different times, seconds, am/pm, and dates.

Getting the current system time using the 'new date()' function inside the "updateTime()" function. Then the hours, minutes, and seconds are separated, and arrangements have always been arranged using the 'padStart()' function.

The 'toLocaleDateString()' function is used to format the date, which is being shown nicely as day, month, year, and week name together.

Finally, these updated values will be loaded on the HTML elements in the DOM. The 'updatetime()' function has been run once in the beginning, and the setInterval is refreshing every 1 second.

const hourMin = document.querySelector(".hour-min");
const sec = document.querySelector(".sec");
const amPm = document.querySelector(".am-pm");
const dateEl = document.querySelector(".date");

function updateTime() {
  const now = new Date();
  
  let hours = now.getHours();
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');
  
  const ampm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12;
  hours = hours ? hours : 12;
  const formattedHours = hours.toString().padStart(2, '0');

  const options = { weekday: 'short', year: 'numeric', month: 'long', day: 'numeric' };
  const formattedDate = now.toLocaleDateString('en-US', options);

  hourMin.textContent = `${formattedHours}:${minutes}`;
  sec.textContent = seconds;
  amPm.textContent = ampm;
  dateEl.textContent = formattedDate;
}

updateTime();
setInterval(updateTime, 1000);

Are you interested in CSS art? We drew pictures of animals, like the elephant, fox, etc. Using only CSS, no JS.

Hope you all enjoyed this tutorial. Share your views or comments in the comment section below. Subscribe my youtube channel to get tutorial updates.