Lesson 7.1 – Digital Clock Project

🚀 Building a Real-Time Digital Clock Using HTML, CSS & JavaScript

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Build a Real-Time Digital Clock

✅ Use JavaScript Date Object

✅ Display Current Time

✅ Update Time Automatically

✅ Use setInterval()

✅ Create Professional UI Design

✅ Build Real-World JavaScript Projects

📖 Introduction

Every computer, smartphone, ATM, and digital device displays time.

Examples:

 
10:30:45 AM
 
 
05:15:20 PM
 
 
11:59:59 PM
 

Today we will create:

🕒 Digital Clock Project

using:

✅ HTML

✅ CSS

✅ JavaScript

🌟 Project Preview

Output:

 
---------------------

DIGITAL CLOCK

10:25:30 AM

---------------------
 

The clock will:

✅ Show Hours

✅ Show Minutes

✅ Show Seconds

✅ Update Every Second

✅ Run Automatically

🎯 Concepts Used

Concept Used
Variables ✅
Functions ✅
DOM Manipulation ✅
Events ❌
Date Object ✅
setInterval() ✅

🗂️ Project Files

Create:

index.html

style.css

script.js

🎯 Step 1 – Create HTML Structure

index.html

<!DOCTYPE html>

<html>

<head>

<title>Digital Clock</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="clock-container">

<h1>

Digital Clock

</h1>

<div id="clock">

00:00:00

</div>

</div>

<script src="script.js"></script>

</body>

</html>

🌟 Understanding HTML

Clock Heading:

<h1>

Digital Clock

</h1>

Clock Display Area:

<div id="clock">

00:00:00

</div>

JavaScript will update this area.

🎯 Step 2 – Design Clock

style.css

body{

margin:0;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:#111;

font-family:Arial;

}

.clock-container{

text-align:center;

background:#222;

padding:40px;

border-radius:15px;

box-shadow:0 0 20px gray;

}

h1{

color:white;

}

#clock{

font-size:50px;

color:#00ff00;

font-weight:bold;

}

🎯 Expected Design

 
-------------------------

Digital Clock

10:25:30

-------------------------
 

Dark background with green clock.

🎯 Step 3 – Create JavaScript

script.js

function updateClock()
{

let now = new Date();

let hours = now.getHours();

let minutes = now.getMinutes();

let seconds = now.getSeconds();

document.getElementById("clock").innerHTML =

hours + ":" + minutes + ":" + seconds;

}

🌟 Understanding Date Object

let now = new Date();

Gets current date and time.

Example:

 
June 4 2026

10:25:30
 

🎯 Getting Hours

now.getHours();

Example Output:

 
10
 

🎯 Getting Minutes

now.getMinutes();

Example Output:

 
25
 

🎯 Getting Seconds

now.getSeconds();

Example Output:

 
30
 

🌟 Displaying Time

document.getElementById("clock").innerHTML =
hours + ":" + minutes + ":" + seconds;

Output:

 
10:25:30
 

🎯 Problem

Clock updates only once.

Need automatic updates.

🌟 setInterval()

Used to repeat code continuously.

Syntax:

setInterval(functionName,time);

Example:

 
setInterval(updateClock,1000);
 

Meaning:

 
Run updateClock()

Every 1000 milliseconds

(1 second)
 

🎯 Final JavaScript Code

script.js

function updateClock()
{

let now = new Date();

let hours = now.getHours();

let minutes = now.getMinutes();

let seconds = now.getSeconds();

document.getElementById("clock").innerHTML =

hours + ":" + minutes + ":" + seconds;

}

setInterval(updateClock,1000);

🌟 Problem

Time may display like:

 
9:5:2
 

Not professional.

Need:

 
09:05:02
 

🎯 Adding Leading Zero

if(hours < 10)
{
hours = "0" + hours;
}

if(minutes < 10)
{
minutes = "0" + minutes;
}

if(seconds < 10)
{
seconds = "0" + seconds;
}

🌟 Professional Digital Clock

script.js

function updateClock()
{

let now = new Date();

let hours = now.getHours();

let minutes = now.getMinutes();

let seconds = now.getSeconds();

if(hours < 10)
{
hours = "0" + hours;
}

if(minutes < 10)
{
minutes = "0" + minutes;
}

if(seconds < 10)
{
seconds = "0" + seconds;
}

document.getElementById("clock").innerHTML =

hours + ":" + minutes + ":" + seconds;

}

