0% found this document useful (0 votes)

34 views79 pages

Mehakwdfile

The document outlines the creation of a Home Page, Login Page, and Registration Page for a Bookstore Website, each featuring a NavBar and a SideBar. It includes HTML and CSS code for layout, styling, and functionality, emphasizing user navigation and interaction. The pages are designed for a college bookstore, showcasing engineering subjects and providing access to resources and support.

Uploaded by

Mehak

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

34 views79 pages

Mehakwdfile

Uploaded by

Mehak

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 79

Experiment 01: Make a Home Page For Bookstore Website

#Objective

The objective of this experiment is to create a Home Page for Book Store Website
with NavBar and a SideBar.

Code for the Home Page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home - College Bookstore</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #004080;
color: white;
padding: 1rem;
display: ex;
justify-content: space-between;
align-items: center;
}
.logo-container {
display: ex;
align-items: center;
}
.logo {
width: 70px;
height: 70px;
margin-right: 1rem;
}
.college-name {
font-size: 2rem;
font-weight: bold;margin-left: 5rem; margin-top: -3.5rem;
}
nav a {
color: white;
text-decoration: none;
margin-left: 3rem;
}
.main-container {
display: ex;
min-height: calc(100vh - 80px);
}
.sidebar {
width: 250px;
background-color: #;
padding: 2rem 1rem;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.sidebar h3 {
margin-top: 0;
margin-bottom: 1.5rem;
color: #004080;
text-align: center;
font-size: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.sidebar h3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 3px;
background-color: #004080;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar li {
margin-bottom: 1rem;
}
.sidebar a {
display: block;
color: #004080;
text-decoration: none;
padding: 0.75rem 1rem;
background-color: white;
border-radius: 5px;
transition: all 0.3s ease;
text-align: left;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
position: relative;
overow: hidden;
}
.sidebar a::before {
content: '';
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,64,128,0.1);
transition: all 0.3s ease;
}
.sidebar a:hover::before {
left: 0;
}
.sidebar a:hover {
transform: translateX(5px);
color: #003366;
}
.content {
ex-grow: 1;
padding: 2rem;
background: linear-gradient(to bottom right, #, #e0eafc);
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}
.welcome-section {
text-align: center;
margin-bottom: 2rem;
}
.welcome-section h1 {
color: #004080;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.assistance {
text-align: center;
margin-top: 2rem;
}
.assistance h2 {
color: #004080;
margin-bottom: 1rem;}
.assistance button {
background-color: #004080;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 5px;
cursor: pointer;
font-size: 1rem;
}
.main-content {
flex-grow: 1;
padding: 20px;
background-color: black;
margin-left: 18rem;
margin-top: -24rem;
}

.main-content h1 {
color: #e0e0e0; /* Light header text */
font-size: 2rem;
margin-top: 0;
}

.main-content p {
font-size: 1.1rem;
line-height: 1.6;
color: #bbb; text-align: center;
}

.main-content img {
width: 100%;
border-radius: 10px;
margin: 20px 0;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Footer */
footer {
text-align: center;
padding: 15px;
background-color: #1f1f1f; /* Dark footer */
color: #fff;
font-size: 0.9rem;
}

nav{margin-left: 950px;}
</style>
</head>
<body>
<header>
<div class="logo-container">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTAA_yCHeOkOvqO_38Ad1I7A5pmPYuqIF4u7g&s" alt="College Logo"
class="logo">
<div class="college-name">Inderprastha Engineering College
Bookstore</div>
</div>
<nav>
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="registration.html">Registration</a>
<a href="catalogue.html">Catalogue</a>
<a href="cart.html">Cart</a>
</nav>
</header>
<div class="main-container">
<aside class="sidebar">
<h3>Engineering Subjects</h3>
<ul>
<li><a href="bookstore1.html">Computer Science</a></li>
<li><a href="bookstore2.html">Electrical Engineering</a></li>
<li><a href="bookstore3.html">Mechanical Engineering</a></li>
<li><a href="bookstore4.html">Civil Engineering</a></li>
</ul>
</aside>
<div class="content">
<section class="welcome-section">
<div class="main-content">
<h1>Welcome to Inderprastha Engineering College</h1>
<p>
We are committed to delivering quality education in engineering
and technology. Our college offers
specialized programs and books in Computer Science,
Electronics, Electrical, and Civil Engineering.
Explore the website for resources, course registration, and
access to your cart.
</p>
<img
src="https://images.shiksha.com/mediadata/images/1578908939phpNDDJTh.jp
eg" alt="Campus View">
</div>
</div>

<footer>
© 2024 Inderprastha Engineering College. All rights reserved.
</footer>
</section>
</div>
<section class="assistance">
<h2>Need Assistance?</h2>
<p>Our team is here to help you and the right books for your
courses.</p>
<button>Contact Support</button>
</section>
</div>
</div>
</body>
</html>
Experiment 02: Make a Login Page For Bookstore Website

#Objective

The objective of this experiment is to create a Login Page for Book Store Website
with NavBar and a SideBar.

Code for 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 - College Bookstore</title>
<style> body {
font-family: Arial, sans-serif; margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #004080; color: white;
padding: 1rem; display: flex;
justify-content: space-between; align-items: center;
}
.logo-container { display: flex;
align-items: center;
}
.logo {
width: 70px; height: 70px;
margin-right: 1rem;
}
.college-name { font-size: 2rem; font-weight: bold;margin-left: 5rem; margin-top: -
3.5rem;}
nav a {
color: white;
text-decoration: none;
margin-left: 3rem;}
.main-container { display: flex;
min-height: calc(100vh - 80px);
}
.sidebar { width: 250px;
background-color: #ffffff; padding: 2rem 1rem;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.sidebar h3 { margin-top: 0;
margin-bottom: 1.5rem; color: #004080;
text-align: center; font-size: 1.5rem; position: relative;
padding-bottom: 10px;
}
.sidebar h3::after { content: ''; position: absolute; bottom: 0;
left: 50%;
transform: translateX(-50%); width: 50px;
height: 3px;
background-color: #004080;
}
.sidebar ul {
list-style-type: none; padding: 0;
}
.sidebar li {
margin-bottom: 1rem;
}
.sidebar a { display: block; color: #004080;
text-decoration: none; padding: 0.75rem 1rem; background-color: #f0f8ff; border-
radius: 5px; transition: all 0.3s ease; text-align: left;

box-shadow: 0 2px 5px rgba(0,0,0,0.05); position: relative;

overflow: hidden;
}
.sidebar a::before { content: ''; position: absolute; left: -100%;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,64,128,0.1); transition: all 0.3s ease;
}
.sidebar a:hover::before { left: 0;
}
.sidebar a:hover {
transform: translateX(5px); color: #003366;
}
.content {
flex-grow: 1; display: flex;
justify-content: center; align-items: center; padding: 2rem;
background: linear-gradient(to bottom right, #ffffff, #e0eafc); box-shadow: -5px 0
15px rgba(0, 0, 0, 0.1);
}
.login-form { width: 100%;
max-width: 500px; padding: 1rem; background-color: white; border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
margin-left: 30rem;
margin-top: -24rem;
}
.login-form h2 { margin-top: 0;
margin-bottom: 1.5rem; color: #004080;
font-size: 2rem; text-align: center;
}
.login-form label { display: block;

margin-top: 1rem; font-weight: bold; color: #333;

}
.login-form input { width: 100%; padding: 0.75rem; margin-top: 0.5rem; border: 1px
solid #ccc; border-radius: 4px;
box-sizing: border-box; font-size: 1rem;
}
.login-form button { width: 100%; margin-top: 1.5rem; padding: 0.75rem;
background-color: #004080; color: white;
border: none; border-radius: 4px; cursor: pointer; font-size: 1rem;
transition: background-color 0.3s ease;
}
.login-form button:hover { background-color: #003366;
}
.forgot-password { display: block; text-align: right; margin-top: 1rem; color:
#004080;
text-decoration: none;
}
.forgot-password:hover { text-decoration: underline;
}
nav{margin-left: 950px;}
</style>
</head>
<body>
<header>
<div class="logo-container">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTAA_yCHeOkOvqO_38Ad1I7A5pmPYuqIF4u7g&s" alt="College Logo"
class="logo">
<div class="college-name">Inderprastha Engineering College Bookstore</div>
</div>
<nav>
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="registration.html">Registration</a>
<a href="catalogue.html">Catalogue</a>
<a href="cart.html">Cart</a>
</nav>
</header>

<div class="main-container">
<aside class="sidebar">
<h3>Engineering Subjects</h3>
<ul>
<li><a href="bookstore1.html">Computer Science</a></li>
<li><a href="bookstore2.html">Electrical Engineering</a></li>
<li><a href="bookstore3.html">Mechanical Engineering</a></li>
<li><a href="bookstore4.html">Civil Engineering</a></li>
</ul>
</aside>

<div class="content">
<form class="login-form">
<h2>Login</h2>
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>

<label for="password">Password:</label>
<input type="password" id="password" name="password" required>

<button type="submit">Login</button>

<a href="#" class="forgot-password">Forgot Password?</a>

</form>
</div>
</div>
</body>
</html>

#Output
Experiment 03: Make a Registration Page For Bookstore
Website

#Objective

The objective of this experiment is to create a Registration Page for Book Store
Website with NavBar and a SideBar.

Code for the Registration Page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration - College Bookstore</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #004080;
color: white;
padding: 1rem;
display: ex;
justify-content: space-between;
align-items: center;
}
.logo-container {
display: ex;
align-items: center;
}
.logo {
width: 70px;
height: 70px;
margin-right: 1rem;
}
.college-name {
font-size: 2rem;
font-weight: bold;
margin-left: 5rem; margin-top: -3.5rem;
}
nav a {
color: white;
text-decoration: none;
margin-left: 3rem;
}
.main-container {
display: ex;
min-height: calc(100vh - 80px);
}
.sidebar {
width: 250px;
background-color: #;
padding: 2rem 1rem;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.sidebar h3 {
margin-top: 0;
margin-bottom: 1.5rem;
color: #004080;
text-align: center;
font-size: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.sidebar h3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 3px;
background-color: #004080;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar li {
margin-bottom: 1rem;
}
.sidebar a {
display: block;
color: #004080;
text-decoration: none;
padding: 0.75rem 1rem;
background-color: ##ffffff;
border-radius: 5px;
transition: all 0.3s ease;
text-align: left;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
position: relative;
overow: hidden;
}
.sidebar a::before {
content: '';
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,64,128,0.1);
transition: all 0.3s ease;
}
.sidebar a:hover::before {
left: 0;
}
.sidebar a:hover {
transform: translateX(5px);
color: #003366;
}
.content {
ex-grow: 1;
display: ex;
justify-content: center;
align-items: center;
padding: 2rem;
background: linear-gradient(to bottom right, #, #e0eafc);
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}
.registration-form {
width: 100%;
max-width: 600px;
padding: 2rem;
background-color: white;
border-radius: 10px;
box-shadow: 0 0 20px rgba(0,0,0,0.1);
margin-left: 30rem;margin-top: -24rem;
}
.registration-form h2 {
margin-top: 0;
margin-bottom: 1.5rem;
color: #004080;
font-size: 2rem;
text-align: center;
}
.registration-form label {
display: block;
margin-top: 1rem;
font-weight: bold;
color: #333;
}
.registration-form input[type="text"],
.registration-form input[type="password"],
.registration-form input[type="email"],
.registration-form input[type="tel"],
.registration-form input[type="date"],
.registration-form textarea {
width: 100%;
padding: 0.75rem;
margin-top: 0.5rem;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 1rem;
}
.registration-form .radio-group,
.registration-form .checkbox-group {
margin-top: 0.5rem;
}
.registration-form .radio-group label,
.registration-form .checkbox-group label {
display: inline;
margin-right: 1rem;
font-weight: normal;
}
.registration-form button {
width: 100%;
margin-top: 1.5rem;
padding: 0.75rem;
background-color: #004080;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 1rem;
transition: background-color 0.3s ease;}
.registration-form button:hover {
background-color: #003366;}
nav{margin-left: 950px;}
</style>
</head>
<body>
<header>
<div class="logo-container">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTAA_yCHeOkOvqO_38Ad1I7A5pmPYuqIF4u7g&s" alt="College
Logo" class="logo">
<div class="college-name">Inderprastha Engineering College
Bookstore</div>
</div>
<nav>
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="registration.html">Registration</a>
<a href="catalogue.html">Catalogue</a>
<a href="cart.html">Cart</a>
</nav>
</header>
<div class="main-container">
<aside class="sidebar">
<h3>Engineering Subjects</h3>
<ul>
<li><a href="bookstore1.html">Computer Science</a></li>
<li><a href="bookstore2.html">Electrical Engineering</a></li>
<li><a href="bookstore3.html">Mechanical Engineering</a></li>
<li><a href="bookstore4.html">Civil Engineering</a></li>
</ul>
</aside>
<div class="content">
<form class="registration-form">
<h2>Registration Form</h2>
<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>
<label>Sex:</label>
<div class="radio-group">
<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>
</div>
<label for="dob">Date of Birth:</label>
<input type="date" id="dob" name="dob" required>
<button type="submit">Register</button>
</form>
</div>
</div>
</body>
</html>

#Output
Experiment 04: Make a Catalogue Page For Bookstore
Website

#Objective

The objective of this experiment is to create a Catalogue Page for Book Store
Website with NavBar and a SideBar.

Code for the Catalogue Page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Catalogue - College Bookstore</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #004080;
color: white;
padding: 1rem;
display: ex;
justify-content: space-between;
align-items: center;
}
.logo-container {
display: ex;
align-items: center;
}
.logo {
width: 70px;
height: 70px;
margin-right: 1rem;
}
.college-name {
font-size: 1.5rem;
font-weight: bold;margin-left: 5rem; margin-top: -3.5rem;
}
nav a {
color: white;
text-decoration: none;
margin-left: 1rem;
}
.main-container {
display: ex;
min-height: calc(100vh - 80px);
}
.sidebar {
width: 250px;
background-color: #;
padding: 2rem 1rem;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.sidebar h3 {
margin-top: 0;
margin-bottom: 1.5rem;
color: #004080;
text-align: center;
font-size: 1.5rem;
position: relative;
padding-bottom: 10px;
}
.sidebar h3::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 50px;
height: 3px;
background-color: #004080;
}
.sidebar ul {
list-style-type: none;
padding: 0;
}
.sidebar li {
margin-bottom: 1rem;
}
.sidebar a {
display: block;
color: #004080;
text-decoration: none;
padding: 0.75rem 1rem;
background-color: white;
border-radius: 5px;
transition: all 0.3s ease;
text-align: left;
box-shadow: 0 2px 5px rgba(0,0,0,0.05);
position: relative;
overow: hidden;
}
.sidebar a::before {
content: '';
position: absolute;
left: -100%;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,64,128,0.1);
transition: all 0.3s ease;
}
.sidebar a:hover::before {
left: 0;
}
.sidebar a:hover {
transform: translateX(5px);
color: #003366;
}
.content {
ex-grow: 1;
padding: 2rem;
background: linear-gradient(to bottom right, #, #e0eafc);
box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
}
.catalogue-header {
text-align: center;
margin-bottom: 2rem;
}
.catalogue-header h1 {
color: #004080;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.book-grid {
display: grid;
grid-template-columns: repeat(auto-ll, minmax(250px, 1fr));
gap: 2rem;
}
.book-card {
background-color: #f8f8f8;
border-radius: 15px;
padding: 1.5rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
text-align: center;
display: ex;
ex-direction: column;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.book-card:hover {
transform: scale(1.05);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}
.book-card img {
width: 150px;
height: 200px;
object-t: cover;
border-radius: 10px;
margin: 0 auto 1rem;
}
.book-card h3 {
color: #004080;
margin-bottom: 0.5rem;
font-size: 1.2rem;
}
.book-card p {
color: #666;
margin-bottom: 0.5rem;
font-size: 0.9rem;
}
.book-card .price {
font-weight: bold;
color: #004080;
margin-bottom: 1rem;
}
.book-card button {
background-color: #004080;
color: white;
border: none;
padding: 0.5rem 1rem;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: auto;
font-size: 1rem;
}
.book-card button:hover {
background-color: #003366;
}
nav{margin-left: 1100px;}
</style>
</head>
<body>
<header>
<div class="logo-container">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTAA_yCHeOkOvqO_38Ad1I7A5pmPYuqIF4u7g&s" alt="College Logo"
class="logo">
<div class="college-name">Inderprastha Engineering College Bookstore</div>
</div>
<nav>
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="registration.html">Registration</a>
<a href="catalogue.html">Catalogue</a>
<a href="cart.html">Cart</a>
</nav>
</header>
<div class="main-container">
<aside class="sidebar">
<h3>Engineering Subjects</h3>
<ul>
<li><a href="bookstore1.html">Computer Science</a></li>
<li><a href="bookstore2.html">Electrical Engineering</a></li>
<li><a href="bookstore3.html">Mechanical Engineering</a></li>
<li><a href="bookstore4.html">Civil Engineering</a></li>
</ul>
</aside>
<div class="content">
<section class="catalogue-header">
<h1>Book Catalogue</h1>
<p>Browse our collection of engineering textbooks</p>
</section>
<section class="book-grid">
<div class="book-card">
<img src="assets/IntroToAlgo.jpg" alt="Introduction to Algorithms" height="200">
<h3>Introduction to Algorithms</h3>
<p>by Thomas H. Cormen</p>
<p class="price">₹1900.00</p>
<button>Add to Cart</button>
</div>
<div class="book-card">
<img src="assets/ElectricCkt.jpg" alt="Electric Circuits" height="200">
<h3>Electric Circuits</h3>
<p>by James W. Nilsson</p>
<p class="price">₹1500.00</p>
<button>Add to Cart</button>
</div>
<div class="book-card">
<img src="assets/MechMat.jpg" alt="Mechanics of Materials" height="200">
<h3>Mechanics of Materials</h3>
<p>by Russell C. Hibbeler</p>
<p class="price">₹1720.00</p>
<button>Add to Cart</button>
</div>
<div class="book-card">
<img src="assets/StructAnal.jpg" alt="Structural Analysis" height="200">
<h3>Structural Analysis</h3>
<p>by R.C. Hibbeler</p>
<p class="price">₹1280.00</p>
<button>Add to Cart</button>
</div>
<div class="book-card">
<img src="assets/DataStructAlgo.jpg" alt="Data Structures and Algorithms"
height="200">
<h3>Data Structures and Algorithms</h3>
<p>by Michael T. Goodrich</p>
<p class="price">₹1080.00</p>
<button>Add to Cart</button>
</div>
<div class="book-card">
<img src="assets/SysCtrl_.jpg" alt="Control Systems Engineering" height="200">
<h3>Control Systems Engineering</h3>
<p>by Norman S. Nise</p>
<p class="price">₹2000.00</p>
<button>Add to Cart</button>
</div>
<div class="book-card">
<img src="assets/thermo.jpg" alt="Thermodynamics: An Engineering Approach"
height="200">
<h3>Thermodynamics: An Engineering Approach</h3>
<p>by Yunus A. Cengel</p>
<p class="price">₹1660.00</p>
<button>Add to Cart</button>
</div>
<div class="book-card">
<img src="assets/uid.jpg" alt="Fluid Mechanics" height="200">
<h3>Fluid Mechanics</h3>
<p>by Frank M. White</p>
<p class="price">₹1500.00</p>
<button>Add to Cart</button>
</div>
</section>
</div>
</div>
</body>
</html>

#code for book store:

Bookstore1:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: 'Georgia', serif;
background-color: white; /* Dark background */
margin: 0;
padding: 0;
color: black; /* Light text color */
}

header {
background-color: #3e497a; /* Keep the header color */
color: white;
padding: 15px;
text-align: center;
}

header h1 {
margin: 0;
font-size: 28px;
font-weight: bold;
}

.book-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: auto;
}

.book-item {
background-color: grey; /* Dark background for book items */
border-radius: 10px;
box-shadow: 0 4px 8px rgb(246, 246, 246); /* Darker shadow */
overflow: hidden;
text-align: center;
padding: 15px;
transition: transform 0.3s;
}

.book-item:hover {
transform: translateY(-5px);
}

.book-item img {
width: 100px;
height: 130px;
object-fit: cover;
margin-bottom: 10px;
}

.book-title {
font-size: 18px;
font-weight: bold;
color: #ffb319; /* Lighter color for titles */
margin: 10px 0 5px;
}

.book-author {
font-size: 16px;
color: #cccccc; /* Light gray for authors */
margin: 5px 0;
}

.book-price {
font-size: 18px;
color: #b12704; /* Price color */
font-weight: bold;
margin: 5px 0;
}

.add-to-cart {
background-color: #ffb319; /* Button background color */
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
transition: background-color 0.3s;
}

.add-to-cart:hover {
background-color: #e6a000; /* Darker button on hover */
}

footer {
text-align: center;
padding: 10px;
background-color: #3e497a; /* Keep the footer color */
color: white;
position: fixed;
width: 100%;
bottom: 0;
font-size: 14px;
}
</style>

</head>
<body>
<header>
<h1>CSE Books for B.Tech Students</h1>
</header>

<div class="book-container">

<div class="book-item">
<img
src="https://m.media-amazon.com/images/I/71wPDFZZu4L._AC_UF1000,1000_QL80_
.jpg" alt="Introduction to Algorithms">
<p class="book-title">Introduction to Algorithms</p>
<p class="book-author">by Mr Ipec pascal</p>
<p class="book-price">₹250</p>
<button class="add-to-cart" onclick="addToCart('Introduction to Algorithms',
'Mr Ipec pascal', 89.99)">Add to Cart</button>
</div>

