Node JS
Node JS
II B.Tech II Semester
COMPUTER SCIENCE AND ENGINEERING
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">
</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">
</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">
</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">
</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: