HTML5 Digital Clock with JavaScript | Beginner Project

In this tutorial, we are going to create a beginner Javascript project that will display a digital clock on the web page. The clock will show the current time in the format of hours, minutes, and seconds. The clock will be updated every second. We will also display the date and day of the week just below the clock.

Here is how our HTML5 digital clock looks like:

Let’s start with creating the first structure of our digital clock using HTML. Then we will create the logic for our clock using Javascript and finally, we will add CSS to make our clock look nice.

HTML Structure

We will create 2 div elements, one to display running time and another to display the date and day of the week.

Create a div element with class time and another div element with class date-time.

Wrap both div elements inside a div element with class clock.

<div class="clock">
  <div class="time"></div>
  <div class="date-time"></div>
</div>

Now we have a structure of our digital clock. We will add some CSS to make it look nice.

Creating JavaScript Logic

Let’s start writing the logic of our digital clock.

Before starting with the logic, you must have an understanding of the Date object in javascript. We will first explain here in brief and then start with the logic.

Date object in javascript

The Date object in javascript is used to get the current time and date. It is a built-in object in javascript.

To get the current date object we can use the new Date(). It returns the current date object.

var date = new Date();

Now we can get the current time and date using getHours(), getMinutes(), getSeconds() and getDay() methods of the date object.

var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();
var day = date.getDay();

# Logic for the clock

First select the element with class time using the querySelector Method, so that we can use it to display the date and time.

var time = document.querySelector('.time');
var dateTime = document.querySelector('.date-time');

Now create a function updateClock() that will calculate the current time and date and display it on the web page.

Within the function create a Date object and get the current hour, minute, second, day, date, month, and year.

Now create 2 arrays to store day names and month names in English.

// Get the current time, day , month and year
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds();
var day = now.getDay();
var date = now.getDate();
var month = now.getMonth();
var year = now.getFullYear();

// store day and month name in an array
var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

Now format date and time to display properly.

Add a 0 before the minutes and seconds if they are less than 10 and convert hours to 12-hour format.

Use the selected element to display the time and date.

// format date and time
hours = hours % 12 || 12;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;
date = date < 10 ? '0' + date : date;

// display date and time
var period = hours < 12 ? 'AM' : 'PM';
time.innerHTML = hours + ':' + minutes + ':' + seconds + ' ' + period;
dateTime.innerHTML = dayNames[day] + ', ' + monthNames[month] + ' ' + date + ', ' + year;

Finally add a setInterval() method to call the updateClock() function every second.

The complete logic of our digital clock is as follows:

var time = document.querySelector('.time');
var dateTime = document.querySelector('.date-time');

function updateClock() {
  // Get the current time, day , month and year
  var now = new Date();
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();
  var day = now.getDay();
  var date = now.getDate();
  var month = now.getMonth();
  var year = now.getFullYear();

  // store day and month name in an array
  var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
  var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

    // format date and time
    hours = hours % 12 || 12;
    minutes = minutes < 10 ? '0' + minutes : minutes;
    seconds = seconds < 10 ? '0' + seconds : seconds;
    date = date < 10 ? '0' + date : date;

    // display date and time
    var period = hours < 12 ? 'AM' : 'PM';
    time.innerHTML = hours + ':' + minutes + ':' + seconds + ' ' + period;
    dateTime.innerHTML = dayNames[day] + ', ' + monthNames[month] + ' ' + date + ', ' + year;
}

updateClock();
setInterval(updateClock, 1000);

CSS for the clock

You can create your own style depending on your imagination. Here is the simple style for the clock.

.clock {
  width: 100%;
  height: 400px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: sans-serif;
  background-color: #424558;
}

.time {
  font-size: 80px;
  font-weight: bold;
  color: #fff;
}

.date-time {
  font-size: 20px;
  color: #fff;
}

@media screen and (max-width: 768px) {
  .time {
    font-size: 50px;
  }
}

Complete code for the clock

Here is the complete code for the clock. You can open this in a separate editor by clicking the run button below.

Example

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>JavaScript Digital Clock</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      height: 100vh;
    }

    .clock {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #424558;
    }

    .time {
      font-size: 80px;
      font-weight: bold;
      color: #fff;
    }

    .date-time {
      font-size: 20px;
      color: #fff;
    }

    @media screen and (max-width: 768px) {
      .time {
        font-size: 50px;
      }
    }
  </style>
</head>

<body>
  <div class="clock">
    <div class="time"></div>
    <div class="date-time"></div>
  </div>

  <script>
    var time = document.querySelector('.time');
    var dateTime = document.querySelector('.date-time');

    function updateClock() {
      // Get the current time, day , month and year
      var now = new Date();
      var hours = now.getHours();
      var minutes = now.getMinutes();
      var seconds = now.getSeconds();
      var day = now.getDay();
      var date = now.getDate();
      var month = now.getMonth();
      var year = now.getFullYear();

      // store day and month name in an array
      var dayNames = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
      var monthNames = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];

      // format date and time
      hours = hours % 12 || 12;
      minutes = minutes < 10 ? '0' + minutes : minutes;
      seconds = seconds < 10 ? '0' + seconds : seconds;
      date = date < 10 ? '0' + date : date;

      // display date and time
      var period = hours < 12 ? 'AM' : 'PM';
      time.innerHTML = hours + ':' + minutes + ':' + seconds + ' ' + period;
      dateTime.innerHTML = dayNames[day] + ', ' + monthNames[month] + ' ' + date + ', ' + year;
    }

    updateClock();
    setInterval(updateClock, 1000);
  </script>
</body>

</html>

▶ Run the code

Conclusion

The JavaScript clock is a great way to start your javascript journey as a beginner. It is easy to use and it is very simple to make. You can use it to display the time and date on your website.

We discussed the complete code for the clock step by step.