<div class="book-item">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTwKCqZ_jNfcgPT2jKV_zdmPlad0A-PseCajg&s" alt="Artificial
Intelligence: A Modern Approach">
<p class="book-title">Artificial Intelligence: A Modern Approach</p>
<p class="book-author">by Mr Ipec pascal</p>
<p class="book-price">₹356</p>
<button class="add-to-cart" onclick="addToCart('Artificial Intelligence: A
Modern Approach', 'Mr Ipec pascal', 74.99)">Add to Cart</button>
</div>

<div class="book-item">
<img
src="https://www.gkpublications.com/wp-content/uploads/2024/02/815lvxuK4NL._SL
1500_-jpg.webp" alt="Data Structures and Algorithms">
<p class="book-title">Data Structures and Algorithms</p>
<p class="book-author">by Mr Ipec pascal</p>
<p class="book-price">₹880</p>
<button class="add-to-cart" onclick="addToCart('Data Structures and
Algorithms', 'Mr Ipec pascal', 89.99)">Add to Cart</button>
</div>

<div class="book-item">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcRZ1AoTixwGFsFDA1VQhec8dV0_npe46kPIZA&s" alt="Operating
System Concepts">
<p class="book-title">Operating System Concepts</p>
<p class="book-author">by Mr Ipec pascal</p>
<p class="book-price">₹159</p>

