How to Create a Digital Clock Using HTML, CSS, and JavaScript
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.