<!-- Declare HTML5 document -->
<!DOCTYPE html>
<!-- Root HTML element -->
<html lang="en">
<head>
<!-- Character encoding -->
<meta charset="UTF-8">
<!-- Responsive layout for all devices -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Title shown in browser tab -->
<title>JavaScript Client Demo</title>
<!-- Link external CSS file -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Main heading -->
<h1>Client-Side JavaScript Showcase</h1>
<!-- Input field for user's name -->
<input type="text" id="nameInput" placeholder="Enter your name">
<!-- Button to greet user -->
<button onclick="greetUser()">Greet Me</button>
<!-- Button to change background color -->
<button onclick="changeBackground()">Change Background</button>
<!-- Button to show dialog examples -->
<button onclick="showDialogs()">Show Dialogs</button>
<!-- Display message output -->
<p id="output"></p>
<!-- Display date and time -->
<p id="dateTime"></p>
<!-- Load JavaScript file -->
<script src="script.js"></script>
</body>
</html>
/* Style the body of the page */
body {
font-family: Arial, sans-serif; /* Font style */
text-align: center; /* Center text */
background-color: #f2f2f2; /* Light gray background */
padding-top: 40px; /* Space from top */
}
/* Style buttons */
button {
padding: 10px 15px; /* Inner spacing */
margin: 5px; /* Space between buttons */
font-size: 16px; /* Text size */
cursor: pointer; /* Pointer cursor */
}
/* Style input field */
input {
padding: 8px; /* Inner spacing */
font-size: 16px; /* Text size */
}
/* Output message styling */
#output {
margin-top: 20px; /* Space above */
font-size: 18px; /* Text size */
color: blue; /* Text color */
}
/* Date & time styling */
#dateTime {
margin-top: 10px; /* Space above */
font-size: 16px; /* Text size */
color: green; /* Text color */
}
// Function to greet the user using input field
function greetUser() {
// Get value from input box
let name = document.getElementById("nameInput").value;
// Check if input is empty
if (name === "") {
alert("Please enter your name!");
return;
}
// Display greeting message
document.getElementById("output").innerText =
"Hello, " + name + "! Welcome to JavaScript.";
}
// Function to change background color randomly
function changeBackground() {
// Generate random color using RGB values
let randomColor =
"rgb(" +
Math.floor(Math.random() * 256) + "," +
Math.floor(Math.random() * 256) + "," +
Math.floor(Math.random() * 256) + ")";
// Apply background color to body
document.body.style.backgroundColor = randomColor;
}
// Function to show alert, prompt, and confirm dialogs
function showDialogs() {
// Show alert message
alert("This is an alert dialog!");
// Show prompt dialog and store user input
let userAge = prompt("Enter your age:");
// Show confirm dialog
let isSure = confirm("Do you want to continue?");
// Display dialog results
document.getElementById("output").innerText =
"Age: " + userAge + " | Continue: " + isSure;
}
// Function to update date and time every second
function updateDateTime() {
// Create new Date object
let now = new Date();
// Display current date and time
document.getElementById("dateTime").innerText =
"Current Date & Time: " + now.toLocaleString();
}
// Call updateDateTime every 1000 milliseconds (1 second)
setInterval(updateDateTime, 1000);