<button class="add-to-cart" onclick="addToCart('Operating System

Concepts', 'Mr Ipec pascal', 89.99)">Add to Cart</button>

</div>

<div class="book-item">
<img
src="https://www.helmandbooks.com/images/IMG_COVERPAGE_20230120_010311.jp
g" alt="Computer Networking: A Top-Down Approach">
<p class="book-title">Computer Networking: A Top-Down Approach</p>
<p class="book-author">by Mr Ipec pascal</p>
<p class="book-price">₹450</p>

<button class="add-to-cart" onclick="addToCart('Computer Networking', 'Mr

Ipec pascal', 89.99)">Add to Cart</button>

</div>

<div class="book-item">
<img
src="https://images.routledge.com/common/jackets/crclarge/978084932/978084932
6912.jpg" alt="Database System Concepts">
<p class="book-title">Database System Concepts</p>
<p class="book-author">by Mr Ipec pascal</p>
<p class="book-price">₹599</p>
<button class="add-to-cart" onclick="addToCart('Database System
Concepts', 'Mr Ipec pascal', 89.99)">Add to Cart</button>

</div>

</div>

<footer>
© 2024 College Bookstore. All rights reserved.
</footer>

// Add new item to cart

cart.push({ title, author, price });

// Save updated cart to localStorage

localStorage.setItem('cart', JSON.stringify(cart));

alert(title + ' has been added to your cart!');

}
</script>
</body>
</html>

Bookstore2:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: 'Georgia', serif;
background-color: white; /* Dark background */
margin: 0;
padding: 0;
color: black; /* Light text color */
}

header {
background-color: #3e497a; /* Keep the header color */
color: white;
padding: 15px;
text-align: center;
}

header h1 {
margin: 0;
font-size: 28px;
font-weight: bold;
}

.book-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: auto;
}

.book-item:hover {
transform: translateY(-5px);
}

.book-item img {
width: 100px;
height: 130px;
object-fit: cover;
margin-bottom: 10px;
}

.book-title {
font-size: 18px;
font-weight: bold;
color: #ffb319; /* Lighter color for titles */
margin: 10px 0 5px;
}

.book-author {
font-size: 16px;
color: #cccccc; /* Light gray for authors */
margin: 5px 0;
}

.book-price {
font-size: 18px;
color: #b12704; /* Price color */
font-weight: bold;
margin: 5px 0;
}

.add-to-cart:hover {
background-color: #e6a000; /* Darker button on hover */
}

footer {
text-align: center;
padding: 10px;
background-color: #3e497a; /* Keep the footer color */
color: white;
position: fixed;
width: 100%;
bottom: 0;
font-size: 14px;
}
</style>

</head>
<body>
<header>
<h1>ECE Books for B.Tech Students</h1>
</header>

<div class="book-container">

<div class="book-item">
<img src="https://static.pw.live/5eb393ee95fab7468a79d189/509b850b-
9116-4cd3-846d-86846632a8a7.png" alt="Electronic Devices and Circuit Theory">
<p class="book-title">Electronic Devices and Circuit Theory</p>
<p class="book-author">Mr Ipec pascal</p>
<p class="book-price">₹450</p>
<button class="add-to-cart" onclick="addToCart('Electronic Devices and
Circuit Theory', 'Mr Ipec pascal', 89.99)">Add to Cart</button>
</div>

<div class="book-item">
<img
src="https://static.wixstatic.com/media/48b518_7347af5367c84e218ca8fab697bdc1
81~mv2.jpeg" alt="Communication Systems">
<p class="book-title">Communication Systems</p>
<p class="book-author">Mr Ipec pascal</p>
<p class="book-price">₹548</p>
<button class="add-to-cart" onclick="addToCart('Communication Systems',
'Mr Ipec pascal', 89.99)">Add to Cart</button>
</div>