setInterval(updateClock,1000);

updateClock();

🎯 12-Hour Clock Format

Convert:

 
14:30:00
 

to:

 
02:30:00 PM
 

Code:

let period = "AM";

if(hours >= 12)
{
period = "PM";
}

if(hours > 12)
{
hours = hours - 12;
}

🌟 12-Hour Format Example

document.getElementById("clock").innerHTML =

hours + ":" + minutes + ":" + seconds +

" " + period;

Output:

 
02:30:15 PM
 

💻 Complete Project Code

index.html

<!DOCTYPE html>

<html>

<head>

<title>Digital Clock</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<div class="clock-container">

<h1>Digital Clock</h1>

<div id="clock"></div>

</div>

<script src="script.js"></script>

</body>

</html>

style.css

body{

margin:0;

height:100vh;

display:flex;

justify-content:center;

align-items:center;

background:#111;

font-family:Arial;

}

.clock-container{

background:#222;

padding:40px;

border-radius:15px;

text-align:center;

box-shadow:0 0 20px gray;

}

h1{

color:white;

}

#clock{

font-size:50px;

font-weight:bold;

color:#00ff00;

}

script.js

function updateClock()
{

let now = new Date();

let hours = now.getHours();

let minutes = now.getMinutes();

let seconds = now.getSeconds();

let period = "AM";

if(hours >= 12)
{
period = "PM";
}

if(hours > 12)
{
hours = hours - 12;
}

if(hours < 10)
{
hours = "0" + hours;
}

if(minutes < 10)
{
minutes = "0" + minutes;
}

if(seconds < 10)
{
seconds = "0" + seconds;
}

document.getElementById("clock").innerHTML =

hours + ":" + minutes + ":" + seconds +

" " + period;

}

setInterval(updateClock,1000);

updateClock();

🎯 Expected Output

 
Digital Clock

02:45:18 PM
 

Updates every second automatically.

🏫 Real World Applications

Digital Clocks are used in:

✅ Computers

✅ Mobile Phones

✅ Railway Stations

✅ Airports

✅ Digital Sign Boards

✅ Smart TVs

✅ IoT Dashboards

✅ Robotics Control Panels

⚠️ Common Beginner Mistakes

Mistake 1

Forgetting setInterval()

Clock updates only once.

Mistake 2

Wrong Element ID

document.getElementById("clock")

must match HTML ID.

Mistake 3

Forgetting updateClock()

Without:

updateClock();

clock appears blank initially.

🌟 Best Practices

✅ Use External CSS

✅ Use External JavaScript

✅ Format time properly

✅ Use meaningful variable names

✅ Keep code organized

🏆 Project Challenge

Modify the project and add:

✅ Current Date

✅ Day Name

✅ Different Clock Colors

✅ Background Color Changer

📝 Practical Activity

Create:

College Digital Clock

Features:

  • College Name
  • Live Time
  • Live Date
  • AM/PM Format

📋 Assignment

Assignment 7.1

  1. What is a Digital Clock?
  2. What is the Date Object?
  3. What does getHours() do?
  4. What does setInterval() do?
  5. Create a digital clock project.
  6. Add AM/PM format.
  7. Add current date display.

🧠 Quiz

Q1. Which object provides current date and time?

A. Time

B. Date

C. Clock

D. Timer

✅ Answer: B

Q2. Which method gets current hour?

A. getHour()

B. getTime()

C. getHours()

D. getClock()

✅ Answer: C

Q3. What is the value of 1000 in setInterval?

A. 1000 Minutes

B. 1000 Hours

C. 1000 Milliseconds

D. 1000 Days

✅ Answer: C

Q4. Which function updates the clock continuously?

A. updateClock()

B. alert()

C. prompt()

D. print()

✅ Answer: A

Q5. Digital Clock project uses?

A. DOM Manipulation

B. Functions

C. Date Object

D. All of These

✅ Answer: D

📌 Lesson Summary

✅ Built a real-time Digital Clock.

✅ Learned JavaScript Date Object.

✅ Used getHours(), getMinutes(), and getSeconds().

✅ Used setInterval() for automatic updates.

✅ Created a professional JavaScript project.

PreviousNext