Dsa Anurag
Uploaded by
sharmaa73870Dsa Anurag
Uploaded by
sharmaa73870Name:- Anurag Sharma
INDEX
S.No. TITLE DATE SIGN.
01. EXPERIMENT:-01
02. EXPERIMENT:-02
03. EXPERIMENT:-03
04. EXPERIMENT:-04
05. EXPERIMENT:-05
06. EXPERIMENT:-06
07. EXPERIMENT:-07
08. EXPERIMENT:-08
09. EXPERIMENT:-09
10. EXPERIMENT:-10
Roll.No.:-2300430130009
Name:- Anurag Sharma
EXPERIMENT:-01
OBJECTIVE:-
HOMEPAGE:
• The static home page must contain three frames.
• Top frame: Logo and the college name and links to Homepage,Login page, Registration page,
Catalogue page and Cart page (the description of these pages will be given below).
For example: When you click the link “CSE” the catalogue forCSE Books should be
displayed in the Right frame. Right frame: The pages to the linksin the left frame must be
loaded here. Initially this page contains description of the website.
CODE:-
Other than index file we required three more file for homepage .
• top_frame.html
• left_frame.html
• initial_description.html
index.html
<!DOCTYPE html>
<html>
<head>
<title>BIET JHANSI</title>
</head>
<frameset rows="20%, 85%">
Roll.No.:-2300430130009
Name:- Anurag Sharma
<!-- Top Frame -->
<frame src="top_frame.html" name="topFrame" scrolling="no" noresize>
<!-- Bottom Frames (Left and Right) -->
<frameset cols="20%, 80%">
<!-- Left Frame -->
<frame src="left_frame.html" name="leftFrame" noresize>
<!-- Right Frame -->
<frame src="initial_description.html" name="rightFrame" noresize>
</frameset>
</frameset>
</html>
top_frame.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bundelkhand Institute of Engineering and Technology" located in Jhansi,
Uttar Pradesh, India</title>
<style>
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: rgb(91, 132, 255);
}
h1 {
text-align: center;
margin-top: 1px;
}
nav {
text-align: center;
}
table {
margin: 2px auto;
width: 10%;
}
td {
Roll.No.:-2300430130009
Name:- Anurag Sharma
height: 40px;
}
a{
text-decoration: none;
display: inline-block ;
padding: 10px;
color: #333;
font-weight: bold;
transition: background-color 0.3s;
}
a:hover {
background-color: #ddd;
}
img {
position: absolute; display:
inline-block;margin:
50px;
top: 0;
left: 0;
}
</style>
</head>
<body>
<h1>Bundelkhand Institute of Engineering and Technology ,Jhansi UttarPradesh</h1>
<nav>
<img src="https://media.9curry.com/uploads/organization/image/1299/biet-jhansi-
logo.png" alt="Library Logo" height="100">
<table>
<tr><a href="initial_description.html"
target="rightFrame">Homepage</a></tr>
<tr><a href="login_page.html" target="rightFrame">Login Page</a></tr>
<tr><a href="registration_page.html" target="rightFrame">Registration
Page</a></tr>
<tr><a href="catalogue_page.html" target="rightFrame">Catalogue
Page</a></tr>
<tr><a href="cart_page.html" target="rightFrame">Cart Page</a></tr>
</table>
</nav>
</body>
</html>
Roll.No.:-2300430130009
Name:- Anurag Sharma
left_frame.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Branches in Engineering</title>
<style>
body {
font-family: 'Arial', sans-serif;margin:
0;
padding: 0;
background-color: rgb(91, 132, 255);
}
h2 {
text-align: center;
margin-top: 10px;
}
ul {
list-style-type: none;
padding: 0;
margin: 20px;
}
li {
font-size: 18px; margin-
bottom: 10px; cursor:
pointer; transition: color
0.3s;
}
li:hover {
color: #ccddf0;
transition: background-color 0.3s;
}
</style>
</head>
<body>
<h2>Branches in Engineering</h2>
<ul>
<li onclick="loadCatalog('COMPUTER SCIENCE')">COMPUTER SCIENCE</li>
<li onclick="loadCatalog('ELECTRONICS')">ELECTRONICS</li>
Roll.No.:-2300430130009
Name:- Anurag Sharma
<li onclick="loadCatalog('CIVIL')">CIVIL</li>
</ul>
Roll.No.:-2300430130009
Name:- Anurag Sharma
<script>
function loadCatalog(branch) {
window.parent.rightFrame.location.href = branch.toLowerCase() +
'_catalog.html';
}
</script>
</body>
</html>
initial_description.html
<!DOCTYPE html>
<html>
<head>
<title>Right Frame</title>
</head>
<body>
<h2>Welcome to BIET JHANSI</h2>
</body>
</html>
OUTPUT
Roll.No.:-2300430130009
Name:- Anurag Sharma
EXPERMENT:-02
OBJECTIVE:-
LOGINPAGE:
This page looks like below:
CODE:-
Create a login file name “login_page.html”
<!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 {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
form {
background-color: #fff;
Roll.No.:-2300430130009
Name:- Anurag Sharma
padding: 20px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
h2 {
text-align: center;
}
label {
display: block;
margin: 10px 0 5px;
font-weight: bold;
}
input {
width: 100%; padding:
10px; margin-bottom:
10px;
box-sizing: border-box;
}
button {
background-color: #007BFF;
color: #fff;
padding: 10px; border:
none; border-radius:
5px;cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
button, input[type="reset"] {
margin-right: 10px;
}
</style>
</head>
<body>
<form>
<h2>Login Page</h2>
<label for="username">User Name:</label>
<input type="text" id="username" name="username" required>
Roll.No.:-2300430130009
Name:- Anurag Sharma
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
Roll.No.:-2300430130009
Name:- Anurag Sharma
<button type="submit">Submit</button><BR>
<input type="reset" value="Reset" >
</form>
</body>
</html>
OUTPUT
Roll.No.:-2300430130009
Name:- Anurag Sharma
EXPERIMENT:-03
OBJECTIVE:-
CATOLOGUE PAGE: The catalogue page should contain thedetails of all the books
available in the website in a
table. The details should contain the following:
1. Snap shot of Cover Page.
2. Author Name.
3. Publisher.
4. Price.
5. Add to cart button.
CODE:-
Create a new file name “catalogue_page.html”
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catalog Page</title>
Roll.No.:-2300430130009
Name:- Anurag Sharma
<style>
body {
font-family: 'Arial', sans-serif;margin:
0;
padding: 0;
background-color: #f5f5f5;
display: flex;
align-items: center; justify-
content: center;height:
100vh;
}
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
th, td {
padding: 12px; text-
align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #007BFF;
color: #fff;
}
img {
max-width: 100px;
max-height: 150px;
border-radius: 5px;
}
button {
background-color: #28a745;
color: #fff;
padding: 8px; border:
none; border-radius:
5px;cursor: pointer;
}
Roll.No.:-2300430130009
Name:- Anurag Sharma
button:hover {
Roll.No.:-2300430130009
Name:- Anurag Sharma
background-color: #218838;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Cover Page</th>
<th>Author Name</th>
<th>Publisher</th>
<th>Price</th>
<th>Add to Cart</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="https://cdn11.bigcommerce.com/s-
phtso/images/stencil/2048x2048/products/4501/5125/9781292263427 37591.1562044734.j
pg?c=2" alt="Book Cover"></td>
<td>Glenn Brookshear and Dennis Brylow</td>
<td>Pearson Education</td>
<td>$19.99</td>
<td><button>Add to Cart</button></td>
</tr>
<tr>
<td><img src="https://arspublications.com/wp-
content/uploads/2019/05/New-DIGITAL-ELECTRONICS-A-784x1024.jpg"
alt="BookCover"></td>
<td>D.Edwin Dhas</td>
<td>ARS Publication</td>
<td>$24.99</td>
<td><button>Add to Cart</button></td>
</tr>
<tr>
<td><img src="https://th.bing.com/th/id/OIP.jtfVbyZe-
W2SP70gFtyBMgHaK0?pid=ImgDet&rs=1" alt="Book Cover"></td>
<td>Errol Van Amsterdam</td>
<td>JUTA</td>
<td>$14.99</td>
<td><button>Add to Cart</button></td>
</tr>
</tbody>
</table>
</body>
Roll.No.:-2300430130009
Name:- Anurag Sharma
</html>
Roll.No.:-2300430130009
Name:- Anurag Sharma
OUTPUT
Roll.No.:-2300430130009
Name:- Anurag Sharma
EXPERIMENT:-04
OBJECTIVE:-
CARTPAGE: The cart page contains the details about the books whichare added to the cart. The cart page
should
look like this:
CODE:-
Create a new file name “cart_page.html”
<!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;
margin: 0;
padding: 0;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
table {
width: 80%;
border-collapse: collapse;
margin: 20px auto;
Roll.No.:-2300430130009
Name:- Anurag Sharma
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
th, td {
padding: 12px; text-
align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #007BFF;
color: #fff;
}
td img {
max-width: 80px;
max-height: 120px;
border-radius: 5px;
}
button {
background-color: #dc3545;
color: #fff;
padding: 8px; border:
none; border-radius:
5px;cursor: pointer;
}
button:hover {
background-color: #c82333;
}
.total {
text-align: right;
padding: 10px; font-
weight: bold;display:
flex;
justify-content: space-between;align-
items: center;
}
.buy-now button {
background-color: #28a745;
Roll.No.:-2300430130009
Name:- Anurag Sharma
color: #fff;
padding: 12px;
Roll.No.:-2300430130009
Name:- Anurag Sharma
border: none; border-
radius: 5px;cursor:
pointer;
}
.buy-now button:hover {
background-color: #218838;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Book Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="https://cdn11.bigcommerce.com/s-
phtso/images/stencil/2048x2048/products/4501/5125/9781292263427 37591.1562044734.j
pg?c=2" alt="Book Cover">
COMPUTER SCIENCE
</td>
<td>$19.99</td>
<td>2</td>
<td>$39.98</td>
<td><button>Remove</button></td>
</tr>
<tr>
<td>
<img src="https://arspublications.com/wp-
content/uploads/2019/05/New-DIGITAL-ELECTRONICS-A-784x1024.jpg" alt="Book Cover">
DIGITAL ELECTRONICS
</td>
<td>$24.99</td>
<td>1</td>
<td>$24.99</td>
<td><button>Remove</button></td>
</tr>
Roll.No.:-2300430130009
Name:- Anurag Sharma
<!-- Add more rows as needed -->
</tbody>
<tfoot>
Roll.No.:-2300430130009
Name:- Anurag Sharma
<tr class="total">
<td colspan="3">Total Amount:</td>
<td>$64.97</td>
<td class="buy-now"><button>Buy Now</button></td>
</tr>
</tfoot>
</table>
</body>
</html>
OUTPUT
Roll.No.:-2300430130009
Name:- Anurag Sharma
EXPERIMENT:-05
OBJECTIVE:-
REGISTRATION PAGE : Create a“ registration form“ with thefollowing fields
1)Name (Text field) 2)Password (password
field)
3) E-mailid(text field)
4) Phone Number(text field)
5) Sex(radio button)
6) Date of birth(3 select boxes)
7) Languages known(checkboxes–English, Telugu, Hindi, Tamil)
8) Address(text area)
CODE:-
Create a new file name “registration_page.html”
<!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;
margin: 0;
padding: 0;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
Roll.No.:-2300430130009
Name:- Anurag Sharma
#registration-frame {
width: 60%;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
box-sizing: border-box;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input, select, textarea {width:
100%; padding: 8px;
margin-bottom: 12px; box-
sizing: border-box;
}
textarea {
height: 80px;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 5px; vertical-
align: middle;
}
button {
background-color: #007BFF;
color: #fff;
padding: 12px; border:
none; border-radius:
5px;cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
Roll.No.:-2300430130009
Name:- Anurag Sharma
.radio-group,
Roll.No.:-2300430130009
Name:- Anurag Sharma
.checkbox-group {
display: flex; flex-
wrap: wrap;
margin-bottom: 12px;
}
.radio-group label,
.checkbox-group label {
margin-right: 20px;
display: flex; align-
items: center;
}
.radio-group label input,
.checkbox-group label input {
margin-right: 5px;
}
</style>
</head>
<body>
<div id="registration-frame">
<form>
<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">E-mail ID:</label>
<input type="text" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" required>
<label>Sex:</label>
<div class="radio-group">
<label for="male"><input type="radio" id="male" name="sex"
value="male"> Male</label>
<label for="female"><input type="radio" id="female" name="sex"
value="female"> Female</label>
</div>
<label for="dob">Date of Birth:</label>
<div style="display: flex; gap: 5px;">
<select id="dob-day" name="dob-day" style="flex: 1;"></select>
Roll.No.:-2300430130009
Name:- Anurag Sharma
<select id="dob-month" name="dob-month" style="flex: 1;"></select>
<select id="dob-year" name="dob-year" style="flex: 1;"></select>
</div>
Roll.No.:-2300430130009
Name:- Anurag Sharma
<label>Languages known:</label>
<div class="checkbox-group">
<label for="english"><input type="checkbox" id="english"
name="languages" value="english"> English</label>
<label for="telugu"><input type="checkbox" id="telugu"
name="languages" value="telugu"> Telugu</label>
<label for="hindi"><input type="checkbox" id="hindi"
name="languages" value="hindi"> Hindi</label>
<label for="tamil"><input type="checkbox" id="tamil"
name="languages" value="tamil"> Tamil</label>
</div>
<label for="address">Address:</label>
<textarea id="address" name="address"></textarea>
<button type="submit">Register</button>
</form>
</div>
</body>
</html>
OUTPUT
Roll.No.:-2300430130009
Name:- Anurag Sharma
EXPERIMENT:-06
OBJECTIVE:-
Js VALIDATION: Write JavaScript to validate the following fields ofthe above registration page.
1. Name (Name should contains alphabets and the length should not beless than 6 characters).
2. Password (Password should not be less than 6 characters length).
CODE:-
We have to make changes in “registration_page.html”.
<!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;
margin: 0;
padding: 0;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#registration-frame {
width: 60%;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
box-sizing: border-box;
}
Roll.No.:-2300430130009
Name:- Anurag Sharma
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input, select, textarea {width:
100%; padding: 8px;
margin-bottom: 12px; box-
sizing: border-box;
}
textarea {
height: 80px;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 5px; vertical-
align: middle;
}
button {
background-color: #007BFF;
color: #fff;
padding: 12px; border:
none; border-radius:
5px;cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.radio-group,
.checkbox-group {
display: flex; flex-
wrap: wrap;
margin-bottom: 12px;
}
.radio-group label,
.checkbox-group label {
margin-right: 20px;
display: flex; align-
Roll.No.:-2300430130009
Name:- Anurag Sharma
items: center;
Roll.No.:-2300430130009
Name:- Anurag Sharma
.radio-group label input,
.checkbox-group label input {
margin-right: 5px;
}
</style>
</head>
<body>
<div id="registration-frame">
<form 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">E-mail ID:</label>
<input type="text" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" required>
<label>Sex:</label>
<div class="radio-group">
<label for="male"><input type="radio" id="male" name="sex"
value="male"> Male</label>
<label for="female"><input type="radio" id="female" name="sex"
value="female"> Female</label>
</div>
<label for="dob">Date of Birth:</label>
<div style="display: flex; gap: 5px;">
<select id="dob-day" name="dob-day" style="flex: 1;"></select>
<select id="dob-month" name="dob-month" style="flex: 1;"></select>
<select id="dob-year" name="dob-year" style="flex: 1;"></select>
</div>
<label>Languages known:</label>
<div class="checkbox-group">
<label for="english"><input type="checkbox" id="english"
name="languages" value="english"> English</label>
<label for="telugu"><input type="checkbox" id="telugu"
name="languages" value="telugu"> Telugu</label>
Roll.No.:-2300430130009
Name:- Anurag Sharma
<label for="hindi"><input type="checkbox" id="hindi"
name="languages" value="hindi"> Hindi</label>
Roll.No.:-2300430130009
Name:- Anurag Sharma
<label for="tamil"><input type="checkbox" id="tamil"
name="languages" value="tamil"> Tamil</label>
</div>
<label for="address">Address:</label>
<textarea id="address" name="address"></textarea>
<button type="submit">Register</button>
</form>
</div>
<script>
function validateForm() {
// Get input values
var name = document.getElementById('name').value;
var password = document.getElementById('password').value;var
email = document.getElementById('email').value;
var phone = document.getElementById('phone').value;
// Validate Name
if (name.length < 6 || !/^[a-zA-Z]+$/.test(name)) {
alert('Name should contain alphabets, and the length should not beless than 6
characters.');
return false;
}
// Validate Password
if (password.length < 6) {
alert('Password should not be less than 6 characters length.');return false;
}
// Validate Email
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;if
(!emailRegex.test(email)) {
alert('Invalid email address.');return
false;
}
// Validate Phone Number var
phoneRegex = /^\d{10}$/;
if (!phoneRegex.test(phone)) {
alert('Invalid phone number. Please enter 10 digits without spaces
or dashes.');
return false;
}
Roll.No.:-2300430130009
Name:- Anurag Sharma
return true;
}
Roll.No.:-2300430130009
Name:- Anurag Sharma
</script>
</body>
</html>
OUTPUT
Roll.No.:-2300430130009
Name:- Anurag Sharma
EXPERIMENT:-07
OBJECTIVE:-
Js VALIDATION:
1. E-mailid (should not contain any invalid and must follow thestandard
pattern([email protected])
2. Phone Number(Phone number should contain 10 digits only).
CODE:-
We have to make changes in “registration_page.html”.
<!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;
margin: 0;
padding: 0;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
#registration-frame {
width: 60%;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
padding: 20px;
box-sizing: border-box;
}
label {
Roll.No.:-2300430130009
Name:- Anurag Sharma
display: block;
margin-bottom: 8px;
font-weight: bold;
}
input, select, textarea {width:
100%; padding: 8px;
margin-bottom: 12px; box-
sizing: border-box;
}
textarea {
height: 80px;
}
input[type="radio"],
input[type="checkbox"] {
margin-right: 5px; vertical-
align: middle;
}
button {
background-color: #007BFF;
color: #fff;
padding: 12px; border:
none; border-radius:
5px;cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
.radio-group,
.checkbox-group {
display: flex; flex-
wrap: wrap;
margin-bottom: 12px;
}
.radio-group label,
.checkbox-group label {
margin-right: 20px;
display: flex; align-
items: center;
Roll.No.:-2300430130009
Name:- Anurag Sharma
Roll.No.:-2300430130009
Name:- Anurag Sharma
.radio-group label input,
.checkbox-group label input {
margin-right: 5px;
}
</style>
</head>
<body>
<div id="registration-frame">
<form 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">E-mail ID:</label>
<input type="text" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="text" id="phone" name="phone" required>
<label>Sex:</label>
<div class="radio-group">
<label for="male"><input type="radio" id="male" name="sex"
value="male"> Male</label>
<label for="female"><input type="radio" id="female" name="sex"
value="female"> Female</label>
</div>
<label for="dob">Date of Birth:</label>
<div style="display: flex; gap: 5px;">
<select id="dob-day" name="dob-day" style="flex: 1;"></select>
<select id="dob-month" name="dob-month" style="flex: 1;"></select>
<select id="dob-year" name="dob-year" style="flex: 1;"></select>
</div>
<label>Languages known:</label>
<div class="checkbox-group">
<label for="english"><input type="checkbox" id="english"
name="languages" value="english"> English</label>
<label for="telugu"><input type="checkbox" id="telugu"
name="languages" value="telugu"> Telugu</label>
<label for="hindi"><input type="checkbox" id="hindi"
Roll.No.:-2300430130009
Name:- Anurag Sharma
name="languages" value="hindi"> Hindi</label>
<label for="tamil"><input type="checkbox" id="tamil"
name="languages" value="tamil"> Tamil</label>
Roll.No.:-2300430130009
Name:- Anurag Sharma
</div>
<label for="address">Address:</label>
<textarea id="address" name="address"></textarea>
<button type="submit">Register</button>
</form>
</div>
<script>
function validateForm() {
// Get input values
var name = document.getElementById('name').value;
var password = document.getElementById('password').value;var
email = document.getElementById('email').value;
var phone = document.getElementById('phone').value;
// Validate Name
if (name.length < 6 || !/^[a-zA-Z]+$/.test(name)) {
alert('Name should contain alphabets, and the length should not beless than 6
characters.');
return false;
}
// Validate Password
if (password.length < 6) {
alert('Password should not be less than 6 characters length.');return false;
}
// Validate Email
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;if
(!emailRegex.test(email)) {
alert('Invalid email address.');return
false;
}
// Validate Phone Number var
phoneRegex = /^\d{10}$/;
if (!phoneRegex.test(phone)) {
alert('Invalid phone number. Please enter 10 digits without spaces
or dashes.');
return false;
}
return true;
}
Roll.No.:-2300430130009
Name:- Anurag Sharma
</script>
</body>
Roll.No.:-2300430130009
Name:- Anurag Sharma
</html>
OUTPUT
Roll.No.:-2300430130009
Name:- Anurag Sharma
EXPERIMENT:-08
OBJECTIVE:-
CSS: Design a web page using CSS(Cascading Style Sheets) whichincludes the following:
1) Use different font, styles:
In the style definition you define how each selector should work(font,color etc.). Then, in the body of
your pages, you refer to these selectors to activate the styles.
2) Set a background image for both the page and single elements on thepage.
CODE:-
Create a new index file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Design Example</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
background-image:
url('https://i.ytimg.com/vi/EFiyQz_V4WI/maxresdefault.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0;
padding: 0;
color: #333;
height: 100vh; /* Ensure the body takes the full height of the viewport
*/
display: flex;
Roll.No.:-2300430130009
Name:- Anurag Sharma
flex-direction: column;
align-items: center; justify-
content: center;
}
h1 {
font-family: 'Georgia', serif;color:
#007BFF;
}
p{
font-style: italic;line-
height: 1.5;
}
.container {
width: 80%; margin:
20px auto;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.section-with-image {
color: #fff; padding:
40px; text-align:
center;margin: 20px
auto;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.section-with-image h2 {
font-size: 36px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to CSS Design</h1>
<p>This is a simple example of a web page designed using CSS with differentfont styles
and background images.</p>
</div>
Roll.No.:-2300430130009
Name:- Anurag Sharma
<div class="section-with-image">
<h2>Section with Background Image</h2>
Roll.No.:-2300430130009
Name:- Anurag Sharma
<p>This section has a background image and white text.</p>
</div>
</body>
</html>
OUTPUT
Roll.No.:-2300430130009
Name:- Anurag Sharma
EXPERIMENT:09
OBJECTIVE:-
CSS:
1) Control the repetition of the image with the background-repeatproperty.
2) Define styles for links asA:link
A:visited
A:active
A:hover
CODE:-
Doing some modification in index file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Styles Example</title>
<style>
body {
font-family: 'Arial', sans-serif;
background-color: #f5f5f5;
background-image:
url('https://i.ytimg.com/vi/EFiyQz_V4WI/maxresdefault.jpg');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
margin: 0;
padding: 0;
color: #333;
height: 100vh;
display: flex;
flex-direction: column;
Roll.No.:-2300430130009
Name:- Anurag Sharma
align-items: center; justify-
content: center;
}
h1 {
font-family: 'Georgia', serif;color:
#007BFF;
}
p{
font-style: italic;line-
height: 1.5;
}
.container {
width: 80%; margin:
20px auto;
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.section-with-image {
color: #fff; padding:
40px; text-align:
center;margin: 20px
auto;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
.section-with-image h2 {
font-size: 36px;
margin-bottom: 20px;
}
/* Styles for Links */
a:link {
color: #007BFF;
text-decoration: none;
}
a:visited {
color: #663399;
Roll.No.:-2300430130009
Name:- Anurag Sharma
a:hover {
Roll.No.:-2300430130009
Name:- Anurag Sharma
color: #ff4500;
text-decoration: underline;
}
a:active {
color: #000080;
}
</style>
</head>
<body>
<div class="container">
<h1>Welcome to BIET Jhansi</h1>
<p>This is a simple example of a web page designed using CSS with different
font styles, background images, and link styles.</p>
</div>
<div class="section-with-image">
<h2>Section with Background Image</h2>
<p>This section has a background image and white text.</p>
</div>
<div class="container">
<p>Visit our <a href="http://bietjhs.ac.in/">website</a> for more
information.</p>
</div>
</body>
</html>
OUTPUT
Roll.No.:-2300430130009
Name:- Anurag Sharma
EXPERIMENT:-10
OBJECTIVE:-
Consider a small topic of your choice on which you can develop staticWebpages and try to implement
all topics of html, CSS and Js within the topic.Choose any one topic.
1. Your Own Portfolio
2. To-Do List
3. Survey Form
4. A Tribute Page
5. A Questionnaire
CODE:-
index.html :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BIET Hostel Mess Food Quality Survey</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
background: url('https://i.ytimg.com/vi/EFiyQz_V4WI/maxresdefault.jpg')
center/cover no-repeat;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
Roll.No.:-2300430130009
Name:- Anurag Sharma
align-items: center; justify-
content: center;height:
100vh;
color: #fff; /* Text color */
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
form {
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);width:
400px;
}
label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: #333; /* Label color */
}
input, select, textarea {width:
100%; padding: 8px;
margin-bottom: 16px; box-
sizing: border-box;border:
1px solid #ccc;border-
radius: 4px;
}
button {
background-color: #007BFF;
color: #fff;
padding: 10px; border:
none; border-radius:
5px;cursor: pointer;
}
button:hover {
background-color: #0056b3;
}
Roll.No.:-2300430130009
Name:- Anurag Sharma
.error {
color: red; margin-
top: 5px;
}
</style>
</head>
<body>
<h1>BIET Hostel Mess Food Quality Survey</h1>
<form id="surveyForm" onsubmit="return submitForm()">
<label for="name">Your Name:</label>
<input type="text" id="name" name="name" required>
<label for="roomNumber">Room Number:</label>
<input type="text" id="roomNumber" name="roomNumber" required>
<label for="mealRating">Rate Today's Meal (1-10):</label>
<input type="number" id="mealRating" name="mealRating" min="1" max="10"
required>
<label for="feedback">Share Your Feedback:</label>
<textarea id="feedback" name="feedback" rows="4" required></textarea>
<button type="submit">Submit</button>
<div id="error-message" class="error"></div>
</form>
<script>
function submitForm() {
var name = document.getElementById('name').value;
var roomNumber = document.getElementById('roomNumber').value; var
mealRating = document.getElementById('mealRating').value; var
feedback = document.getElementById('feedback').value;
// Validate the form
if (name === "" || roomNumber === "" || mealRating === "" || feedback
=== "") {
document.getElementById('error-message').innerHTML = "All fields
are required!";
return false;
}
if (mealRating < 1 || mealRating > 10) { document.getElementById('error-
message').innerHTML = "Meal rating
must be between 1 and 10.";
Roll.No.:-2300430130009
Name:- Anurag Sharma
return false;
}
Roll.No.:-2300430130009
Name:- Anurag Sharma
// Additional validation logic can be added here
// Redirect to the thank you page
window.location.href = 'thankyou.html';
// Prevent the default form submission
return false;
}
</script>
</body>
</html>
thankyou.html :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Thank You</title>
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap"
rel="stylesheet">
<style>
body {
font-family: 'Poppins', sans-serif;
background: url('https://i.ytimg.com/vi/EFiyQz_V4WI/maxresdefault.jpg')
center/cover no-repeat;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
color: #2c5234; /* Dark green for better visibility on a forest
background */
}
h1 {
font-size: 36px;
margin-bottom: 20px;
}
.message {
Roll.No.:-2300430130009
Name:- Anurag Sharma
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
text-align: center;
}
</style>
</head>
<body>
<div class="message">
<h1>Thank You for Your Feedback</h1>
</div>
</body>
</html>
OUTPUT:-01
Roll.No.:-2300430130009
Name:- Anurag Sharma
OUTPUT:-02
Roll.No.:-2300430130009
You might also like
- AJWT LAB MANUAL FOR 3-2 Students of IT & CSENo ratings yetAJWT LAB MANUAL FOR 3-2 Students of IT & CSE58 pages
- Design The Following Static Web Pages Required For An Online Book Store Web SiteNo ratings yetDesign The Following Static Web Pages Required For An Online Book Store Web Site24 pages
- Web Technologies Lab: Task 1: 1. Home PageNo ratings yetWeb Technologies Lab: Task 1: 1. Home Page49 pages
- Web Technologies Lab Manual R09 BY BHAVSINGH MALOTHNo ratings yetWeb Technologies Lab Manual R09 BY BHAVSINGH MALOTH47 pages
- 3,4,5 - & - 5 - Op - Merged (1) Fjeurtyur83u3uuequhwNo ratings yet3,4,5 - & - 5 - Op - Merged (1) Fjeurtyur83u3uuequhw36 pages
- Cardmember Agreement - Carte Blanche CardNo ratings yetCardmember Agreement - Carte Blanche Card10 pages
- Bioremediation Current Research and ApplicationsNo ratings yetBioremediation Current Research and Applications1 page
- November 2008 QP - Paper 1 CIE Chemistry IGCSENo ratings yetNovember 2008 QP - Paper 1 CIE Chemistry IGCSE16 pages
- 03 Na-Presentation-Lpn-Seo-Webinar-3-Local-Seo-WorkbookNo ratings yet03 Na-Presentation-Lpn-Seo-Webinar-3-Local-Seo-Workbook8 pages
- Ds2 Series User Manual: Ac Servo SystemNo ratings yetDs2 Series User Manual: Ac Servo System167 pages
- Yethi Consulting Private Limited: Signature Not VerifiedNo ratings yetYethi Consulting Private Limited: Signature Not Verified6 pages
- Difference Between Classical and Keynesian Economics83% (12)Difference Between Classical and Keynesian Economics39 pages
- Complete Bundle Introduction To Mass Communication 10th Edition Baran HQ File100% (1)Complete Bundle Introduction To Mass Communication 10th Edition Baran HQ File411 pages
- I Was Elected As School Division Supreme Student Government Federated Vice President 2018-2019No ratings yetI Was Elected As School Division Supreme Student Government Federated Vice President 2018-201919 pages