<div class="book-item">
<img
src="https://m.media-amazon.com/images/I/61VkoauwY1L._AC_UF1000,1000_QL80_.
jpg" alt="Digital Signal Processing">
<p class="book-title">Digital Signal Processing</p>
<p class="book-author">Mr Ipec pascal</p>
<p class="book-price">₹875</p>
<button class="add-to-cart" onclick="addToCart('Digital Signal Processing',
'Mr Ipec pascal', 89.99)">Add to Cart</button>
</div>

<div class="book-item">
<img
src="https://m.media-amazon.com/images/I/51CljostkFL._AC_UF1000,1000_QL80_.jp
g" alt="Microelectronics Circuits">
<p class="book-title">Microelectronics Circuits</p>
<p class="book-author">Mr Ipec pascal</p>
<p class="book-price">₹580</p>
<button class="add-to-cart" onclick="addToCart('Microelectronics Circuits',
'Mr Ipec pascal', 89.99)">Add to Cart</button>
</div>

<div class="book-item">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcQAbDmfpdw75bUhlffWfiZuUsXqbDYybx6Z2w&s" alt="Control Systems
Engineering">
<p class="book-title">Control Systems Engineering</p>
<p class="book-author">Mr Ipec pascal</p>
<p class="book-price">₹699</p>
<button class="add-to-cart" onclick="addToCart('Control Systems
Engineering', 'Mr Ipec pascal', 89.99)">Add to Cart</button>
</div>

<div class="book-item">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcQ6oAARcqDRcyDcQYBXyHAEvC2DR3mwlCCZ7w&s" alt="Signals and
Systems">
<p class="book-title">Signals and Systems</p>
<p class="book-author">Mr Ipec pascal</p>
<p class="book-price">₹459</p>
<button class="add-to-cart" onclick="addToCart('Signals and Systems', 'Mr
Ipec pascal', 89.99)">Add to Cart</button>
</div>
</div>

<footer>
© 2024 College Bookstore. All rights reserved.
</footer>
<script>
function addToCart(title, author, price) {
// Get existing cart data from localStorage
let cart = JSON.parse(localStorage.getItem('cart')) || [];

// Add new item to cart

cart.push({ title, author, price });

// Save updated cart to localStorage

localStorage.setItem('cart', JSON.stringify(cart));

alert(title + ' has been added to your cart!');

}
</script>

</body>
</html>

Bookstore3:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: 'Georgia', serif;
background-color: white; /* Dark background */
margin: 0;
padding: 0;
color: black; /* Light text color */
}

header {
background-color: #3e497a; /* Keep the header color */
color: white;
padding: 15px;
text-align: center;
}

header h1 {
margin: 0;
font-size: 28px;
font-weight: bold;
}

.book-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: auto;
}

.book-item:hover {
transform: translateY(-5px);
}

.book-item img {
width: 100px;
height: 130px;
object-fit: cover;
margin-bottom: 10px;
}

.book-title {
font-size: 18px;
font-weight: bold;
color: #ffb319; /* Lighter color for titles */
margin: 10px 0 5px;
}

.book-author {
font-size: 16px;
color: #cccccc; /* Light gray for authors */
margin: 5px 0;
}

.book-price {
font-size: 18px;
color: #b12704; /* Price color */
font-weight: bold;
margin: 5px 0;
}

.add-to-cart:hover {
background-color: #e6a000; /* Darker button on hover */
}

footer {
text-align: center;
padding: 10px;
background-color: #3e497a; /* Keep the footer color */
color: white;
position: fixed;
width: 100%;
bottom: 0;
font-size: 14px;
}
</style>

</head>
<body>
<header>
<h1>Mechanical Engineering Books for B.Tech Students</h1>
</header>

<div class="book-container">

<div class="book-item">
<img
src="https://madeeasypublications.org/images/book/9789362027344/978936202734
4_large.png" alt="Structural Analysis">
<p class="book-title">Structural Analysis</p>
<p class="book-author">by Jo Bhi Tha Maar Gya</p>
<p class="book-price">₹200</p>
<button class="add-to-cart" onclick="addToCart('Structural Analysis', 'Mr
Ipec pascal', 89.99)">Add to Cart</button>

</div>

<div class="book-item">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcSiN5QHgExh98Ee7YM7C62zIZfoLT2d8r6JyA&s" alt="Geotechnical
Engineering">
<p class="book-title">Geotechnical Engineering</p>
<p class="book-author">by Jo Bhi Tha Maar </p>
<p class="book-price">₹300</p>
<button class="add-to-cart" onclick="addToCart('Geotechnical Engineering',
'Mr Ipec pascal', 89.99)">Add to Cart</button>

</div>

<div class="book-item">
<img src="https://static.pw.live/5eb393ee95fab7468a79d189/257a210a-
5a0a-4b60-b838-f9aa13ba644a.png" alt="Transportation Engineering">
<p class="book-title">Transportation Engineering</p>
<p class="book-author">Mr Ipec pascal</p>
<p class="book-price">₹800</p>
<button class="add-to-cart" onclick="addToCart('Transportation
Engineering', 'Mr Ipec pascal', 89.99)">Add to Cart</button>

</div>

<div class="book-item">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcT9evaUrnnAbVhAtIeNc4zLUBiZSqLyQjoYqw&s" alt="Fluid Mechanics">
<p class="book-title">Fluid Mechanics</p>
<p class="book-author">Mr Ipec pascal</p>
<p class="book-price">₹200</p>
<button class="add-to-cart" onclick="addToCart('Fluid Mechanics', 'Mr Ipec
pascal', 89.99)">Add to Cart</button>

</div>

<div class="book-item">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcS3fYYRAFohhPH3mlQyr70czTDr7S1FIRglsg&s" alt="Concrete
Technology">
<p class="book-title">Concrete Technology</p>
<p class="book-author">Mr Ipec pascal</p>
<p class="book-price">₹250</p>
<button class="add-to-cart" onclick="addToCart('Concrete Technology', 'Mr
Ipec pascal', 89.99)">Add to Cart</button>

</div>

<div class="book-item">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTOCDBFxT_l4EVagxtk7YfcEG3QaKZ6fIqW_g&s" alt="Construction
Management">
<p class="book-title">Construction Management</p>
<p class="book-author">Mr Ipec pascal</p>
<p class="book-price">₹320</p>
<button class="add-to-cart" onclick="addToCart('Construction Management',
'Mr Ipec pascal', 89.99)">Add to Cart</button>

</div>
</div>

<footer>
© 2024 College Bookstore. All rights reserved.
</footer>

// Add new item to cart

cart.push({ title, author, price });

// Save updated cart to localStorage

localStorage.setItem('cart', JSON.stringify(cart));

alert(title + ' has been added to your cart!');

}
</script>

</body>
</html>

Bookstore4:

<!DOCTYPE html>
<html lang="en">
<head>
<style>
body {
font-family: 'Georgia', serif;
background-color: white; /* Dark background */
margin: 0;
padding: 0;
color: black; /* Light text color */
}

header {
background-color: #3e497a; /* Keep the header color */
color: white;
padding: 15px;
text-align: center;
}

header h1 {
margin: 0;
font-size: 28px;
font-weight: bold;
}

.book-container {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: auto;
}

.book-item:hover {
transform: translateY(-5px);
}

.book-item img {
width: 100px;
height: 130px;
object-fit: cover;
margin-bottom: 10px;
}

.book-title {
font-size: 18px;
font-weight: bold;
color: #ffb319; /* Lighter color for titles */
margin: 10px 0 5px;
}

.book-author {
font-size: 16px;
color: #cccccc; /* Light gray for authors */
margin: 5px 0;
}

.book-price {
font-size: 18px;
color: #b12704; /* Price color */
font-weight: bold;
margin: 5px 0;
}

.add-to-cart:hover {
background-color: #e6a000; /* Darker button on hover */
}

footer {
text-align: center;
padding: 10px;
background-color: #3e497a; /* Keep the footer color */
color: white;
position: fixed;
width: 100%;
bottom: 0;
font-size: 14px;
}
</style>
</head>
<body>
<header>
<h1>Civil Engineering Books for B.Tech Students</h1>
</header>

<div class="book-container">

<div class="book-item">
<img
src="https://m.media-amazon.com/images/I/41yhiGjykLL._UF1000,1000_QL80_.jpg"
alt="Structural Analysis">
<p class="book-title">Structural Analysis</p>
<p class="book-author">by Jo Bhi Tha Maar Gya</p>
<p class="book-price">₹200</p>
<button class="add-to-cart" onclick="addToCart('Structural Analysis', 'Mr
Ipec pascal', 89.99)">Add to Cart</button>

</div>

<div class="book-item">
<img
src="https://m.media-amazon.com/images/I/71dbOvarmKL._AC_UF1000,1000_QL80_.
jpg" alt="Geotechnical Engineering">
<p class="book-title">Geotechnical Engineering</p>
<p class="book-author">by Jo Bhi Tha Maar </p>
<p class="book-price">₹300</p>
<button class="add-to-cart" onclick="addToCart('Geotechnical Engineering',
'Mr Ipec pascal', 89.99)">Add to Cart</button>

