Scribd
Upload
24 views3 pages

Ws 4

Uploaded by

verykalabandar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
24 views3 pages

Ws 4

Uploaded by

verykalabandar
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Worksheet 4: Digital Clock

Objective
Create a digital clock that displays the current time and updates every second.

Instructions
1. Create three files: index.html , styles.css , and script.js .

2. Enter the provided HTML code into index.html .

3. Enter the provided CSS code into styles.css .

4. Enter the provided JavaScript code into script.js .

5. Save all files in the same directory.

6. Open index.html in a web browser to view the clock.

Code to Type
index.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Digital Clock</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="clock">
<h1>Digital Clock</h1>
<div id="time">00:00:00</div>
</div>
<script src="script.js"></script>
</body>
</html>

Worksheet 4: Digital Clock 1


styles.css

body {
background-color: #222;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
font-family: 'Courier New', Courier, monospace;
}

.clock {
text-align: center;
}

#time {
font-size: 4em;
margin-top: 20px;
}

script.js

const timeDisplay = document.getElementById('time');

function updateTime() {
const now = new Date();
const hours = String(now.getHours()).padStart(2, '0');
const minutes = String(now.getMinutes()).padStart(2,
'0');
const seconds = String(now.getSeconds()).padStart(2,
'0');
timeDisplay.textContent = `${hours}:${minutes}:${second
s}`;
}

updateTime();

Worksheet 4: Digital Clock 2


setInterval(updateTime, 1000);

Key Points
setInterval is used to update the time every second.

Leading zeros are added to hours, minutes, and seconds for consistent
display.

CSS Flexbox centers the clock both vertically and horizontally on the page.

The clock updates in real-time without the need to refresh the page.

Worksheet 4: Digital Clock 3

You might also like