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 present time. If we put it in the HTML a little format, 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. Using MIN HEIGHT 100VH will take the height of the entire viewport. And with the hidden overflow, no additional part can be seen on the screen.

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 25 pixel so that the time can be read easily. 100 value of font weight is 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.

40 pixel of font size makes the text appear larger, so that it is easy to see, and 10 pixel 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. Here, 14VH of font size is used, which depends on the viewport height, so the number will be larger or smaller depending on the screen size. This will make the clock look larger on large screens and smaller on small screens, remaining fully responsive.

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.

A 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.

The current time of the system is being taken with 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 have drawn pictures of the elephant, fox etc. using only CSS properties. These tutorials will entertain you.

I hope you guys enjoyed this tutorial. If you have any suggestions and feedback to let me know through the comments below. Also, to stay updated with the latest tutorial, subscribe to me on Youtube.