</div>

<div class="book-item">
<img src="https://5.imimg.com/data5/YM/BK/GLADMIN-4755675/civil-
engineering-book-500x500.png" alt="Transportation Engineering">
<p class="book-title">Transportation Engineering</p>
<p class="book-author">Mr Ipec pascal</p>
<p class="book-price">₹800</p>
<button class="add-to-cart" onclick="addToCart('Transportation
Engineering', 'Mr Ipec pascal', 89.99)">Add to Cart</button>

</div>

<div class="book-item">
<img
src="https://madeeasypublications.org/images/book/9789362029799/978936202979
9_large.png" alt="Fluid Mechanics">
<p class="book-title">Fluid Mechanics</p>
<p class="book-author">Mr Ipec pascal</p>
<p class="book-price">₹200</p>
<button class="add-to-cart" onclick="addToCart('Fluid Mechanics', 'Mr Ipec
pascal', 89.99)">Add to Cart</button>
</div>

<div class="book-item">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTNKV2Ua-Kzai6yw1j71J9hW2elqjyShXP0yg&s" alt="Concrete
Technology">
<p class="book-title">Concrete Technology</p>
<p class="book-author">Mr Ipec pascal</p>
<p class="book-price">₹250</p>
<button class="add-to-cart" onclick="addToCart('Concrete Technology', 'Mr
Ipec pascal', 89.99)">Add to Cart</button>

</div>

<div class="book-item">
<img
src="https://d9h54mr6do0h0.cloudfront.net/bookimage/9789386650382_tn.jpg"
alt="Construction Management">
<p class="book-title">Construction Management</p>
<p class="book-author">Mr Ipec pascal</p>
<p class="book-price">₹320</p>
<button class="add-to-cart" onclick="addToCart('Construction Management',
'Mr Ipec pascal', 89.99)">Add to Cart</button>

</div>
</div>

<footer>
© 2024 College Bookstore. All rights reserved.
</footer>

// Add new item to cart

cart.push({ title, author, price });

// Save updated cart to localStorage

localStorage.setItem('cart', JSON.stringify(cart));

alert(title + ' has been added to your cart!');

}
</script>

</body>
</html>
#Output[catalogue]
Experiment 05: Make a cart Page For Bookstore Website

#Objective

The objective of this experiment is to create a cart Page for Book Store Website
with NavBar and a SideBar.

Code for 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>Cart- College Bookstore</title>
<style> body {
font-family: Arial, sans-serif; margin: 0;
padding: 0;
background-color: #f0f0f0;
}
header {
background-color: #004080; color: white;
padding: 1rem; display: flex;
justify-content: space-between; align-items: center;
}
.logo-container { display: flex;
align-items: center;
}
.logo {
width: 70px; height: 70px;
margin-right: 1rem;
}
.college-name { font-size: 2rem; font-weight: bold;margin-left: 5rem; margin-top: -
3.5rem;}
nav a {
color: white;
text-decoration: none;
margin-left: 3rem;}
.main-container { display: flex;
min-height: calc(100vh - 80px);
}
.sidebar { width: 250px;
background-color: #ffffff; padding: 2rem 1rem;
box-shadow: 2px 0 10px rgba(0,0,0,0.1);
}
.sidebar h3 { margin-top: 0;
margin-bottom: 1.5rem; color: #004080;
text-align: center; font-size: 1.5rem; position: relative;
padding-bottom: 10px;
}
.sidebar h3::after { content: ''; position: absolute; bottom: 0;
left: 50%;
transform: translateX(-50%); width: 50px;
height: 3px;
background-color: #004080;
}
.sidebar ul {
list-style-type: none; padding: 0;
}
.sidebar li {
margin-bottom: 1rem;
}
.sidebar a { display: block; color: #004080;
text-decoration: none; padding: 0.75rem 1rem; background-color: #f0f8ff; border-
radius: 5px; transition: all 0.3s ease; text-align: left;

box-shadow: 0 2px 5px rgba(0,0,0,0.05); position: relative;

overflow: hidden;
}
.sidebar a::before { content: ''; position: absolute; left: -100%;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,64,128,0.1); transition: all 0.3s ease;
}
.sidebar a:hover::before { left: 0;
}
.sidebar a:hover {
transform: translateX(5px); color: #003366;
}
.content {
flex-grow: 1; display: flex;
justify-content: center; align-items: center; padding: 2rem;
background: linear-gradient(to bottom right, #ffffff, #e0eafc); box-shadow: -5px 0
15px rgba(0, 0, 0, 0.1);
}
nav{margin-left: 950px;}
</style>
</head>
<body>
<header>
<div class="logo-container">
<img src="https://encrypted-tbn0.gstatic.com/images?
q=tbn:ANd9GcTAA_yCHeOkOvqO_38Ad1I7A5pmPYuqIF4u7g&s" alt="College Logo"
class="logo">
<div class="college-name">Inderprastha Engineering College Bookstore</div>
</div>
<nav>
<a href="index.html">Home</a>
<a href="login.html">Login</a>
<a href="registration.html">Registration</a>
<a href="catalogue.html">Catalogue</a>
<a href="cart.html">Cart</a>
</nav>
</header>

#shopping page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table
{
border: 80%;margin-top: -38rem;margin-right: 20rem;
}
body
{
background-color: white;
}
td
{
border-top: none;
border-bottom: none;
}
</style>
</head>
<body>
<table align="center" cellpadding="30" cellspacing="0" border="black">
<tr>
<th>Sr no.</th>
<th>Book Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr>
<td>1</td>
<td>Java 2</td>
<td>$35.5</td>
<td>2</td>
<td>$70</td>
</tr>
<tr>
<td>2</td>
<td>XML</td>
<td>$40.5</td>
<td>1</td>
<td>$40.5</td>
</tr>
<tr>
<th colspan="3">Total Amount</th>
<th colspan="2">$130.5</th>
</tr>
</table>
</body>
</html>

#Output
Experiment 6: Name & Password Validation Using JS

#Objective

Js VALIDATION: Write JavaScript to validate the following fields of the above

registration page.
1. Name (Name should contains alphabets and the length should not be less than 6
characters).
2. Password (Password should not be less than 6 characters length).

Code:
<!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>
.error { color: red;
font-size: 14px;
}
form {
max-width: 400px; margin: auto;
}
input {
display: block; margin: 10px 0; padding: 10px; width: 100%;
}
button {
padding: 10px 20px; font-size: 16px; cursor: pointer;
}
span {
margin-top: 10px;
}
</style>
</head>
<body>
<center>
<h1>Registration Page</h1>
</center>
<form id="registrationForm">

<label for="password">Password:</label>
<input type="password" id="password" name="password" />
<span class="error" id="passwordError"></span>
<br />
<button type="submit">Register</button>
</form>
<script> document
.getElementById("registrationForm")
.addEventListener("submit", function (e) { e.preventDefault();
const name = document.getElementById("name").value.trim();
const password = document.getElementById("password").value.trim();

const nameError = document.getElementById("nameError");

const passwordError = document.getElementById("passwordError");

nameError.textContent = ""; passwordError.textContent = "";

let isValid = true;

const namePattern = /^[A-Za-z\s]+$/;

if (name.length < 6 || !namePattern.test(name)) { nameError.textContent =
"Name should contain only alphabets and be at least 6 characters long."; isValid =
false;
}

if (password.length < 6) { passwordError.textContent =

"Password should be at least 6 characters long."; isValid = false;
}

if (isValid) {
alert("Registration successful!");
}
});
</script>
</body>
</html>
Output [ With Correct Fields]

Output [ With Incorrect Fields]

Experiment 7: Email & Mobile No Validation Using JS

#Objective

Js VALIDATION: Write JavaScript to validate the following fields of the above

registration page.
1. E-mailid (should not contain any invalid and must follow
the standard pattern([email protected])
2. Phone Number(Phone number should contain 10 digits only).

Code:
<!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>
<script>
function validateForm() {
// Get input values
var email = document.getElementById('email').value;
var phoneNumber = document.getElementById('phone').value;
// Validate Email
if (!validateEmail(email)) {
alert('Invalid email address. Please enter a valid email.');
return false;
}
// Validate Phone Number
if (!validatePhoneNumber(phoneNumber)) {
alert('Phone number should contain 10 digits only.');
return false;
}
// Form is valid
alert('Registration successful!');
return true;
}
function validateEmail(email) {
// Check if the email follows the standard pattern
var regex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return regex.test(email);
}
function validatePhoneNumber(phoneNumber) {
// Check if the phone number contains exactly 10 digits
var regex = /^\d{10}$/;
return regex.test(phoneNumber);
}
</script>
<style>
body{
background-color:pink;
text-align: center;
margin-top: 150px;
}
</style>
</head>
<body>
<form onsubmit="return validateForm()">
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
<br><br>
<input type="submit" value="Register">
</form>
</body>
</html>

Output [ With Correct Fields]

Output [ With Incorrect Fields]

Experiment 08: Use CSS Selectors To Design 2 Web

Pages

#Objective
Design a web page using CSS which includes 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 the page

Code:

[FIRST PAGE]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CS Engineering Hub - Home</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="page1">
<header>
<h1>CS Engineering Hub</h1>
<p class="subtitle">Exploring the Frontiers of Computer Science</p>
</header>
<main>
<section class="content">
<h2>Welcome to CS Engineering Hub</h2>
<p>Dive into the fascinating world of Computer Science Engineering with us. From algorithms to
artiﬁcial intelligence, we cover the latest advancements and foundational concepts that shape our digital
world.</p>
<p>Whether you're a seasoned developer or a curious beginner, our platform offers insights,
tutorials, and resources to enhance your understanding of computer science and its applications.</p>
</section>
<section class="content">
<h2>Featured Topics</h2>
<ul>
<li>Machine Learning and AI: Transforming Industries</li>
<li>Blockchain Technology: Beyond Cryptocurrencies</li>
<li>Quantum Computing: The Next Frontier</li>
<li>Cybersecurity: Protecting Digital Assets</li>
</ul>
</section>
</main>
<footer>
<p>Computer Science Engineering Hub</p>
<a href="page2.html">Explore Our Resources →</a>
</footer>
</body>
</html>

[SECOND PAGE]

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CS Engineering Hub - Resources</title>
<link rel="stylesheet" href="styles.css">
</head>
<body class="page2">
<header>
<h1>CS Engineering Resources</h1>
<p class="subtitle">Tools and Knowledge for the Modern Engineer</p>
</header>
<main>
<section class="content">
<h2>Learning Paths</h2>
<p>Enhance your skills with our curated learning paths designed for various specializations in
Computer Science Engineering.</p>
<ul>
<li>Full Stack Web Development: From Frontend to Backend</li>
<li>Data Science and Analytics: Uncovering Insights from Data</li>
<li>Cloud Computing: Scalable and Flexible Solutions</li>
<li>Internet of Things (IoT): Connecting the Physical and Digital</li>
</ul>
</section>
<section class="content">
<h2>Latest in CS Research</h2>
<p>Stay updated with cutting-edge research in Computer Science Engineering. Our team of experts
curates and summarises the most impactful papers and breakthroughs in the ﬁeld.</p>
<p>From advancements in natural language processing to innovations in computer vision, we keep you
informed about the technologies shaping our future.</p>
</section>
</main>
<footer>
<p>Computer Science Engineering Hub</p>
<a href="page1.html">← Back to Home</a>
</footer>
</body>
</html>
 [EXTERNAL CSS FILE]
body {
line-height: 1.6;
padding: 0;
margin: 50px;
background-size: cover;
background-position: center;
background-attachment: ﬁxed;
}

header h1 {
font-size: 2.5em;
text-align: center;
margin-top:
20px;
}

header .subtitle
{ font-style:
italic; font-
weight: 300;
text-align:
center; margin-
top: 5px;
}

main {
max-width: 800px;
margin: 0 auto;
padding: 20px;
border-radius:
10px;
}

main .content h2
{ font-size:
1.8em;
margin-bottom: 10px;
}

main .content p {
font-size:
1em; line-
height: 1.6;
padding: 0 20px;
}

ul {
list-style-type: none;
padding-left: 0;
}
li {
margin-bottom:
10px; padding-left:
20px; position:
relative;
}

li::before
{ content: '>';
position: absolute;
left: 0;
font-family: monospace;
font-weight: bold;
}

footer {
text-align: center;
margin-top: 30px;
padding: 20px;
border-radius:
10px;
}

footer p {
margin-bottom: 10px;
}

a{
text-decoration: none;
font-weight: bold;
}

/* Page 1 speciﬁc styles (Dark theme) */ body.page1 {

font-family: Arial, sans-serif;
background-image: url('background1.jpg'); color:
#e0e0e0;
}

body.page1 header h1
{ color: #4fc3f7;
}

body.page1 header .subtitle {

color: #b3e5fc;
}

body.page1 main {
background-color: rgba(33, 33, 33, 0.8);
}

body.page1 main .content h2

{ color: #81d4fa;
}

body.page1 main .content p {

color: #e0e0e0;
}

body.page1 a
{ color:
#4fc3f7;
}

body.page1 a:hover
{ color: #81d4fa;
}

body.page1 li::before
{ color: #4fc3f7;
}

body.page1 footer {
background-color: rgba(25, 25, 25, 0.8);
}

/* Page 2 speciﬁc styles (Light theme) */ body.page2

{
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-image: url('background2.jpg');
color: #333333;
}

body.page2 header h1
{ color: #1976d2;
}

body.page2 header .subtitle {

color: #2196f3;
}

body.page2 main {
background-color: rgba(255, 255, 255, 0.8);
}

body.page2 main .content h2 {

color: #1565c0;
}

body.page2 main .content p { color:

#333333;
}

body.page2 a
{ color:
#1976d2;
}

body.page2 a:hover
{ color: #1565c0;
}

body.page2 li::before
{ color: #1976d2;
}

body.page2 footer {
background-color: rgba(240, 240, 240, 0.8);
}

Output [First Page]

Output [second Page]

Experiment 09(a): Uses of background-repeat property

#Objective
The objective of this experiment is to create web pages that control the repetition
of the image with the background-repeat property.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Background Repeat - repeat</title>
<style>
body
{ margin
: 0;
padding: 0;
height:
100vh;
background-image:
url("https://cdn.vectorstock.com/i/1000x1000/76/13/colorful-square-blank-background-design- vector-
4007613.webp");
background-repeat: space;
background-size: 100px 100px;
background-color: #f0f8ff;
font-family: "Arial", sans-serif;
display: ﬂex;
justify-content: center;
align-items: center;
text-align: center;
color: #333;
}
.container
{ padding: 20px;
background-color: rgb(255, 255, 255);
border-radius: 8px;
}
h1 {
color: #085454;
}
p{
color: #555;

}
</style>
</head>
<body>
<div class="container">
<h1>Background Repeat: Space</h1>
<p>
The image repeats both horizontally and vertically to ﬁll the page.
</p>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Background Repeat - repeat</title>
<style>
body
{ margin
: 0;
padding: 0;
height:
100vh;
background-image:
url("https://cdn.vectorstock.com/i/1000x1000/76/13/colorful-square-blank-background-design- vector-
4007613.webp");
background-repeat: repeat-x;
background-size: 100px 100px;
background-color: #f0f8ff;
font-family: "Arial", sans-serif;
display: ﬂex;
justify-content: center;
align-items: center;
text-align: center;
color: #333;
}
.container
{ padding: 20px;
background-color: rgb(255, 255, 255);
border-radius: 8px;
}
h1 {
color: #085454;
}
p{
color: #555;
}

</style>
</head>
<body>
<div class="container">
<h1>Background Repeat: Repeat X</h1>
<p>The image repeats horizontally to ﬁll the page.</p>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Background Repeat - repeat</title>
<style>
body
{ margin
: 0;
padding: 0;
height:
100vh;
background-image:
url("https://cdn.vectorstock.com/i/1000x1000/76/13/colorful-square-blank-background-design- vector-
4007613.webp");
background-repeat: no-repeat;
background-size: 100px 100px;
background-color: #f0f8ff;
font-family: "Arial", sans-serif;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #333;
}
.container
{ padding: 20px;
background-color: rgb(255, 255, 255);
border-radius: 8px;
}
h1
{ color:#0854
54;
}
p{
color: #555;
}
</style>
</head>
<body>
<div class="container">
<h1>Background Repeat: No Repeat</h1>
<p>The image does not repeat and appears only once on the page.</p>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Background Repeat - repeat</title>
<style>
body
{ margin
: 0;
padding: 0;
height:
100vh;
background-image:
url("https://cdn.vectorstock.com/i/1000x1000/76/13/colorful-square-blank-background-design- vector-
4007613.webp");
background-repeat: round;
background-size: 100px 100px;
background-color: #f0f8ff;
font-family: "Arial", sans-serif;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
color: #333;
}
.container
{ padding: 20px;
background-color: rgb(255, 255, 255);
border-radius: 8px;
}
h1 {
color: #085454;
}
p{
color: #555;
}
</style>
</head>
<body>
<div class="container">
<h1>Background Repeat: Round</h1>
<p>
The image repeats both horizontally and vertically, resizing to fit the
container without cutting off.
</p>
</div>
</
body>
</
html>

Output [ Space.html ]

Output [ RepeatX.html ]
Output [ RepeatY.html ]

Output [ NoRepeat.html ]
Output [ Round.html ]

Experiment 09(b): Uses of Styles for Links

#Objective

The objective of this experiment is to create web pages that define styles
for links as A:link A:visited A:active A:hover

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>College Website</title>
<style>
body {
font-family: 'Lato', sans-serif;
font-size: 16px;
margin: 0;
padding: 0;
background-image: url('https://img.freepik.com/free-photo/ultra-detailed-nebula-
abstract-wallpaper-4_1562-749.jpg?
t=st=1733661073~exp=1733664673~hmac=e91fafc18101059457cfdddb59877300b
12681b808468e7c7921ad95e2c61ceb&w=996');
background-size: cover;
background-repeat: no-repeat;
background-color: #0000004d;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.wrapper {
flex: 1;
}
header {
background-color: #333;
color: #fff;
text-align: center;
padding: 30px;
border-bottom: 2px solid #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
27.h1 {
font-family: 'Roboto', sans-serif;
font-size: 36px;
margin: 0;
}
nav ul {
list-style-type: none;
margin: 20px 0 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 40px;
}
nav a {
color: #fff;
text-decoration: none;
font-weight: bold;
transition: color 0.3s ease;
}
nav a:hover {
color: orchid;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
nav a:active{
color: red;
}
.btn:visited{
color: green;
}
.abc:link{
color: bisque;
}
.main-content {
max-width: 800px;
margin: 80px auto;
padding: 40px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 5px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#" class="abc">Home</a></li>
<li><a href="#">Courses</a></li>
<li><a href="#">Admissions</a></li>
<li><a href="#">Academics</a></li>
<li><a href="#">Placement</a></li>
<li><a href="#">About Us</a></li>
</ul>
</nav>
</header>
<section class="main-content">
<h2>Welcome to Our College Website</h2>
<p>Explore the opportunities and academic programs we offer.</p>
<a href="#" class="btn">Learn More</a>
</section>
</body>
</html>

#Output
Experiment 10: Resume Using HTML Table and List Tags

Objective

The objective of this experiment is to create a structured resume using HTML,

utilising table and list tags to present information clearly and effectively.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Resume</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background-color: #f4f4f4;
}
.resume {
border: 2px solid #333;
padding: 20px;
background-color: #fff;
max-width: 600px;
margin: auto;
}
.section {
margin: 20px 0;
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #333;
padding: 8px;
text-align: left;
}
th {
background-color: #e7f3fe;
}
h1, h2, h3 {
margin: 0;
}
</style>
</head>
<body>
<div class="resume">
<center><h1>RESUME</h1>
<h2>Nikhil Sharma</h2>
<img src="https://cdn.pixabay.com/photo/2015/10/05/22/37/blank-profile-picture-
973460_1280.png" width="150" align="right">
<h3>CONTACT INFORMATION</h3></center>
<p>Email: [email protected]</p>
<p>Phone: +91 98**993939</p>
<p>LinkedIn: <linkedin class="com">
<in>

<div class="section">
<center><h2>Education</h2></center>
<table>
<tr>
<th>class</th>
<th>Institution</th>
<th>Year</th>
</tr>
<tr>
<td>10th</td>
<td>SR Capital Public School</td>
<td>2020</td>
</tr>
<tr>
<td>12th</td>
<td>DAV SR. Secondary School</td>
<td>2022</td>
</tr>
<tr>
<td> BTECH CSE</td>
<td>IPEC</td>
<td>2023-2027</td>
</tr>
</table>
</table>
</div>

<div class="section">
<center><h2>Work Experience</h2>
<H1>Professional Summary</H1></center>
<p>Results-driven professional with over 5 years of experience in software
development and project management. Proven track record of delivering high-quality
software solutions on time and within budget</p>
<center><h3>Intern</h3></center>
<p>CODE ALPHA,Elite TEC INTERN</p>
<p>Assisted in software development and participated in team meetings.</p>
</div>

<div class="section">
<Center><h2>Skills</h2></Center>
<ul>
<li>Programming Languages: Python, Java, JavaScript</li>
<li>Web Development: HTML, CSS, React</li>
<li>Database Management: SQL, MongoDB</li>
</ul>
</div>
</div>
</body>
</html>
Experiment 11: Calculator Using Java Script
#Objective

The objective of this experiment is to create a calculator using java script.

Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calculator in HTML CSS & JavaScript</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<input type="text" class="display" />

#style.css
@import url("https://fonts.googleapis.com/css2?
family=Poppins:wght@300;400;500;600;700&display=swap");
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #e0e3eb;
}
.container {
position: relative;
max-width: 300px;
width: 100%;
border-radius: 12px;
padding: 10px 20px 20px;
background: #fff;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}
.display {
height: 80px;
width: 100%;
outline: none;
border: none;
text-align: right;
margin-bottom: 10px;
font-size: 25px;
color: #000e1a;
pointer-events: none;
}
.buttons {
display: grid;
grid-gap: 10px;
grid-template-columns: repeat(4, 1fr);
}
.buttons button {
padding: 10px;
border-radius: 6px;
border: none;
font-size: 20px;
cursor: pointer;
background-color: #eee;
}
.buttons button:active {
transform: scale(0.99);
}
.operator {
color: #2f9fff;
}

#script.js
const display = document.querySelector(".display");
const buttons = document.querySelectorAll("button");
const specialChars = ["%", "*", "/", "-", "+", "="];
let output = "";

//Define function to calculate based on button clicked.

//Add event listener to buttons, call calculate() on click.

buttons.forEach((button) => {
//Button click listener calls calculate() with dataset value as argument.
button.addEventListener("click", (e) => calculate(e.target.dataset.value));
});

#Output
Experiment 12:validation of forms including password
using java script

#Objective:
Validation of forms including password using Javascript.

Code:
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Registration Form with Validation</title>
<link rel="stylesheet" href="styles.css">
</head>
<style>
/* General Body Styles */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

.container {
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
width: 100%;
max-width: 400px;
}

h2 {
text-align: center;
margin-bottom: 20px;
}

.form-group {
margin-bottom: 15px;
}

label {
font-size: 16px;
font-weight: bold;
display: block;
margin-bottom: 5px;
}

input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
font-size: 16px;
border: 1px solid #ddd;
border-radius: 4px;
}

input[type="text"]:focus,
input[type="password"]:focus {
border-color: #0056b3;
outline: none;
}

.submit-btn {
width: 100%;
padding: 12px;
font-size: 16px;
background-color: #0056b3;
color: #fff;
border: none;
border-radius: 4px;
cursor: pointer;
}

.submit-btn:hover {
background-color: #00408a;
}

.error {
color: red;
font-size: 14px;
margin-top: 10px;
}
</style>
<script>
function validateForm() {
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var confirmPassword = document.getElementById("confirmPassword").value;
var errorMessage = document.getElementById("errorMessage");
errorMessage.textContent = "";
if (username === "") {
errorMessage.textContent = "Username is required.";
return false;
}
var passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[!@#$%^&*])[A-Za-z\d!@#$%^&*]
{6,}$/;
if (!passwordRegex.test(password)) {
errorMessage.textContent = "Password must be at least 6 characters long, contain a
letter, a number, and a special character.";
return false;
}
if (password !== confirmPassword) {
errorMessage.textContent = "Passwords do not match.";
return false;
}
return true;
}
</script>
<body>
<div class="container">
<h2>Registration Form</h2>
<form id="myForm" onsubmit="return validateForm()" method="POST">
<div class="form-group">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required>
</div>

<div class="form-group">
<label for="password">Password:</label>
<input type="password" id="password" name="password" required>
</div>

<div class="form-group">
<label for="confirmPassword">Confirm Password:</label>
<input type="password" id="confirmPassword" name="confirmPassword"
required>
</div>

<div class="error" id="errorMessage"></div>

<input type="submit" value="Submit" class="submit-btn">

</form>
</div>

Web Design Lab
No ratings yet
Web Design Lab
58 pages
HTML Program
No ratings yet
HTML Program
26 pages
First Page 1
No ratings yet
First Page 1
32 pages
Saanp File
No ratings yet
Saanp File
37 pages
Web Workshop File
No ratings yet
Web Workshop File
52 pages
Experimentno.:-1: Object
No ratings yet
Experimentno.:-1: Object
8 pages
Project
No ratings yet
Project
19 pages
AryanWeb File
No ratings yet
AryanWeb File
24 pages
Web-D Report Final
No ratings yet
Web-D Report Final
50 pages
Web Developement File Newwww
No ratings yet
Web Developement File Newwww
45 pages
Web File
No ratings yet
Web File
34 pages
Darshit 1
No ratings yet
Darshit 1
35 pages
Set 3, 4, 5, 6
No ratings yet
Set 3, 4, 5, 6
33 pages
Web T Lab File
No ratings yet
Web T Lab File
38 pages
Experiment 1
No ratings yet
Experiment 1
41 pages
HTML
No ratings yet
HTML
28 pages
R22 SkillDevelopmentCourse Manual
No ratings yet
R22 SkillDevelopmentCourse Manual
50 pages
All Exp
No ratings yet
All Exp
29 pages
WP Manual Complete
No ratings yet
WP Manual Complete
30 pages
Lab 1
No ratings yet
Lab 1
4 pages
WT File
No ratings yet
WT File
27 pages
23hcs4142 Rohan Singh
No ratings yet
23hcs4142 Rohan Singh
27 pages
Srikant H
No ratings yet
Srikant H
5 pages
HTML-CSS Practical File 1
No ratings yet
HTML-CSS Practical File 1
42 pages
CA 1 Responsive
No ratings yet
CA 1 Responsive
15 pages
Gurvinder Kaur
No ratings yet
Gurvinder Kaur
44 pages
Code
No ratings yet
Code
12 pages
WD File 18306
No ratings yet
WD File 18306
27 pages
Finnal Webdfile
No ratings yet
Finnal Webdfile
42 pages
Experiment No.2: Title
No ratings yet
Experiment No.2: Title
5 pages
All 1 To 5
No ratings yet
All 1 To 5
40 pages
Document
No ratings yet
Document
47 pages
Ict Lab Report 08
No ratings yet
Ict Lab Report 08
12 pages
R22 SkillDevelopmentCourse
No ratings yet
R22 SkillDevelopmentCourse
21 pages
Portfolio Sumal
No ratings yet
Portfolio Sumal
8 pages
1) A) Create A Webpage With HTML Describing Your Department Use Paragraph and List Tags
No ratings yet
1) A) Create A Webpage With HTML Describing Your Department Use Paragraph and List Tags
25 pages
Online Book Store (Exp 1)
No ratings yet
Online Book Store (Exp 1)
8 pages
CCS375 Web Technologies Lab New Manual - Print
No ratings yet
CCS375 Web Technologies Lab New Manual - Print
43 pages
Self Learning Activity-WPD - S25
No ratings yet
Self Learning Activity-WPD - S25
43 pages
Create A Website For Our School Using HTML and Css
No ratings yet
Create A Website For Our School Using HTML and Css
26 pages
Final
No ratings yet
Final
13 pages
122a9049 WCN Exp 4
No ratings yet
122a9049 WCN Exp 4
10 pages
Online College Magazine Project
No ratings yet
Online College Magazine Project
11 pages
LAB Manual Frontend
No ratings yet
LAB Manual Frontend
32 pages
Web Tech Assignment 1 Sem 2-1
No ratings yet
Web Tech Assignment 1 Sem 2-1
10 pages
Web Technoloye
No ratings yet
Web Technoloye
46 pages
WT Practical File
No ratings yet
WT Practical File
26 pages
782 Assignment 2
No ratings yet
782 Assignment 2
13 pages
Index
No ratings yet
Index
1 page
Csit Lab Manual WT Lab Manual Removed
No ratings yet
Csit Lab Manual WT Lab Manual Removed
23 pages
My 6 Sem Main
No ratings yet
My 6 Sem Main
6 pages
Untitled
No ratings yet
Untitled
5 pages
Bu Assignment
No ratings yet
Bu Assignment
24 pages
HTML CSS JavaScript Resume Design
No ratings yet
HTML CSS JavaScript Resume Design
20 pages
Lab Journal 4 14032023 104921am
No ratings yet
Lab Journal 4 14032023 104921am
8 pages
WT Internal 1 Programs
No ratings yet
WT Internal 1 Programs
23 pages
Aadi
No ratings yet
Aadi
27 pages
Lab Report Web
No ratings yet
Lab Report Web
58 pages
New File 1 - Removed
No ratings yet
New File 1 - Removed
11 pages
Midterm Review STAT 2800 2010 - W2024
No ratings yet
Midterm Review STAT 2800 2010 - W2024
7 pages
The Evolution of Atomic Theory
No ratings yet
The Evolution of Atomic Theory
3 pages
WMM Test
No ratings yet
WMM Test
6 pages
Special Function M4
100% (1)
Special Function M4
12 pages
Construct Validity
No ratings yet
Construct Validity
8 pages
CLM-70N Data Sheet
No ratings yet
CLM-70N Data Sheet
8 pages
@bohring Bot @HeyitsyashXD 04 11 24 JR IIT STAR CO SCMODEL A-Pages
No ratings yet
@bohring Bot @HeyitsyashXD 04 11 24 JR IIT STAR CO SCMODEL A-Pages
10 pages
Reasoning Combine All Topics
No ratings yet
Reasoning Combine All Topics
29 pages
Temperature Mapping for Storage Areas
No ratings yet
Temperature Mapping for Storage Areas
2 pages
Manual de Diseño Perfiles FRP
No ratings yet
Manual de Diseño Perfiles FRP
255 pages
Reservoir Initialization Guide
No ratings yet
Reservoir Initialization Guide
11 pages
Trigonometry (Part-1 To 13) Final
No ratings yet
Trigonometry (Part-1 To 13) Final
30 pages
Low-Power VLSI Design Guide
No ratings yet
Low-Power VLSI Design Guide
34 pages
F.3 Science Syllabus 2023-24
No ratings yet
F.3 Science Syllabus 2023-24
2 pages
LECTURE TZhuFinal
No ratings yet
LECTURE TZhuFinal
55 pages
Business Research Methods - Unit 2
No ratings yet
Business Research Methods - Unit 2
20 pages
Assignment 2
No ratings yet
Assignment 2
2 pages
An On at Final Semester Training Submitted For The Partial Fulfillment For The Award of Degree of in Computer Science & Engineering
No ratings yet
An On at Final Semester Training Submitted For The Partial Fulfillment For The Award of Degree of in Computer Science & Engineering
43 pages
Mod1 Maths
No ratings yet
Mod1 Maths
23 pages
Puneet's IT Resume: Data Analysis & AWS Expertise
No ratings yet
Puneet's IT Resume: Data Analysis & AWS Expertise
3 pages
S7 String Compare Functions
No ratings yet
S7 String Compare Functions
3 pages
Interface Design
No ratings yet
Interface Design
34 pages
Green Hydrogen from Wastewater
No ratings yet
Green Hydrogen from Wastewater
11 pages
EE6411 2009 Unit00 Introduction C Chapter
No ratings yet
EE6411 2009 Unit00 Introduction C Chapter
3 pages
1 PB
No ratings yet
1 PB
8 pages
Physics A Level Definitions
100% (1)
Physics A Level Definitions
12 pages
Gravitation Worksheet
No ratings yet
Gravitation Worksheet
31 pages
Checklist For Science Students by Bharat Panchal
No ratings yet
Checklist For Science Students by Bharat Panchal
5 pages
Capstone Project Report Vishal 2
No ratings yet
Capstone Project Report Vishal 2
26 pages
Daily Lesson Plan Mathematics (DLP) Year 2: 39 Thursday Statistics and Probability 8. Data
No ratings yet
Daily Lesson Plan Mathematics (DLP) Year 2: 39 Thursday Statistics and Probability 8. Data
6 pages

Mehakwdfile

Uploaded by

Mehakwdfile

Uploaded by

Experiment 01: Make a Home Page For Bookstore Website

Code for the Home Page:

Code for the Login Page:

box-shadow: 0 2px 5px rgba(0,0,0,0.05); position: relative;

margin-top: 1rem; font-weight: bold; color: #333;

<a href="#" class="forgot-password">Forgot Password?</a>

Code for the Registration Page:

Code for the Catalogue Page:

#code for book store:

<button class="add-to-cart" onclick="addToCart('Operating System

<button class="add-to-cart" onclick="addToCart('Computer Networking', 'Mr

// Add new item to cart

// Save updated cart to localStorage

alert(title + ' has been added to your cart!');

// Add new item to cart

// Save updated cart to localStorage

alert(title + ' has been added to your cart!');

// Add new item to cart

// Save updated cart to localStorage

alert(title + ' has been added to your cart!');

// Add new item to cart

// Save updated cart to localStorage

alert(title + ' has been added to your cart!');

Code for the cart Page:

box-shadow: 0 2px 5px rgba(0,0,0,0.05); position: relative;

Js VALIDATION: Write JavaScript to validate the following fields of the above

const nameError = document.getElementById("nameError");

nameError.textContent = ""; passwordError.textContent = "";

let isValid = true;

const namePattern = /^[A-Za-z\s]+$/;

if (password.length < 6) { passwordError.textContent =

Output [ With Incorrect Fields]

Js VALIDATION: Write JavaScript to validate the following fields of the above

Output [ With Correct Fields]

Experiment 08: Use CSS Selectors To Design 2 Web

[FIRST PAGE]

[SECOND PAGE]

/* Page 1 speciﬁc styles (Dark theme) */ body.page1 {

body.page1 header .subtitle {

body.page1 main .content h2

body.page1 main .content p {

/* Page 2 speciﬁc styles (Light theme) */ body.page2

body.page2 header .subtitle {

body.page2 main .content h2 {

body.page2 main .content p { color:

Output [First Page]

Experiment 09(a): Uses of background-repeat property

Experiment 09(b): Uses of Styles for Links

The objective of this experiment is to create a structured resume using HTML,

The objective of this experiment is to create a calculator using java script.

//Define function to calculate based on button clicked.

//Add event listener to buttons, call calculate() on click.

<div class="error" id="errorMessage"></div>

<input type="submit" value="Submit" class="submit-btn">

You might also like