How to Create a Digital Clock Using HTML, CSS, and JavaScript - The first knowledge sharing application in Vietnam

The Digital Clock is among the best beginner projects in JavaScript. It’s quite easy to learn for people of any skill level.

In this article, you’ll learn how to build a digital clock of your own using HTML, CSS, and JavaScript. You’ll get hands-on experience with various JavaScript concepts like creating variables, using functions, working with dates, accessing and adding properties to DOM, and more.

MAKEUSEOF VIDEO OF THE DAY

SCROLL TO CONTINUE WITH CONTENT

Let’s get started.

Mục lục bài viết

Components of the Digital Clock

The digital clock has four parts: hour, minute, second, and meridiem.

Folder Structure of the Digital Clock Project

Create a root folder that contains the HTML, CSS, and JavaScript files. You can name the files anything you want. Here the root folder is named Digital-Clock. According to the standard naming convention, the HTML, CSS, and JavaScript files are named index.html, styles.css, and script.js respectively.

Adding Structure to the Digital Clock Using HTML

Open the index.html file and paste the following code:

 
<
html
>
 <
head
>
 <
meta
 charset
 = "utf-8"
>
 <
title
> Digital Clock Using JavaScript </
title
>
 <
link
 rel
 = "stylesheet"
 href
 = "styles.css"
>
 </
head
>
 <
body
>
 <
div
 id
 = "digital-clock"
> </
div
>
 <
script
 src
 = "script.js"
> </
script
>
 </
body
>
</
html
>

Here, a div is created with an id of digital-clock. This div is used to display the digital clock using JavaScript. styles.css is an external CSS page and is linked to the HTML page using a <link> tag. Similarly, script.js is an external JS page and is linked to the HTML page using the <script> tag.

Adding Functionality to the Digital Clock Using JavaScript

Open the script.js file and paste the following code:

 
function
 Time
(
) {

 
 var
 date = new
 Date
();

 
 var
 hour = date.getHours();
 
 var
 minute = date.getMinutes();
 
 var
 second = date.getSeconds();

 
 var
 period = ""
;

 
 if (hour >= 12) {
 period = "PM"
;
 } else
 {
 period = "AM"
;
 }

 
 if (hour == 0) {
 hour = 12;
 } else
 {
 if (hour > 12) {
 hour = hour - 12;
 }
 }

 
 
 hour = update
(hour
);
 minute = update
(minute
);
 second = update
(second
);

 
 document
.getElementById("digital-clock"
).innerText = hour + " : "
 + minute + " : "
 + second + " "
 + period;

 // Set
 Timer to
 1
 sec (1000
 ms)
 setTimeout(Time, 1000);
}

 // Function to update
 time
 elements if
 they are
 less
 than
 10

 
function
 update
(t
) {
 if (t < 10) {
 return
 "0"
 + t;
 }
 else
 {
 return
 t;
 }
}

Time();

Understanding the JavaScript Code

The Time() and update() functions are used to add functionality to the Digital Clock.

Getting the Current Time Elements

To get the current date and time, you need to create a Date object. This is the syntax for creating a Date object in JavaScript:

 var
 date = new
 Date
();

The current date and time will be stored in the date variable. Now you need to extract the current hour, minute, and second from the date object.

date.getHours(), date.getMinutes(), and date.getSeconds() are used to get the current hour, minute, and second respectively from the date object. All of the time elements are stored in separate variables for further operations.

 var
 hour = date.getHours();
var
 minute = date.getMinutes();
var
 second = date.getSeconds();

Assigning the Current Meridiem (AM/PM)

Since the Digital Clock is in a 12-hour format, you need to assign the appropriate meridiem according to the current hour. If the current hour is greater than or equal to 12, then the meridiem is PM (Post Meridiem) otherwise, it’s AM (Ante Meridiem).

 var
 period = ""
;

if (hour >= 12) {
 period = "PM"
;
} else
 {
 period = "AM"
;
}

Converting the Current Hour in 12-Hour Format

Now you need to convert the current hour into a 12-hour format. If the current hour is 0, then the current hour is updated to 12 (according to the 12-hour format). Also, if the current hour is greater than 12, it’s reduced by 12 to keep it aligned with the 12-hour time format.

Related: How to Disable Text Selection, Cut, Copy, Paste, and Right-Click on a Web Page

 if (hour == 0) {
 hour = 12;
} else
 {
 if (hour > 12) {
 hour = hour - 12;
 }
}

Updating the Time Elements

You need to update the time elements if they’re less than 10 (Single-Digit). 0 is appended to all the single-digit time elements (hour, minute, second).

 hour = update
(hour
);
minute = update
(minute
);
second = update
(second
);

function
 update
(t
) {
 if (t < 10) {
 return
 "0"
 + t;
 }
 else
 {
 return
 t;
 }
}

Adding the Time Elements to the DOM

First, the DOM is accessed using the target div’s id (digital-clock). Then the time elements are assigned to the div using the innerText setter.

 document
.getElementById("digital-clock"
).innerText = hour + " : "
 + minute + " : "
 + second + " "
 + period;

Updating the Clock Every Second

The clock is updated every second using the setTimeout() method in JavaScript.

 setTimeout(Time, 1000);

Styling the Digital Clock Using CSS

Open the styles.css file and paste the following code:

Related: How to Use CSS box-shadow: Tricks and Examples

 
@import
 url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap'
);



 background-color: 
 width: 35%;
 margin: auto;
 padding-top: 50px;
 padding-bottom: 50px;
 font-family: 'Open Sans Condensed'
, sans-serif;
 font-size: 64px;
 text-align: center;
 box-shadow
: 0 4px
 8px
 0 rgba
(0, 0, 0, 0.2
), 0 6px
 20px
 0 rgba
(0, 0, 0, 0.19
);
}

The above CSS is used to style the Digital Clock. Here, the Open Sans Condensed font is used to display the text of the clock. It’s imported from Google fonts using @import. The #digital-clock id selector is used to select the target div. The id selector uses the id attribute of an HTML element to select a specific element.

Related: Simple CSS Code Examples You Can Learn in 10 Minutes

If you want to have a look at the complete source code used in this article, here’s the GitHub repository. Also, if you want to take a look at the live version of this project, you can check it out through GitHub Pages.

Note: The code used in this article is MIT licensed.

Develop Other JavaScript Projects

If you’re a beginner at JavaScript and want to be a good web developer, you need to build some good JavaScript-based projects. They can add value to your resume as well as your career.

You can try out some projects like Calculator, a Hangman game, Tic Tac Toe, a JavaScript weather app, an interactive landing page, a Weight Conversion Tool, Rock Paper Scissors, etc.

If you’re looking for your next JavaScript-based project, a simple calculator is an excellent choice.