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.
Let’s get started.
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:
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<title> Digital Clock Using JavaScript </title>
<link rel = "stylesheet" href = "https://www.makeuseof.com/create-a-digital-clock-html-css-javascript/styles.css">
</head>
<body>
<div id = "digital-clock"> </div>
<script src = "https://www.makeuseof.com/create-a-digital-clock-html-css-javascript/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() {
// Creating object of the Date class
var date = new Date();
// Get current hour
var hour = date.getHours();
// Get current minute
var minute = date.getMinutes();
// Get current second
var second = date.getSeconds();
// Variable to store AM / PM
var period = "";
// Assigning AM / PM according to the current hour
if (hour >= 12) {
period = "PM";
} else {
period = "AM";
}
// Converting the hour in 12-hour format
if (hour == 0) {
hour = 12;
} else {
if (hour > 12) {
hour = hour - 12;
}
}
// Updating hour, minute, and second
// if they are less than 10
hour = update(hour);
minute = update(minute);
second = update(second);
// Adding time elements to the div
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
// Append 0 before 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.
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:
/* Importing Open Sans Condensed Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:wght@300&display=swap');#digital-clock {
background-color: #66ffff;
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.
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.
Read Next
About The Author
