Css style

How to Create a Digital Clock Using HTML, CSS, and JavaScript

The digital clock is among the best projects for beginners in JavaScript. It is quite easy to learn for people of all skill levels.

In this article, you will learn how to create your own digital clock using HTML, CSS, and JavaScript. You will get hands-on experience with various JavaScript concepts, such as creating variables, using functions, using dates, accessing and adding properties to the DOM, and more.

Let’s get started.

Digital clock components

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


Digital clock components

Digital clock project folder structure

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


Digital clock folder structure

Add structure to digital clock using HTML

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





Digital Clock Using JavaScript






here is a div is created with a username 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 label. In the same way, script.js is an external JS page and is linked to the HTML page using the scenario> label.

VIDEO OF THE DAY MAKEUSE

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

Understanding JavaScript code

the Time() and update() functions are used to add functionality to the digital clock.

Getting current time items

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

var date = new Date();

The current date and time will be stored in the Dated 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 obtain the hour, minute and second respectively from the date object. All time elements are stored in separate variables for other operations.

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

Assignment of the current meridian (AM / PM)

Since the digital clock is in 12 hour format, you need to assign the correct meridian based on the current time. If the current hour is greater than or equal to 12, then the meridiem is PM (Post Meridiem) otherwise, it is AM (Ante Meridiem).

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

Converting the current time to 12-hour format

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

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

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

Update of time elements

You must update the time items if they are less than 10 (single digit). 0 is added to all single-digit time elements (hour, minute, second).

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

Adding time elements to the DOM

First, the DOM is accessed using the id of the target div (digital clock). Then the time elements are assigned to the div using the internal text setter.

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

Update 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 Box-Shadow CSS: Tips & Examples

/* Importing Open Sans Condensed Google font */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans+Condensed:[email protected]&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 clock text. It is imported from Google Fonts using @import. the #digital clock id selector is used to select the target div. The id selector uses the username attribute of an HTML element to select a specific element.

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

If you'd like to check out the full source code used in this article, here's the GitHub repository. Additionally, if you'd like to take a look at the live version of this project, you can check it out through the GitHub pages.

To note: The code used in this article is licensed under the MIT license.

Develop other JavaScript projects

If you are new to JavaScript and want to be a good web developer, you need to create good JavaScript based projects. They can add value to your resume as well as your career.

You can try projects like Calculator, Hangman game, Tic Tac Toe, JavaScript weather app, interactive landing page, weight converter tool, paper scissors, etc.

If you're looking for your next JavaScript-based project, a simple calculator is a great choice.


man holding a calculator
How to Create a Simple Calculator Using HTML, CSS, and JavaScript

A simple and calculated code is the way to go when programming. Find out how to create your own calculator in HTML, CSS, and JS.

Read more


About the Author