Digital Clock Using HTML
What is Digital Clock
The clock you remember from your childhood—perhaps one you often saw on phones, computers, railway stations, and other places—is known as a digital clock. It typically features two sets of digits separated by a dot or colon. The first two digits represent the hours, while the last two represent the minutes.
For the minutes, the digits range from 00 to 59 to signify the passing of each hour. The hours can start from 00 and go up to 12 or 24 to represent a full day.
Digital clocks come in two main formats:
- 12-Hour Format: Some digital clocks display hours from 01 to 12 in their first two digits. These clocks divide the day into two halves of 12 hours each. To distinguish between morning and evening, the clock shows times like 01:00 AM for nighttime and 01:00 PM for daytime.
- 24-Hour Format: Other digital clocks show hours ranging from 00 to 23 in their first two digits. Here, 00:00 represents midnight, while 12:00 signifies noon. Sometimes, people refer to 24:00 to denote the end of a day.
To display digital clock with HTML is devided into three part
- HTML Code
- CSS Code
- JavaScript code.
1. HTML Code Explanation:
- Document Type Declaration (
<!DOCTYPE html>
):- Declares the document type and version being used, which is HTML5 in this case.
- HTML Document Structure:
<html lang="en">
: Defines the root element of the HTML document, specifying the document language as English (“en”).
- Head Section (
<head>
):- Contains metadata and links to external resources used by the webpage.
<title>
: Sets the title of the webpage to “Digital Clock”.<meta charset="UTF-8" />
: Specifies the character encoding of the document as UTF-8, ensuring proper handling of special characters.<meta name="viewport" content="width=device-width" />
: Configures the viewport to adjust the layout according to the device’s width, enhancing responsiveness.<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Orbitron'>
: Links to the Google Fonts API to import the “Orbitron” font family for use in the webpage.<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Aldrich'>
: Links to the Google Fonts API to import the “Aldrich” font family for use in the webpage.<link rel="stylesheet" href="styles.css" />
: Links to an external CSS file “styles.css” for styling the clock display.
- Body Section (
<body>
):- Contains the content of the webpage.
<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
: Defines a<div>
element with the ID “MyClockDisplay” and class “clock”. Theonload="showTime()"
attribute indicates that the JavaScript functionshowTime()
should be executed when the element is loaded. This element will serve as the container for the digital clock display.
- JavaScript Inclusion (
<script src="script.js"></script>
):- Embeds or links an external JavaScript file “script.js” within the HTML document. This script likely contains the logic to update and display the current time within the clock display container.
Purpose:
- This HTML setup is used to create a webpage with a digital clock display.
- The metadata in the head section ensures proper rendering and responsiveness of the webpage.
- External resources such as fonts and stylesheets are linked to enhance the visual appearance of the clock display.
- The JavaScript file “script.js” is included to handle the functionality of updating and displaying the current time within the clock display container.
Example Usage:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Digital Clock</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Orbitron'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Aldrich'>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div id="MyClockDisplay" class="clock" onload="showTime()"></div>
<script src="script.js"></script>
</body>
</html>
2. CSS Documentation: Digital Clock Styling
This document explains the CSS code snippet that styles the digital clock displayed on a webpage.
CSS Code Explanation:
- Body Styling:
background: black;
: Sets the background color of the webpage to black.
- Clock Container Styling (
clock
class):position: absolute;
: Positions the clock container absolutely within its containing element.top: 50%; left: 50%;
: Positions the clock container at the center of its containing element by setting its top and left offsets to 50%.transform: translateX(-50%) translateY(-50%);
: Further centers the clock container by translating it back by 50% of its own width and height.color: #17D4FE;
: Sets the color of the clock text to a cyan-like color (#17D4FE
).font-size: 60px;
: Sets the font size of the clock text to 60 pixels.font-family: Orbitron;
: Specifies the font family for the clock text as “Orbitron”.letter-spacing: 7px;
: Sets the letter spacing of the clock text to 7 pixels, increasing the space between characters for better readability.
Purpose:
- The CSS code is responsible for styling the digital clock displayed on a webpage.
- The background color of the webpage is set to black for contrast and aesthetic appeal.
- The clock container is positioned at the center of its containing element using absolute positioning and transforms to ensure proper alignment.
- The color, font size, font family, and letter spacing properties are adjusted to enhance the appearance and readability of the clock text.
body {
background: black;
}
.clock {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #17D4FE;
font-size: 60px;
font-family: Orbitron;
letter-spacing: 7px;
}
3. JavaScript Documentation: showTime Function
This document explains the JavaScript function showTime()
used to update and display the current time on a digital clock.
Function Explanation:
- Date Object Creation:
var date = new Date();
: Creates a new Date object, representing the current date and time.
- Time Extraction:
var h = date.getHours();
: Retrieves the current hour (0 – 23).var m = date.getMinutes();
: Retrieves the current minute (0 – 59).var s = date.getSeconds();
: Retrieves the current second (0 – 59).
- Time Formatting:
var session = "AM";
: Initializes the session variable as “AM” by default.- If the hour is 0 (midnight), it is replaced with 12, and the session variable is set to “AM”.
- If the hour is greater than 12 (afternoon), it is converted to 12-hour format, and the session variable is set to “PM”.
- Leading zeros are added to the hour, minute, and second variables if they are less than 10, ensuring two-digit formatting.
- Time Display:
- Constructs a string representing the formatted time in the format “hh:mm:ss AM/PM”.
- Updates the text content of the clock display element with the formatted time.
- Recursive Call and Timeout:
setTimeout(showTime, 1000);
: Sets a timeout of 1000 milliseconds (1 second) to recursively call theshowTime()
function, ensuring that the clock updates every second.
Purpose:
- The
showTime()
function is responsible for updating and displaying the current time on a digital clock. - It retrieves the current hour, minute, and second from the Date object, formats them appropriately, and updates the clock display element with the formatted time.
- The function is called recursively with a timeout of 1 second to continuously update the clock display in real-time.
Example Usage:
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";
if(h == 0){
h = 12;
}
if(h > 12){
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();
Thanks For Reading.
This entrance is unbelievable. The splendid substance displays the distributer’s dedication. I’m overwhelmed and anticipate more such astonishing entries.