Aim:
1. Design the following static web pages required for an online book store web site.
a) HOME PAGE: The static home page must contain three frames.
b) LOGIN PAGE
c) CATOLOGUE PAGE: The catalogue page should contain the details of all the
books available in the web site in a table.
d) REGISTRATION PAGE
<!DOCTYPE html>
<html>
<head>
<title>Online Bookstore</title>
<style>
body {
font-family: Arial;
text-align: center;
background-color: blue;
}
h1 {
background: #333;
color: white;
padding: 15px;
font-size: 24px;
}
nav {
background: #444;
padding: 10px;
}
iframe {
width: 100%;
height: 500px;
border: none;
}
a{
color: white;
text-decoration: none;
margin: 0 15px;
font-size: 18px;
}
</style>
</head>
<body>
<h1>Welcome to Our Online Bookstore</h1>
<nav>
<a href="home.html" target="contentFrame">Home</a>
<a href="categories.html" target="contentFrame">Categories</a>
<a href="bestsellers.html" target="contentFrame">Bestsellers</a>
<a href="contact.html" target="contentFrame">Contact Us</a>
</nav>
<iframe name="contentFrame" src="home.html"></iframe>
</body>
</html>
Home.html
<html>
<head>
<title>homepage</title>
<style>
h1
{
color:pink;
text-align:center;
}
</style>
</head>
<body>
<h1>Welcome to homepage</h1>
</body>
</html>
b. Login page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f4f4f4;
}
.login-container {
background: white;
padding: 20px;
box-shadow: 0px 0px 5px gray;
text-align: center;
}
input, button {
width: 80%;
margin: 5px 0;
padding: 10px;
}
button {
background: blue;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<form>
<input type="text" id="username" placeholder="Username" required>
<input type="password" id="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
</div>
</body>
</html>
c. Catalogue page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bookstore Catalogue</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
background: #f4f4f4;
}
.catalogue {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.book {
background: white;
padding: 10px;
box-shadow: 0px 0px 5px gray;
width: 200px;
text-align: center;
}
.book img {
width: 100%;
height: auto;
}
.book button {
background: blue;
color: white;
border: none;
padding: 5px;
cursor: pointer;
margin-top: 5px;
}
</style>
</head>
<body>
<h2>Online Bookstore Catalogue</h2>
<div class="catalogue">
<div class="book">
<img src="iot.jpg"alt="Book 1">
<h3>IOT</h3>
<p>Rs 460</p>
<button>Add to Cart</button>
</div>
<div class="book">
<img src="ml.jpg" alt="Book 2">
<h3>ML</h3>
<p>RS 499</p>
<button>Add to Cart</button>
</div>
<div class="book">
<img src="wt.jpg" alt="Book 3">
<h3>WT</h3>
<p>RS 299</p>
<button>Add to Cart</button>
</div>
</div>
</body>
</html>
Register page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bookstore Registration</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #f4f4f4;
}
.registration-container {
background: white;
padding: 20px;
box-shadow: 0px 0px 5px gray;
text-align: center;
width: 300px;
}
.form-group {
display: flex;
align-items: center;
justify-content: space-between;
margin: 10px 0;
}
label {
font-weight: bold;
margin-right: 10px;
width: 80px;
text-align: right;
}
input {
flex: 1;
padding: 8px;
}
button {
width: 100%;
padding: 10px;
background: blue;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="registration-container">
<h2>Register</h2>
<form >
<div class="form-group">
<label for="name">Name:</label>
<input type="text" id="name" placeholder="Enter your full name" required>
</div>
<div class="form-group">
<label for="number">Phone number</label>
<input type="number" id="number" placeholder="Enter your phone number"
required>
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" id="email" placeholder="Enter your email" required>
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" placeholder="Enter your password" required>
</div>
<button type="submit">Register</button>
</form>
</div>
</body>
</html>
2.
Aim :
2. Write JavaScript to validate the following fields of the Registration page.
a) First Name (Name should contains alphabets and the length should not be less than
6 characters).
b) Password (Password should not be less than 6 characters length).
c) E-mail id (should not contain any invalid and must follow the standard pattern
[email protected])
d) Mobile Number (Phone number should contain 10 digits only).
e) Last Name and Address (should not be Empty).
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Page</title>
</head>
<body>
<h2>Registration Form</h2>
<form id="registrationForm" onsubmit="return validateForm()">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" name="firstName"><br><br>
<label for="lastName">Last Name:</label>
<input type="text" id="lastName" name="lastName"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email"><br><br>
<label for="mobile">Mobile Number:</label>
<input type="text" id="mobile" name="mobile"><br><br>
<label for="address">Address:</label>
<textarea id="address" name="address"></textarea><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword"><br><br>
<input type="submit" value="Register">
</form>
<script>
function validateForm() {
// Get form values
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var email = document.getElementById("email").value;
var mobile = document.getElementById("mobile").value;
var address = document.getElementById("address").value;
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirmPassword").value;
// Validate First Name (Capital letter, at least 6 characters)
if (firstName === "" || firstName.length < 6 || firstName.charAt(0) !==
firstName.charAt(0).toUpperCase()) {
alert("First name must start with a capital letter and be at least 6 characters long.");
return false;
}
// Validate Last Name (Cannot be empty)
if (lastName === "") {
alert("Last name cannot be empty.");
return false;
// Validate Email (Must contain @ symbol)
if (email === "" || !email.includes('@')) {
alert("Please enter a valid email address.");
return false;
// Validate Mobile Number (Must be exactly 10 digits)
if (mobile === "" || mobile.length !== 10 || isNaN(mobile)) {
alert("Mobile number must be exactly 10 digits.");
return false;
// Validate Address (Cannot be empty)
if (address === "") {
alert("Address cannot be empty.");
return false;
}
// Validate Password (At least 6 characters)
if (password === "" || password.length < 6) {
alert("Password must be at least 6 characters long.");
return false;
// Validate Confirm Password (Must match the password)
if (confirmPassword === "" || password !== confirmPassword) {
alert("Passwords do not match.");
return false;
// If all validations pass, show success message
alert("Registration successful!");
return true;
</script>
</body>
</html>
Output :
3
Aim ; Develop and demonstrate the usage of inline, internal and external style sheet using CSS
Program
1. Inline CSS
Inline CSS is written inside an HTML element's style attribute.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: green; text-align: center;">This is Inline CSS</h1>
<p style="font-size: 16px; color: blue;">This paragraph is styled using inline CSS.</p>
</body>
</html>
2. Internal CSS
Internal CSS is written inside a <style> tag in the <head> section of the HTML document.
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
h1 {
color: darkred;
text-align: center;
}
p{
font-size: 18px;
color: purple;
}
</style>
</head>
<body>
<h1>This is Internal CSS</h1>
<p>This paragraph is styled using internal CSS.</p>
</body>
</html>
External CSS
External CSS is written in a separate .css file and linked using the <link> tag in the <head>
section of the HTML document.
✅ HTML file: external-css.html
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>This is External CSS</h1>
<p>This paragraph is styled using external CSS.</p>
</body>
</html>
✅ CSS file: styles.css
h1 {
color: navy;
text-align: center;
}
p{
font-size: 20px;
color: teal;
}
Output:
4.
Aim
Develop and demonstrate JavaScript with POP-UP boxes and functions for the
following problems:
a) Input: Click on Display Date button using onclick( ) function
Output: Display date in the textbox
b) Input: A number n obtained using prompt
Output: Factorial of n number using alert
c) Input: A number n obtained using prompt
Output: A multiplication table of numbers from 1 to 10 of n using alert
d) Input: A number n obtained using prompt and add another number using confirm
Output: Sum of the entire n numbers using alert
Program
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Pop-Up Demonstration</title>
</head>
<body>
<!-- Button for Display Date -->
<button onclick="displayDate()">Display Date</button>
<br><br>
<!-- Input for Factorial -->
<button onclick="getFactorial()">Calculate Factorial</button>
<br><br>
<!-- Input for Multiplication Table -->
<button onclick="multiplicationTable()">Multiplication Table</button>
<br><br>
<!-- Input for Sum of Numbers -->
<button onclick="sumNumbers()">Sum of Numbers</button>
<script>
// a) Display Date in the Textbox
function displayDate() {
let currentDate = new Date();
alert("Current Date: " + currentDate.toDateString());
}
// b) Factorial of a number
function getFactorial() {
let n = prompt("Enter a number to calculate its factorial:");
n = parseInt(n);
if (isNaN(n) || n < 0) {
alert("Please enter a valid positive number.");
return;
}
let factorial = 1;
for (let i = 1; i <= n; i++) {
factorial *= i;
}
alert("Factorial of " + n + " is " + factorial);
}
// c) Multiplication Table of a number
function multiplicationTable() {
let n = prompt("Enter a number to get its multiplication table:");
n = parseInt(n);
if (isNaN(n)) {
alert("Please enter a valid number.");
return;
}
let table = "";
for (let i = 1; i <= 10; i++) {
table += n + " x " + i + " = " + (n * i) + "\n";
}
alert("Multiplication Table for " + n + ":\n" + table);
}
// d) Sum of n numbers with confirmation for each number
function sumNumbers() {
let n = prompt("Enter the number of values to sum:");
n = parseInt(n);
if (isNaN(n) || n <= 0) {
alert("Please enter a valid positive number.");
return;
}
let sum = 0;
for (let i = 1; i <= n; i++) {
let number = prompt("Enter number " + i + ":");
number = parseInt(number);
if (isNaN(number)) {
alert("Please enter a valid number.");
return;
}
sum += number;
// Confirm if the user wants to add another number
if (i < n && !confirm("Do you want to add another number?")) {
break;
}
}
alert("Total Sum: " + sum);
}
</script>
</body>
</html>
Output:
5.
Aim
5. Write an HTML page that contains a selection box with a list of 5 countries. When the user
selects a country, its capital should be printed next in the list. Add CSS to customize the
properties of the font of the capital (colour, bold and font size).
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Country Capital</title>
</head>
<body>
<h2>Select a Country</h2>
<select id="countrySelect" onchange="displayCapital()">
<option value="">--Choose a country--</option>
<option value="USA">United States</option>
<option value="India">India</option>
<option value="France">France</option>
<option value="Japan">Japan</option>
<option value="Germany">Germany</option>
</select>
<p id="capitalDisplay"></p>
<script>
function displayCapital() {
let country = document.getElementById("countrySelect").value;
let capital = "";
if (country === "USA") {
capital = "Washington, D.C.";
} else if (country === "India") {
capital = "New Delhi";
} else if (country === "France") {
capital = "Paris";
} else if (country === "Japan") {
capital = "Tokyo";
} else if (country === "Germany") {
capital = "Berlin";
document.getElementById("capitalDisplay").innerText = capital ? "Capital: " + capital :
"";
</script>
</body>
</html>
Ouput:
6.
Aim
Write an HTML page including any required JavaScript that takes a number from textfield in the
range of 0 to 999 and shows it in words. It should not accept four and above digits, alphabets and
special characters.
Program:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Number to Words</title>
<script>
function numberToWords(num) {
// Arrays for number words
const words = [
"Zero", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "Nine",
"Ten", "Eleven", "Twelve", "Thirteen", "Fourteen", "Fifteen", "Sixteen", "Seventeen",
"Eighteen", "Nineteen"
];
const tens = [
"", "", "Twenty", "Thirty", "Forty", "Fifty", "Sixty", "Seventy", "Eighty", "Ninety"
];
// If the number is less than 20, return the corresponding word from the words array
if (num < 20) {
return words[num];
}
// For numbers 20 and above, find the tens and ones
if (num < 100) {
return tens[Math.floor(num / 10)] + (num % 10 !== 0 ? " " + words[num % 10] : "");
// For numbers 100 and above, process hundreds
const hundreds = Math.floor(num / 100);
const remainder = num % 100;
const result = words[hundreds] + " Hundred";
// If there is a remainder (i.e., 101-199, 201-299, etc.), handle it
if (remainder !== 0) {
return result + " and " + numberToWords(remainder);
return result;
function convertNumber() {
const num = parseInt(document.getElementById("numberInput").value);
if (num >= 0 && num <= 999) {
document.getElementById("result").innerText = numberToWords(num);
} else {
document.getElementById("result").innerText = "Please enter a number between 0 and
999.";
</script>
</head>
<body>
<h1>Convert Number to Words (0 to 999)</h1>
<input type="number" id="numberInput" min="0" max="999" placeholder="Enter a
number">
<button onclick="convertNumber()">Convert</button>
<p id="result"></p>
</body>
</html>
Output:
