0% found this document useful (0 votes)
13 views

Node JS

Uploaded by

shireeshasri2004
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
13 views

Node JS

Uploaded by

shireeshasri2004
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 48

SIDDHARTHA INSTITUTE OF ENGINEERING & TECHNOLOGY

VinobhaNagar, Ibrahimpatnam, Ranga Reddy District – 501506


(Accredited by NBA, Approved by AICTE & Affiliated to JNTUH)
(AUTONOMOUS)

II B.Tech II Semester
COMPUTER SCIENCE AND ENGINEERING

FULL STACK WEB APPLICATION


LAB MANUAL

Academic Year : 2023-2024

B. TECH II YR II SEMESTER
NODEJS

NodeJs:
NodeJs is a Runtime Environment to Develop Web Applications. It is open source and free. It
is also a combination of JavaScript libraries.
Features of NodeJs −
 Extremely Fast
 Asynchronous and Event Driven
 Single Threaded
 Highly Scalable
 No Buffering
 Open Source
 License

JavaScript:
JavaScript was developed by Brendan Eich, a developer at Netscape Communications
Corporation, in 1995. JavaScript started life with the name Mocha, and was briefly named
LiveScript before being officially renamed to JavaScript. It is a scripting language that is
executed by the browser, i.e. on the client’s end. It is used in conjunction with HTML to
develop responsive webpages.
Web Applications:
A web application is application software that is accessed using a web browser. Web
applications are delivered on the World Wide Web to users with an active network connection.
Every web application has two parts –
1. Front End: The front end is a part you can see in your browser and interact with all the
aspects.
2. Back End: The back end is a part where we can interact with the database, and
performs the operation on it.

1. Front End Development: To build front end web applications developer uses the
following-
 HTML
 CSS
 JavaScript
HTML (Hyper Text Markup Language): Basically we use HTML to define building
blocks to our web pages.
CSS (Cascading Style Sheets): CSS is used to styling web pages and making them
beautiful.
JavaScript: It is used to adding functionalities and behavior to web pages.

2. Back End Development: To build back end application we have to use front end
development tools like HTML, CSS and JavaScript. Along with these we have to use any
of the Programming Language, Frameworks and Libraries.
Programming Languages –
 Java
 ReactJs
 .Net
 Python
 PHP and etc…
Basically web development jobs are categorized into three categories as follows:
 Front End developer
 Back End Developer
 Full Stack Developer.
Experiment 1:
Build a responsive web application for shipping cart with registration, login,
catalog and cart pages using CSS3 features, flex and grid.
AIM: Has to create a shopping cart responsive application with registration, login, catalog and
cart pages using CSS3 features, flex and grid.
File1: style.css
body{
margin: unset;
}
nav{
background-color: #333;
padding-left: 25px;
padding-right: 25px;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}

li {
float: left;
}

li a {
display: block;
color: white;
text-align: center;
padding: 20px 40px;
text-decoration: none;
font-size: 25px;
font-weight: bold;
}

li a:hover, li a.active {
background-color: #111;
}
.page-content{
margin-left: 30px;
margin-right: 30px;
}
.main-title{
text-align: center;
}
form{
margin-left: 35%;
width: 30%;
margin-bottom: 25px;
}
@media screen and (max-width: 600px) {
li a {
display: block;
color: white;
text-align: center;
padding: 10px 10px;
text-decoration: none;
font-size: 18px;
font-weight: bold;
}
form{
margin-left: unset;
width: 85%;
margin-bottom: 25px;
}
}

