itz_my_life9006
noughty_girlrsky
Program No: 1
Design the static homepage which must contain three frames. Top Frame:
Logo and the college name and the links to homepage, login page,
Registration page Catalogue page and the cart page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College Home Page</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
/* Top frame styling */ #top-frame {
display: flex;
justify-content: space-between; align-items: center;
background-color: #556B2F ; /* College color */ padding: 10px;
color: white;
#logo {
width: 50px; /* Size for the logo */
#college-name { font-size: 1.5em; font-weight: bold;
nav {
display: flex; gap: 15px;
}
nav a {
color: white;
text-decoration: none;
font-size: 1em;
nav a:hover {
text-decoration: underline;
</style>
</head>
<body>
<!-- Top Frame -->
<div id="top-frame">
<!-- College Logo -->
<img id="logo" src="[Link]" alt="College Logo">
<!-- College Name -->
<div id="college-name">IIMT College Of Engineering</div>
<!-- Navigation Links -->
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">Login</a>
<a href="[Link]">Registration</a>
<a href="[Link]">Catalogue</a>
<a href="[Link]">Cart</a>
</nav>
</div>
</body>
</html>
Program No: 2
Design the 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 Page</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif; background-color: #FFFF00; display: flex;
justify-content: center; align-items: center; height: 100vh;
/* Container for the login form */
.login-container { background-color: baige; padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 300px;
h2 {
text-align: center; margin-bottom: 20px; color: #800000;
.login-container label { display: block; margin-bottom: 8px; font-weight: bold;
.login-container input[type="text"],
.login-container input[type="password"] { width: 100%;
padding: 10px; margin-bottom: 15px;
border: 1px solid #ccc; border-radius: 5px;
box-sizing: border-box;
}
.login-container input[type="submit"] { width: 100%;
padding: 10px;
background-color: #801a00; border: none;
color: white; border-radius: 5px; font-size: 16px; cursor: pointer;
.login-container input[type="submit"]:hover { background-color: #be2f2f;
.login-container .options { text-align: center; margin-top: 10px;
.login-container .options a { color: #c9630f;
text-decoration: none;
.login-container .options a:hover { text-decoration: underline;
</style>
</head>
<body>
<div class="login-container">
<h2>Login</h2>
<!-- Login Form -->
<form action="[Link]" method="POST">
<!-- Username -->
<label for="username">Username</label>
<input type="text" id="username" name="username" required>
<!-- Password -->
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<!-- Login Button -->
<input type="submit" value="Login">
</form>
<!-- Options for Registration and Password Recovery -->
<div class="options">
<p><a href="[Link]">Register</a> | <a href="[Link]">Forgot Password?</a></p>
</div>
</div>
</body>
</html>
Program No: 3
Design the Catologue Page: The Catologue page should contain the details of all
the books available in the [Link] details should contain the following.
Snap short of Cover page
Author Name
Publisher.
Price.
Add to Cart Button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Catalogue Page</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #33FF66;
margin: 0;
padding: 20px;
h2 {
text-align: center;
color: #d30e0e;
margin-bottom: 30px;
/* Styling the table */
table {
width: 100%;
border-collapse: collapse;
background-color: light pink;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
th,
td {
padding: 15px;
text-align: center;
border-bottom: 1px solid #ddd;
th {
background-color: #CC3366;
color: white;
td {
vertical-align: middle;
/* Cover image styling */
.book-cover {
width: 80px;
height: auto;
/* Add to cart button styling */
.add-to-cart-btn {
padding: 10px 15px;
background-color: #b10000dc;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.add-to-cart-btn:hover {
background-color: #aa0505;
</style>
</head>
<body>
<!-- Page Header -->
<h2>Available Books</h2>
<!-- Book Catalogue Table -->
<table>
<thead>
<tr>
<th>Cover</th>
<th>Author Name</th>
<th>Publisher</th>
<th>Price</th>
<th>Add to Cart</th>
</tr>
</thead>
<tbody>
<!-- Example Row 1 -->
<tr>
<td>
<img
src="[Link]
[Link]?q=90&crop=false"
alt="Book 1 Cover"
class="book-cover"
/>
</td>
<td>Rich Dad Poor Dad</td>
<td>Buisness Books </td>
<td>$50.00</td>
<td><button class="add-to-cart-btn">Add to Cart</button></td>
</tr>
<!-- Example Row 2 -->
<tr>
<td>
<img
src="[Link]
alt="Book 2 Cover"
class="book-cover"
/>
</td>
<td>Lucifer Was Innocent</td>
<td>Unknown</td>
<td>$45.00</td>
<td><button class="add-to-cart-btn">Add to Cart</button></td>
</tr>
<!-- Example Row 3 -->
<tr>
<td>
<img src="[Link]
harry-potter-9781683837510_hr.jpg"
alt="Book 2 Cover"
class="book-cover"
/>
</td>
<td>Art Of Harry Poter</td>
<td>J.K. Rowling</td>
<td>$55.00</td>
<td><button class="add-to-cart-btn">Add to Cart</button></td>
</tr>
<!-- Additional rows as needed -->
</tbody>
</table>
</body>
</html>
Program No: 4
Cart Page: Design the Cart Page contain the detail about the book which
are added to the cart.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cart Page</title>
<style>
body {
font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0;
padding: 20px;
h2 {
text-align: center; color: #f80a0a; margin-bottom: 30px;
/* Table styling */ table {
width: 100%;
border-collapse: collapse; background-color: white;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
th, td {
padding: 15px; text-align: center;
border-bottom: 1px solid #ddd;
th {
background-color: #d80a03; color: white;
td {
vertical-align: middle;
.book-cover { width: 80px; height: auto;
}
/* Quantity input box */
.quantity-input { width: 50px; padding: 5px; text-align: center;
/* Remove button */
.remove-btn { padding: 10px 15px;
background-color: #d9534f; color: white;
border: none; border-radius: 5px; cursor: pointer;
.remove-btn:hover { background-color: #c9302c;
/* Checkout section styling */
.checkout-container { text-align: right; margin-top: 20px;
.total-price {
font-size: 1.5em; color: #f00606;
.checkout-btn { padding: 10px 20px;
background-color: #800f00; color: white;
border: none; border-radius: 5px;
font-size: 1.2em; cursor: pointer;
.checkout-btn:hover { background-color: #ec670f;
</style>
</head>
<body>
<!-- Page Header -->
<h2>Your Cart</h2>
<!-- Cart Table -->
<table>
<thead>
<tr>
<th>Cover</th>
<th>Book Title</th>
<th>Author</th>
<th>Price</th>
<th>Quantity</th>
<th>Total</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<!-- Example Row 1 -->
<tr>
<td><img src="[Link]
rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9tLm1l/ZGlhLWFtYXpvbi5j/b20vaW1hZ2VzL0kv/
OTFwSStSK0dFN0wu/anBn" alt="Book 1 Cover" class="book-cover"></td>
<td>Harry Potter and the Philosopher's Stone</td>
<td>J.K. Rowling</td>
<td>$20.00</td>
<td><input type="number" value="1" class="quantity-input"></td>
<td>$20.00</td>
<td><button class="remove-btn">Remove</button></td>
</tr>
<!-- Example Row 2 -->
<tr>
<td><img src="[Link]
rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly9pbWFn/ZXMtbmEuc3NsLWlt/YWdlcy1hbWF6b24u/
Y29tL2ltYWdlcy9J/LzkxN0lKRGZrMzZM/LmpwZw" alt="Book 2 Cover" class="book-cover"></td>
<td>Goodnight PunPun</td>
<td>Inio Asano</td>
<td>$15.00</td>
<td><input type="number" value="2" class="quantity-input"></td>
<td>$30.00</td>
<td><button class="remove-btn">Remove</button></td>
</tr>
<!-- Additional rows for more books -->
</tbody>
</table>
<!-- Checkout Section -->
<div class="checkout-container">
<p class="total-price">Total: $50.00</p>
<button class="checkout-btn">Proceed to Checkout</button>
</div>
</body>
</html>
ProgramNo:5
Design the Registration Page: Create the Registration form for the following
fields
Name(Text field)
Password(Password field)
Email(text field)
Phone Number(text-field)
Sex(Radio button)
Date of Birth(3selectboxes)
Language Known(checkboxes-English, Telugu, Hindi, Tamil)
Address(text area)
<!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>
<style>
body {
font-family: Arial, sans-serif; background-color: #CC00CC; margin: 0;
padding: 20px;
h2 {
text-align: center; color: #33FF33; margin-bottom: 30px;
.registration-container {
display: flex;
flex-direction: column; background-color: blue; padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 400px;
margin: 0 auto;
label {
font-weight: bold; margin-bottom: 5px;
}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
select, textarea {
width: 100%; padding: 10px; margin-bottom: 15px;
border: 1px solid #ccc; border-radius: 5px;
box-sizing: border-box;
textarea { height: 100px;
.radio-group,
.checkbox-group { margin-bottom: 15px;
.radio-group label,
.checkbox-group label { font-weight: normal; margin-right: 20px;
/* Submit button */ input[type="submit"] {
width: 100%; padding: 10px;
background-color: #fc0c0c; color: white;
border: none; border-radius: 5px;
font-size: 16px; cursor: pointer;
input[type="submit"]:hover { background-color: #003366;
/* DOB section */
.dob-container select { width: 30%;
display: flex; margin-right: 5px;
</style>
</head>
<body>
<!-- Page Header -->
<h2>Registration Form</h2>
<!-- Registration Form Container -->
<div class="registration-container">
<form action="[Link]" method="POST">
<!-- Name -->
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<!-- Password -->
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<!-- Email -->
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<!-- Phone Number -->
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" required>
<!-- Sex (Radio buttons) -->
<div class="radio-group">
<label>Sex</label>
<input type="radio" id="male" name="sex" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="sex" value="female" required>
<label for="female">Female</label>
<input type="radio" id="other" name="sex" value="other" required>
<label for="other">Other</label>
</div>
<!-- Date of Birth (Select boxes) -->
<label>Date of Birth</label>
<div class="dob-container">
<select name="day" required>
<option value="">Day</option>
<!-- Days 1 to 31 -->
<script>
for (let i = 1; i <= 31; i++) {
[Link]('<option value="' + i + '">' + i + '</option>');
</script>
</select>
<select name="month" required>
<option value="">Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="September">September</option>
<option value="October">October</option>
<option value="November">November</option>
<option value="December">December</option>
</select>
<select name="year" required>
<option value="">Year</option>
<!-- Years 1900 to 2024 -->
<script>
const currentYear = new Date().getFullYear(); for (let i = currentYear; i >= 1900; i--) {
[Link]('<option value="' + i + '">' + i + '</option>');
</script>
</select>
</div>
<!-- Language Known (Checkboxes) -->
<div class="checkbox-group">
<label>Languages Known</label>
<input type="checkbox" id="english" name="language" value="English">
<label for="english">English</label>
<input type="checkbox" id="telugu" name="language" value="Telugu">
<label for="telugu">Telugu</label>
<input type="checkbox" id="hindi" name="language" value="Hindi">
<label for="hindi">Hindi</label>
<input type="checkbox" id="tamil" name="language" value="Tamil">
<label for="tamil">Tamil</label>
</div>
<!-- Address (Text area) -->
<label for="address">Address</label>
<textarea id="address" name="address" required></textarea>
<!-- Submit Button -->
<input type="submit" value="Register">
</form>
</div>
</body>
</html>
Program No: 6
Write JavaScript to validate the following fields of the above registration
page.
Name (Name should contains alphabets and the length should not be less
than 6 characters)
Password(Password should not be less than 6 character length)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Page with Validation</title>
<style>
body {
font-family: Arial, sans-serif; background-color: #99FF66; margin: 0;
padding: 20px;
h2 {
text-align: center; color: #CCCC99; margin-bottom: 30px;
.registration-container {
display: flex;
flex-direction: column; background-color: blue; padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 400px;
margin: 0 auto;
label {
font-weight: bold; margin-bottom: 5px;
}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
select, textarea {
width: 100%; padding: 10px; margin-bottom: 15px;
border: 1px solid #ccc; border-radius: 5px;
box-sizing: border-box;
textarea { height: 100px;
.radio-group,
.checkbox-group { margin-bottom: 15px;
.radio-group label,
.checkbox-group label { font-weight: normal; margin-right: 20px;
/* Submit button */ input[type="submit"] {
width: 100%; padding: 10px;
background-color: #fc0c0c; color: white;
border: none; border-radius: 5px;
font-size: 16px; cursor: pointer;
input[type="submit"]:hover { background-color: #662900;
/* DOB section */
.dob-container select { width: 30%;
display: flex; margin-right: 5px;
</style>
</head>
<body>
<h2>Registration Form</h2>
<div class="registration-container">
<form action="[Link]" method="POST" onsubmit="return validateForm()">
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" required>
<div class="radio-group">
<label>Sex</label>
<input type="radio" id="male" name="sex" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="sex" value="female" required>
<label for="female">Female</label>
<input type="radio" id="other" name="sex" value="other" required>
<label for="other">Other</label>
</div>
<label>Date of Birth</label>
<div class="dob-container">
<label for="year">Year:</label>
<select id="year" name="year">
</select>
<label for="month">Month:</label>
<select id="month" name="month">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<label for="date">Date:</label>
<select id="date" name="date">
</select>
</div>
<div class="checkbox-group">
<label>Languages Known</label>
<input type="checkbox" id="english" name="language" value="English">
<label for="english">English</label>
<input type="checkbox" id="telugu" name="language" value="Telugu">
<label for="telugu">Telugu</label>
<input type="checkbox" id="hindi" name="language" value="Hindi">
<label for="hindi">Hindi</label>
<input type="checkbox" id="tamil" name="language" value="Tamil">
<label for="tamil">Tamil</label>
</div>
<label for="address">Address</label>
<textarea id="address" name="address" required></textarea>
<input type="submit" value="Register">
</form>
</div>
<script>
function validateForm() {
var name = [Link]('name').value;
var password = [Link]('password').value;
var nameRegex = /^[A-Za-z]+$/;
if ([Link] < 6 || ) {
alert("Name should contain only alphabets and be at least 6 characters long."); return false; // Prevent
form submission
if ([Link] < 6) {
alert("Password should be at least 6 characters long."); return false; // Prevent form submission
function generateYears(startYear) {
const currentYear = new Date().getFullYear();
const years = [];
for (let year = startYear; year <= currentYear; year++) {
[Link](year);
return years;
function generateMonthDates(year, month) {
const dates = [];
const daysInMonth = new Date(year, month + 1, 0).getDate();
for (let day = 1; day <= daysInMonth; day++) {
const dayString = day < 10 ? `0${day}` : `${day}`; // Format day as DD
[Link](dayString); // Push formatted day to the array
return dates;
const yearSelect = [Link]("year");
const currentYear = new Date().getFullYear();
const years = generateYears(2020); // You can change the starting year
[Link](year => {
const option = [Link]("option");
[Link] = year;
[Link] = year;
[Link](option);
});
function updateDateDropdown() {
const year = parseInt([Link]);
const month = parseInt([Link]("month").value);
const dateSelect = [Link]("date");
[Link] = "";
const dates = generateMonthDates(year, month);
[Link](date => {
const option = [Link]("option");
[Link] = date;
[Link] = date;
[Link](option);
});
[Link]("change", updateDateDropdown);
[Link]("month").addEventListener("change", updateDateDropdown);
[Link] = updateDateDropdown;
</script>
</body>
</html>
ProgramNo:7
E- MAIL ( should not contain any valid and must follow the standard
pattern name@[Link])
Phone Number (Phone Number should contain 10 digit only)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Page with Validation</title>
<style>
body {
font-family: Arial, sans-serif; background-color: #f5f5f5; margin: 0;
padding: 20px;
h2 {
text-align: center; color: #800f00; margin-bottom: 30px;
.registration-container {
display: flex;
flex-direction: column; background-color: white; padding: 40px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); width: 400px;
margin: 0 auto;
label {
font-weight: bold; margin-bottom: 5px;
input[type="text"], input[type="password"], input[type="email"], input[type="tel"],
select, textarea {
width: 100%; padding: 10px; margin-bottom: 15px;
border: 1px solid #ccc; border-radius: 5px;
box-sizing: border-box;
textarea { height: 100px;
.radio-group,
.checkbox-group { margin-bottom: 15px;
.radio-group label,
.checkbox-group label { font-weight: normal; margin-right: 20px;
/* Submit button */ input[type="submit"] {
width: 100%; padding: 10px;
background-color: #fc0c0c; color: white;
border: none; border-radius: 5px;
font-size: 16px; cursor: pointer;
input[type="submit"]:hover { background-color: #662900;
/* DOB section */
.dob-container select { width: 30%;
display: flex; margin-right: 5px;
</style>
</head>
<body>
<!-- Page Header -->
<h2>Registration Form</h2>
<!-- Registration Form Container -->
<div class="registration-container">
<!-- Registration form with the onsubmit event to validate the form -->
<form id="registrationForm" action="[Link]" method="POST"
onsubmit="return validateForm()">
<!-- Name -->
<label for="name">Name</label>
<input type="text" id="name" name="name" required>
<!-- Password -->
<label for="password">Password</label>
<input type="password" id="password" name="password" required>
<!-- Email -->
<label for="email">Email</label>
<input type="email" id="email" name="email" required>
<!-- Phone Number -->
<label for="phone">Phone Number</label>
<input type="tel" id="phone" name="phone" required>
<!-- Sex (Radio buttons) -->
<div class="radio-group">
<label>Sex</label>
<input type="radio" id="male" name="sex" value="male" required>
<label for="male">Male</label>
<input type="radio" id="female" name="sex" value="female" required>
<label for="female">Female</label>
<input type="radio" id="other" name="sex" value="other" required>
<label for="other">Other</label>
</div>
<!-- Date of Birth (Select boxes) -->
<label>Date of Birth</label>
<div class="dob-container">
<label for="year">Year:</label>
<select id="year" name="year">
</select>
<label for="month">Month:</label>
<select id="month" name="month">
<option value="0">January</option>
<option value="1">February</option>
<option value="2">March</option>
<option value="3">April</option>
<option value="4">May</option>
<option value="5">June</option>
<option value="6">July</option>
<option value="7">August</option>
<option value="8">September</option>
<option value="9">October</option>
<option value="10">November</option>
<option value="11">December</option>
</select>
<label for="date">Date:</label>
<select id="date" name="date">
</select>
</div>
<!-- Language Known (Checkboxes) -->
<div class="checkbox-group">
<label>Languages Known</label>
<input type="checkbox" id="english" name="language" value="English">
<label for="english">English</label>
<input type="checkbox" id="telugu" name="language" value="Telugu">
<label for="telugu">Telugu</label>
<input type="checkbox" id="hindi" name="language" value="Hindi">
<label for="hindi">Hindi</label>
<input type="checkbox" id="tamil" name="language" value="Tamil">
<label for="tamil">Tamil</label>
</div>
<!-- Address (Text area) -->
<label for="address">Address</label>
<textarea id="address" name="address" required></textarea>
<!-- Submit Button -->
<input type="submit" value="Register">
</form>
</div>
<script>
function validatePhoneNumber(phoneNumber) {
const phoneRegex = /^\d{10}$/; // Regex for exactly 10 digits
return [Link](phoneNumber);
function validateForm() {
var name = [Link]('name').value;
var password = [Link]('password').value;
var email = [Link]('email').value;
var phone = [Link]('phone').value;
// Regular expressions for validation
if ([Link] < 6 || ) {
alert("Name should contain only alphabets and be at least 6 characters long."); return false; // Prevent
form submission
if ([Link] < 6) {
alert("Password should be at least 6 characters long.");
return false; // Prevent form submission
// Email validation
if () {
alert("Please enter a valid email address (e.g., name@[Link]).");
return false; // Prevent form submission
// Phone number validation
[Link]("registrationForm").addEventListener("submit", function(event) {
// Get the phone number from the input
const phoneNumber = [Link]("phone").value;
// Validate phone number
if (!validatePhoneNumber(phone)) {
alert("Please enter a valid 10-digit phone number.");
[Link](); // Prevent form submission
return false; // Stop the form submission
});
// if () {
// alert("Phone number should contain exactly 10 digits."); return false; // Prevent form submission
// }
function generateYears(startYear) {
const currentYear = new Date().getFullYear();
const years = [];
for (let year = startYear; year <= currentYear; year++) {
[Link](year);
}
return years;
function generateMonthDates(year, month) {
const dates = [];
const daysInMonth = new Date(year, month + 1, 0).getDate();
for (let day = 1; day <= daysInMonth; day++) {
const dayString = day < 10 ? `0${day}` : `${day}`; // Format day as DD
[Link](dayString); // Push formatted day to the array
return dates;
const yearSelect = [Link]("year");
const currentYear = new Date().getFullYear();
const years = generateYears(2020); // You can change the starting year
[Link](year => {
const option = [Link]("option");
[Link] = year;
[Link] = year;
[Link](option);
});
function updateDateDropdown() {
const year = parseInt([Link]);
const month = parseInt([Link]("month").value);
const dateSelect = [Link]("date");
[Link] = "";
const dates = generateMonthDates(year, month);
[Link](date => {
const option = [Link]("option");
[Link] = date;
[Link] = date;
[Link](option);
});
[Link]("change", updateDateDropdown);
[Link]("month").addEventListener("change", updateDateDropdown);
[Link] = updateDateDropdown;
// Get the form values
// If everything is valid, allow form submission return true;
</script>
</body>
</html>
ProgramNo:8
CSS: Design a Web Page Using CSS which include the
following :Use Different Fontstyle: Set a Background Image for
both page and single elements on the page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Beast Bears</title>
<style>
/* Global Styles */ body {
font-family: 'Arial', sans-serif; /* Default font for body */
background-image: url('[Link]
v=1636565927'); /* Background image for the entire page */ background-size: cover; /* Cover the whole
page */
color: white; /* Text color */ margin: 0;
padding: 0;
/* Header Styles */ header {
text-align: center; padding: 50px;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
header h1 {
font-family: 'Georgia', serif; /* Different font for header */ font-size: 3em; /* Header size */
/* Main Section Styles */ main {
padding: 20px;
/* Introduction Section */
.introduction {
background-image: url("[Link]
[Link]"); /* Background for introduction section */ background-size: cover; /* Cover the section
*/
padding: 20px; border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
.introduction h2 {
font-family: 'Courier New', monospace; /* Different font for introduction heading */
/* Content Section */
.content {
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent background */ padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); margin-top: 20px;
.content h2 {
font-family: 'Verdana', sans-serif; /* Different font for content heading */
/* Footer Section */
.footer {
text-align: center; padding: 10px;
background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */ position: relative; /* Keep
footer at the bottom */
.footer h2 {
font-family: 'Tahoma', sans-serif; /* Different font for footer heading */
</style>
</head>
<body>
<!-- Header Section -->
<header>
<h1>Beast Bears</h1>
</header>
<!-- Main Content Section -->
<main>
<!-- Introduction Section -->
<section class="introduction">
<h2>The Mysterious Nature of Bears</h2>
<p>
Bears are carnivoran mammals of the family Ursidae. They are classified as caniforms, or doglike
carnivorans. Although only eight species of bears are extant, they are widespread, appearing in a wide
variety of habitats throughout most of the Northern Hemisphere and partially in the Southern
Hemisphere.
</p>
<p>
Bears have been hunted since prehistoric times for their meat and fur; they have also been used
for bear-baiting and other forms of entertainment, such as being made to dance. With their powerful
physical presence, they play a prominent role in the arts, mythology, and other cultural aspects of
various human societies.
</p>
</section>
<!-- Content Section -->
<section class="content">
<h2>The Fascinating Traits of Bears</h2>
<p>
A bear's hearing ability is excellent, and like dogs, bears hear high pitches, exceeding human
frequency range and sensitivity.
<br><br>
Another is Bears see in colour and have good vision, similar to humans. Bears are fast; they can
run more than 60 kilometers an hour (37 mph) - that's twice as fast as an Olympic sprinter.
</p>
</section>
<!-- Content Section -->
<section class="content">
<h2>Popular Bear Breeds</h2>
<p>
There are various breeds of bears, each with their unique traits and personalities. Some of the
most popular breeds include:
<ul>
<li><strong>Brown Bear:</strong> Brown bears range in colour from almost black, brown to very light
brown or blonde. Size varies greatly depending on geographic location and general food
availability..</li>
<li><strong>Polar Bear:</strong> Polar bears are among the largest bears in the world. Adult males may
reach 800 kilograms (kg) or 1760 pounds (lbs).</li>
<li><strong>Sloth Bear:</strong> These shaggy-haired bears can be heard sucking up termites a long
distance away. Sloth bears are stocky with long, shaggy, black hair and a white U- or Y-shaped marking
on the chest.</li>
</ul>
</p>
</section>
<!-- Content Section -->
<section class="content">
<h2>Why Bears Are Dangerous</h2>
<p>
Bears don't make wonderful pets for a variety of reasons:
<ul>
<li><strong>High Maintenance:</strong> Bears are relatively independent and need high amount of
food.</li>
<li><strong>Non Affectionate:</strong> They doesn't get affectionate towrd humans.</li>
<li><strong>Risk Of Life:</strong> Bears are generally danger for human life.</li>
</ul>
</p>
</section>
</main>
<!-- Footer Section -->
<footer class="footer">
<h2>Thank You for Visiting the Beast Bears!</h2>
<p>Explore the fascinating lives of Bears and appreciate their Beast and mystery.</p>
</footer>
</body>
</html>