File2: registration.html
<!DOCTYPE html>
<html>
<head>
<title>Experiment 1 || Registration</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<style>
input[type=text], input[type=password], textarea, select {
width: 98%;
padding: 15px 5px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
}
input[type=text]:focus, input[type=password]:focus {
outline: none;
}
.text-center{
text-align: center;
}
.float-left{
float: left;
}
.registerbtn{
background: green;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
}
.registerbtn:hover{
background: #f1f1f1;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
}
.w-100{
width: 100%;
padding: 25px;
background: aliceblue;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<!-- <li><a href="index.html">Home</a></li> -->
<li><a class="active" href="registration.html">Registration</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="catalog.html">Catalog</a></li>
<li><a href="cart.html">Cart</a></li>
</ul>
</nav>
</header>
<div class="page-content text-center">
<h1 class="main-title">Registration</h1>
<form>
<div class="w-100">
<label class="float-left"> <b>Full Name:</b> </label>
<input type="text" id="full_name" placeholder="Full Name" size="15"
required />
<label class="float-left" for="email"><b>Email Id:</b></label>
<input type="text" placeholder="Enter Email" id="email" required />
<label class="float-left"><b>Phone:</b></label>
<input type="text" id="phone" placeholder="phone no." size="10" required />
<label class="float-left" for="psw"><b>Password:</b></label>
<input type="password" placeholder="Enter Password" id="pwd" required />
<label class="float-left" for="psw-repeat"><b>Re-type
Password:</b></label>
<input type="password" placeholder="Retype Password" id="cpwd" required
/>
<button type="submit" class="registerbtn">Submit</button>
</div>
</form>
</div>
</body>
</html>
Outupt:
File3: login.html
<!DOCTYPE html>
<html>
<head>
<title>Experiment 1 || Login</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<style>
input[type=text], input[type=password], textarea, select {
width: 98%;
padding: 15px 5px;
margin: 5px 0 22px 0;
display: inline-block;
border: none;
}
input[type=text]:focus, input[type=password]:focus {
outline: none;
}
.text-center{
text-align: center;
}
.float-left{
float: left;
}
.registerbtn{
background: green;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
}
.registerbtn:hover{
background: #f1f1f1;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
}
.w-100{
width: 100%;
padding: 25px;
background: aliceblue;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<!-- <li><a href="index.html">Home</a></li> -->
<li><a href="registration.html">Registration</a></li>
<li><a class="active" href="login.html">Login</a></li>
<li><a href="catalog.html">Catalog</a></li>
<li><a href="cart.html">Cart</a></li>
</ul>
</nav>
</header>
<div class="page-content text-center">
<h1 class="main-title">Login</h1>
<form>
<div class="w-100">
<label class="float-left" for="email"><b>Email Id:</b></label>
<input type="text" placeholder="Enter Email" id="email" required />
<label class="float-left" for="psw"><b>Password:</b></label>
<input type="password" placeholder="Enter Password" id="pwd" required />
<button type="submit" class="registerbtn">Submit</button>
</div>
</form>
</div>
</body>
</html>
Output:
File4: catalog.html
<!DOCTYPE html>
<html>
<head>
<title>Experiment 1 || Catelog</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<style>
li a {
display: block;
color: white;
text-align: center;
padding: 18px 30px;
text-decoration: none;
font-size: 23px;
font-weight: bold;
}
.display-type{
padding: 10px;
background: #ccc;
color: #fff;
margin-right: 5px;
}
.display-type.active{
padding: 10px;
background: blue;
color: #fff;
margin-right: 5px;
}
.grid-container{
display: grid;
grid: auto auto / auto auto auto auto;
grid-gap: 10px;
}
.grid-item {
background-color: rgb(255, 255, 255);
text-align: center;
font-size: 30px;
background-color:#f9f9f9;
}
.grid-item img{
width: 250px;
}
.grid-item p{
margin: unset;
}
.grid-item-info{
background: #fff;
border: 2px solid #f9f9f9;
padding: 10px;
}
.grid-item-info div button{
padding: 10px 15px;
border: 1px solid #ccc;
margin: 2px;
}
.grid-item-info div input{
width: 50px;
padding: 10px;
text-align: center;
}

.flex-container {
display: flex;
flex-wrap: wrap;
grid-gap: 10px;
}
.flex-item {
background-color: #f1f1f1;
flex: 100%;
padding: 10px;
}
.flex-item .img-block{
width: 10%;
float: left;
}
.item-info{
width: 85%;
float: left;
}
.flex-item .img-block img{
width: 100%;
}
.item-info div button{
padding: 10px 15px;
border: 1px solid #ccc;
margin: 2px;
}
.item-info div input{
width: 50px;
padding: 10px;
text-align: center;
}
.p-10{
padding: 10px;
}
.item-info h4{
margin: unset;
font-size: 30px;
}
.price{
font-size: 20px;
padding: 5px;
}
@media screen and (max-width: 600px) {
.grid-container{
grid: unset;
}
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<!-- <li><a href="index.html">Home</a></li> -->
<li><a class="active" href="registration.html">Registration</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="catalog.html">Catalog</a></li>
<li><a href="cart.html">Cart</a></li>
</ul>
</nav>
</header>
<div class="page-content">
<h1 class="main-title">Products</h1>
<p class="display-style">
<a class="display-type active" id="display-1" onclick="changeDisplay('1');">Flex</a>
<a class="display-type" id="display-2" onclick="changeDisplay('2');">Grid</a>
</p>
<div class="flex-container" id="flex-container">
<div class="flex-item">
<div class="img-block">
<img src="images/products/1.png" alt="About Us" />
</div>
<div class="item-info">
<div class="p-10">
<h4>Apple</h4>
<p>Rs. 50.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
<div class="flex-item">
<div class="img-block">
<img src="images/products/2.png" alt="About Us" />
</div>
<div class="item-info">
<div class="p-10">
<h4>Papaya</h4>
<p>Rs. 35.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
<div class="flex-item">
<div class="img-block">
<img src="images/products/3.png" alt="About Us" />
</div>
<div class="item-info">
<div class="p-10">
<h4>Berries</h4>
<p>Rs. 150.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
<div class="flex-item">
<div class="img-block">
<img src="images/products/4.png" alt="About Us" />
</div>
<div class="item-info">
<div class="p-10">
<h4>Pasion Fruit</h4>
<p>Rs. 250.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
<div class="flex-item">
<div class="img-block">
<img src="images/products/5.png" alt="About Us" />
</div>
<div class="item-info">
<div class="p-10">
<h4>Mangos</h4>
<p>Rs. 60.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
<div class="flex-item">
<div class="img-block">
<img src="images/products/6.png" alt="About Us" />
</div>
<div class="item-info">
<div class="p-10">
<h4>Onions</h4>
<p>Rs. 25.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
<div class="flex-item">
<div class="img-block">
<img src="images/products/7.png" alt="About Us" />
</div>
<div class="item-info">
<div class="p-10">
<h4>Kivi Fruit</h4>
<p>Rs. 120.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
<div class="flex-item">
<div class="img-block">
<img src="images/products/8.png" alt="About Us" />
</div>
<div class="item-info">
<div class="p-10">
<h4>Mushroom</h4>
<p>Rs. 180.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
</div>
<div class="grid-container" id="grid-container" style="display: none;">
<div class="grid-item">
<img src="images/products/1.png" alt="About Us" />
<div class="grid-item-info">
<p>Apple</p>
<p class="price">Rs. 50.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
<div class="grid-item">
<img src="images/products/2.png" alt="About Us" />
<div class="grid-item-info">
<p>Papaya</p>
<p class="price">Rs. 35.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
<div class="grid-item">
<img src="images/products/3.png" alt="About Us" />
<div class="grid-item-info">
<p>Berries</p>
<p class="price">Rs. 150.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
<div class="grid-item">
<img src="images/products/4.png" alt="About Us" />
<div class="grid-item-info">
<p>Pasion Fruit</p>
<p class="price">Rs. 250.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
<div class="grid-item">
<img src="images/products/5.png" alt="About Us" />
<div class="grid-item-info">
<p>Mangos</p>
<p class="price">Rs. 60.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
<div class="grid-item">
<img src="images/products/6.png" alt="About Us" />
<div class="grid-item-info">
<p>Onions</p>
<p class="price">Rs. 25.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
<div class="grid-item">
<img src="images/products/7.png" alt="About Us" />
<div class="grid-item-info">
<p>Kivi Fruit</p>
<p class="price">Rs. 120.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
<div class="grid-item">
<img src="images/products/8.png" alt="About Us" />
<div class="grid-item-info">
<p>Mushroom</p>
<p class="price">Rs. 180.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
<br><br>
</div>
</body>
<script>
function changeDisplay(id)
{
document.getElementById("flex-container").style.display = 'none';
document.getElementById("grid-container").style.display = 'none';
document.getElementById("display-1").classList.remove("active");
document.getElementById("display-2").classList.remove("active");
if(id == 1){
document.getElementById("flex-container").style.display = 'flex';
document.getElementById("display-1").classList.add("active");
}
if(id == 2){
document.getElementById("grid-container").style.display = 'grid';
document.getElementById("display-2").classList.add("active");
}
}
</script>
</html>
Output:
File5: cart.html
<!DOCTYPE html>
<html>
<head>
<title>Experiment 1 || Cart</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<style>
.cart-items{
width: 100%;
float: left;
}
.pricing-info, .items-info{
padding: 20px;
background: #f1f1f1;
}
.pricing-info h4, .items-info h4{
margin: unset;
}
.ml-10{
margin-left: 10px;
}
table, td, th {
border: 1px solid;
text-align: center;
}
td img{
height: 80px;
}
thead{
height: 45px;
background: beige;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 25px;;
}
tr{
height: 35px;
}
.text-right{
text-align: right;;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<!-- <li><a href="index.html">Home</a></li> -->
<li><a href="registration.html">Registration</a></li>
<li><a href="login.html">Login</a></li>
<li><a href="catalog.html">Catalog</a></li>
<li><a class="active" href="cart.html">Cart</a></li>
</ul>
</nav>
</header>
<div class="page-content">
<h1 class="main-title">Cart Products</h1>
<div class="cart-items">
<div class="items-info">
<h4>Your Cart Products</h4>
</div>
<table>
<thead>
<tr>
<th>S No</th>
<th>Image</th>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img src="images/products/1.png" alt="About Us" />
</td>
<td>Apple</td>
<td>50.00</td>
<td>4</td>
<td>200.00</td>
</tr>
<tr>
<td>2</td>
<td>
<img src="images/products/3.png" alt="About Us" />
</td>
<td>Berries</td>
<td>150.00</td>
<td>2</td>
<td>300.00</td>
</tr>
<tr>
<td>3</td>
<td>
<img src="images/products/5.png" alt="About Us" />
</td>
<td>Mangos</td>
<td>60.00</td>
<td>10</td>
<td>600.00</td>
</tr>
<tr>
<td colspan="5" class="text-right"><b>Total : </b></td>
<td>1100.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Outupt:
Experiment 2:
Make the above web application responsive web application using Bootstrap
framework.
AIM: Has to create a shopping cart responsive application with registration, login, catalog and
cart pages using Bootstrap framework.
File1: registration.html
<!doctype html>
<html lang="en">
<head>
<title>Experiment 2 || Registration</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.registration-form{
margin-top: 25px;
}
.form-bg{
background: aliceblue;
}
.pull-right{
float: right;
margin-bottom: 25px;
}
.navbar-dark .navbar-nav .nav-link{
color: #ffffff;
font-weight: bold;
}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-
link.active, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-
link {
color: #ffc107;
font-weight: bold;
}
.nav-item a{
font-size: 20px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<!-- <li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li> -->
<li class="nav-item active">
<a class="nav-link" href="registration.html">Registration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="catalog.html">Catalog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html">Cart</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center mt-5">Registration</h1>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 form-bg">
<form class="registration-form">
<div class="form-group">
<label for="full_name">Full Name</label>
<input type="email" class="form-control"
id="full_name" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="email">Email Id</label>
<input type="text" class="form-control"
id="email" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" class="form-control"
id="phone" aria-describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" class="form-control"
id="pwd" placeholder="Password">
</div>
<div class="form-group">
<label for="cpwd">Re-type Password</label>
<input type="password" class="form-control"
id="cpwd" placeholder="Password">
</div>
<div class="w-100">
<button type="submit" class="btn btn-primary
pull-right">Submit</button>
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>

</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-
ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>

Output:

File2: login.html
<!doctype html>
<html lang="en">
<head>
<title>Experiment 2 || Login</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.login-form{
margin-top: 25px;
}
.form-bg{
background: aliceblue;
}
.pull-right{
float: right;
margin-bottom: 25px;
}
.navbar-dark .navbar-nav .nav-link{
color: #ffffff;
font-weight: bold;
}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-
dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
color: #ffc107;
font-weight: bold;
}
.nav-item a{
font-size: 20px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<!-- <li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="registration.html">Registration</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="catalog.html">Catalog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html">Cart</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center mt-5">Login</h1>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 form-bg">
<form class="login-form">
<div class="form-group">
<label for="email">Email Id</label>
<input type="text" class="form-control" id="email" aria-
describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" class="form-control" id="pwd"
placeholder="Password">
</div>
<div class="w-100">
<button type="submit" class="btn btn-primary pull-
right">Submit</button>
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>

</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
Output:

File3: catalog.html
<!doctype html>
<html lang="en">
<head>
<title>Experiment 2 || Catalog</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.login-form{
margin-top: 25px;
}
.form-bg{
background: aliceblue;
}
.pull-right{
float: right;
margin-bottom: 25px;
}
.navbar-dark .navbar-nav .nav-link{
color: #ffffff;
font-weight: bold;
}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-
dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
color: #ffc107;
font-weight: bold;
}
.nav-item a{
font-size: 20px;
}
@media (min-width: 1200px)
{
.container {
max-width: 90%;
}
}
.product {
background: #fff;
border: 2px solid #f9f9f9;
margin-bottom: 30px;
text-align: center;
}
.img-block img{
width: 100%;
}
.item-info div button{
padding: 10px 15px;
border: 1px solid #ccc;
margin: 2px;
}
.item-info div input{
width: 50px;
padding: 10px;
text-align: center;
}
.p-10{
padding: 10px;
}
.np-0{
padding: unset;
}
.list-view{
padding-right: 30px;
padding-left: 30px;
}
.list-view .item-info{
text-align: left;
height: 217px;
padding: 10px 20px;
}
.nav{
background: beige;
margin-bottom: 15px;
}
.nav-link.active{
background: blue;
color: #fff !important;
}
.hide{
display: none;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<!-- <li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="registration.html">Registration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="catalog.html">Catalog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html">Cart</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center mt-5">Products</h1>
</div>
</div>
<div class="row">
<div class="col-md-12">
<ul class="nav justify-content-end">
<li class="nav-item">
<a class="nav-link active" id="display-1" onclick="changeDisplay('1')">Flex</a>
</li>
<li class="nav-item">
<a class="nav-link" id="display-2" onclick="changeDisplay('2')">Grid</a>
</li>
</ul>
</div>
</div>
<div class="row" id="flex-container">
<div class="col-md-6 list-view">
<div class="row">
<div class="col-md-4 np-0">
<div class="img-block">
<img src="images/products/1.png" alt="About Us" />
</div>
</div>
<div class="col-md-8 np-0">
<div class="item-info product">
<h4>Apple</h4>
<p>Rs. 50.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 list-view">
<div class="row">
<div class="col-md-4 np-0">
<div class="img-block">
<img src="images/products/1.png" alt="About Us" />
</div>
</div>
<div class="col-md-8 np-0">
<div class="item-info product">
<h4>Apple</h4>
<p>Rs. 50.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 list-view">
<div class="row">
<div class="col-md-4 np-0">
<div class="img-block">
<img src="images/products/1.png" alt="About Us" />
</div>
</div>
<div class="col-md-8 np-0">
<div class="item-info product">
<h4>Apple</h4>
<p>Rs. 50.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 list-view">
<div class="row">
<div class="col-md-4 np-0">
<div class="img-block">
<img src="images/products/1.png" alt="About Us" />
</div>
</div>
<div class="col-md-8 np-0">
<div class="item-info product">
<h4>Apple</h4>
<p>Rs. 50.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 list-view">
<div class="row">
<div class="col-md-4 np-0">
<div class="img-block">
<img src="images/products/1.png" alt="About Us" />
</div>
</div>
<div class="col-md-8 np-0">
<div class="item-info product">
<h4>Apple</h4>
<p>Rs. 50.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 list-view">
<div class="row">
<div class="col-md-4 np-0">
<div class="img-block">
<img src="images/products/1.png" alt="About Us" />
</div>
</div>
<div class="col-md-8 np-0">
<div class="item-info product">
<h4>Apple</h4>
<p>Rs. 50.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 list-view">
<div class="row">
<div class="col-md-4 np-0">
<div class="img-block">
<img src="images/products/1.png" alt="About Us" />
</div>
</div>
<div class="col-md-8 np-0">
<div class="item-info product">
<h4>Apple</h4>
<p>Rs. 50.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
</div>
<div class="col-md-6 list-view">
<div class="row">
<div class="col-md-4 np-0">
<div class="img-block">
<img src="images/products/1.png" alt="About Us" />
</div>
</div>
<div class="col-md-8 np-0">
<div class="item-info product">
<h4>Apple</h4>
<p>Rs. 50.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
</div>
</div>
<div class="row" id="grid-container">
<div class="col-md-3">
<div class="img-block">
<img src="images/products/1.png" alt="About Us" />
</div>
<div class="item-info product">
<div class="p-10">
<h4>Apple</h4>
<p>Rs. 50.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="img-block">
<img src="images/products/2.png" alt="About Us" />
</div>
<div class="item-info product">
<div class="p-10">
<h4>Papaya</h4>
<p>Rs. 35.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="img-block">
<img src="images/products/3.png" alt="About Us" />
</div>
<div class="item-info product">
<div class="p-10">
<h4>Berries</h4>
<p>Rs. 150.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="img-block">
<img src="images/products/4.png" alt="About Us" />
</div>
<div class="item-info product">
<div class="p-10">
<h4>Pasion Fruit</h4>
<p>Rs. 250.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="img-block">
<img src="images/products/5.png" alt="About Us" />
</div>
<div class="item-info product">
<div class="p-10">
<h4>Mangos</h4>
<p>Rs. 60.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="img-block">
<img src="images/products/6.png" alt="About Us" />
</div>
<div class="item-info product">
<div class="p-10">
<h4>Onions</h4>
<p>Rs. 25.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="img-block">
<img src="images/products/7.png" alt="About Us" />
</div>
<div class="item-info product">
<div class="p-10">
<h4>Kivi Fruit</h4>
<p>Rs. 120.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
<div class="col-md-3">
<div class="img-block">
<img src="images/products/8.png" alt="About Us" />
</div>
<div class="item-info product">
<div class="p-10">
<h4>Mushroom</h4>
<p>Rs. 180.00/-</p>
<div><button>-</button><input type="text" value="1" /><button>+</button></div>
</div>
</div>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script>
document.getElementById("grid-container").classList.add('hide');
function changeDisplay(id)
{
document.getElementById("flex-container").classList.add('hide');
document.getElementById("grid-container").classList.add('hide');
document.getElementById("display-1").classList.remove("active");
document.getElementById("display-2").classList.remove("active");
if(id == 1){
document.getElementById("flex-container").classList.remove('hide');
document.getElementById("display-1").classList.add("active");
}
if(id == 2){
document.getElementById("grid-container").classList.remove('hide');
document.getElementById("display-2").classList.add("active");
}
}
</script>
</body>
</html>
Output:
File4: cart.html
<!doctype html>
<html lang="en">
<head>
<title>Experiment 2 || Cart</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.navbar-dark .navbar-nav .nav-link{
color: #ffffff;
font-weight: bold;
}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-
dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
color: #ffc107;
font-weight: bold;
}
.nav-item a{
font-size: 20px;
}
@media (min-width: 1200px)
{
.container {
max-width: 90%;
}
}
td img{
height: 80px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<!-- <li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="registration.html">Registration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="catalog.html">Catalog</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="cart.html">Cart</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center mt-5">Cart Products</h1>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<table class="table table-bordered">
<thead>
<tr>
<th>S No</th>
<th>Image</th>
<th>Name</th>
<th>Price</th>
<th>Quantity</th>
<th>Total Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<img src="images/products/1.png" alt="About Us" />
</td>
<td>Apple</td>
<td>50.00</td>
<td>4</td>
<td>200.00</td>
</tr>
<tr>
<td>2</td>
<td>
<img src="images/products/3.png" alt="About Us" />
</td>
<td>Berries</td>
<td>150.00</td>
<td>2</td>
<td>300.00</td>
</tr>
<tr>
<td>3</td>
<td>
<img src="images/products/5.png" alt="About Us" />
</td>
<td>Mangos</td>
<td>60.00</td>
<td>10</td>
<td>600.00</td>
</tr>
<tr>
<td colspan="5" class="text-right"><b>Total : </b></td>
<td>1100.00</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
</body>
</html>
Output:
Experiment 3:
Use JavaScript for doing client – side validation of the pages implemented in
experiment 1 and experiment 2.
AIM: Has to implement client side validation for the pages implemented in experiment 1 and
experiment 2 by using JavaScript.
File1: registration.html
<!doctype html>
<html lang="en">
<head>
<title>Experiment 3 || Registration</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-
fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-
Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.registration-form{
margin-top: 25px;
}
.form-bg{
background: aliceblue;
}
.pull-right{
float: right;
margin-bottom: 25px;
}
.navbar-dark .navbar-nav .nav-link{
color: #ffffff;
font-weight: bold;
}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
color: #ffc107;
font-weight: bold;
}
.nav-item a{
font-size: 20px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-
target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle
navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<!-- <li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li> -->
<li class="nav-item active">
<a class="nav-link" href="registration.html">Registration</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="catalog.html">Catalog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html">Cart</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center mt-5">Registration</h1>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 form-bg">
<form class="registration-form">
<div class="form-group">
<label for="full_name">Full Name</label>
<input type="email" class="form-control" id="full_name" aria-
describedby="emailHelp" placeholder="Enter email">
</div>
<div class="form-group">
<label for="email">Email Id</label>
<input type="text" class="form-control" id="email" aria-
describedby="emailHelp" placeholder="Enter email id">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="text" class="form-control" id="phone" aria-
describedby="emailHelp" placeholder="Enter phone number">
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" class="form-control" id="pwd" placeholder="Enter
password">
</div>
<div class="form-group">
<label for="cpwd">Re-type Password</label>
<input type="password" class="form-control" id="cpwd"
placeholder="Enter re-type password">
</div>
<div class="w-100">
<!-- <button type="submit" class="btn btn-primary pull-
right">Submit</button> -->
<button type="button" class="btn btn-primary pull-right"
onclick="submitFormData();">Submit</button>
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>

</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-
ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script>
function submitFormData()
{
var full_name = document.getElementById("full_name").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("phone").value;
var pwd = document.getElementById("pwd").value;
var cpwd = document.getElementById("cpwd").value;
var error_message = '';
if(full_name == ''){
error_message += 'Please Enter Full Name.\n';
}
if(email == ''){
error_message += 'Please Enter Email Id.\n';
}
if(phone == ''){
error_message += 'Please Enter Phone Number.\n';
}
if(pwd == ''){
error_message += 'Please Enter Password.\n';
}
if(cpwd == ''){
error_message += 'Please Enter Re-type Password.\n';
}
if(pwd != '' && cpwd != '' && pwd != cpwd)
{
error_message += 'Password and Re-type Password are not matching.\n';
}
if(error_message != '')
{
alert(error_message);return false;
}
alert('Thank you giving all the required information.');return false;
}
</script>
</body>
</html>

Output:

File2: login.html
<!doctype html>
<html lang="en">
<head>
<title>Experiment 3 || Login</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Bootstrap CSS -->


<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<style>
.login-form{
margin-top: 25px;
}
.form-bg{
background: aliceblue;
}
.pull-right{
float: right;
margin-bottom: 25px;
}
.navbar-dark .navbar-nav .nav-link{
color: #ffffff;
font-weight: bold;
}
.navbar-dark .navbar-nav .active>.nav-link, .navbar-dark .navbar-nav .nav-link.active, .navbar-dark
.navbar-nav .nav-link.show, .navbar-dark .navbar-nav .show>.nav-link {
color: #ffc107;
font-weight: bold;
}
.nav-item a{
font-size: 20px;
}
.error{
color: red;
font-size: 11px;
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar navbar-dark bg-dark">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-
controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarText">
<ul class="navbar-nav mr-auto">
<!-- <li class="nav-item">
<a class="nav-link" href="index.html">Home</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="registration.html">Registration</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="catalog.html">Catalog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="cart.html">Cart</a>
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="text-center mt-5">Login</h1>
</div>
</div>
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6 form-bg">
<form class="login-form" action="" method="post">
<div class="form-group">
<label for="email">Email Id</label>
<input type="text" class="form-control" id="email" aria-describedby="emailHelp"
placeholder="Enter email" onkeyup="clearError(this.id);" />
<span class="error" id="email_error"></span>
</div>
<div class="form-group">
<label for="pwd">Password</label>
<input type="password" class="form-control" id="pwd" placeholder="Password"
onkeyup="clearError(this.id);" />
<span class="error" id="pwd_error"></span>
</div>
<div class="w-100">
<!-- <button type="submit" class="btn btn-primary pull-right">Submit</button> -->
<button type="button" class="btn btn-primary pull-right"
onclick="submitFormData();">Submit</button>
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>

</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-
KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-
ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-
JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<script>
function submitFormData()
{
var email = document.getElementById("email").value;
var pwd = document.getElementById("pwd").value;
var error_count = 0;
if(email == ''){
error_count += 1;
document.getElementById("email_error").textContent = "Please Enter Email Id.";
}
if(pwd == ''){
error_count += 1;
document.getElementById("pwd_error").textContent = "Please Enter Password.";
}
if(error_count != 0)
{
return false;
}
alert('Thank you giving all the required information.');
window.location.href = 'catalog.html';
return false;
}
function clearError(id)
{
document.getElementById(id+"_error").textContent = "";
}
</script>
</body>
</html>
Output:

You might also like