NODEJS Lab

PRINCETON INSTITUTE OF ENGINEERING & TECHNOLOGY FOR WOMEN

(Approved by AICTE, New Delhi & Affiliated to JNTU Hyderabad)
Chowdaryguda (V), Ghatkesar (M), Medchal-Malkajgiri(D).TS-500088

Phone: 9394544566 / 6305324412

e-mail: [email protected]

JNTUH Code(6M) CIVIL–EEE–ECE-CSE-CSE(AI&ML)-CSE(DS)-CSE(CS) EAMCET Code– PETW

DEPARTMENT OF COMPUTER SCIENCE ENGINEERING

Node-JS Lab Manual
Regulation: R22/JNTUH
Academic Year 2024-2025
Prepared By: N.Sadhana
II B. TECH II SEMESTER
Stream: CSE(B)

COMPUTER SCIENCE AND ENGINEERING

Dept of CSE
Page 1
 NODEJS Lab

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

PRINCETON INSTITUTE OF ENGINEERING & TECHNOLOGY FOR WOMEN
(Approved by AICTE, New Delhi & Affiliated to JNTU Hyderabad)
Chowdaryguda (V), Ghatkesar (M), Medchal-Malkajgiri(D).TS-500088
Phone: 9394544566 / 6305324412

e-mail: [email protected]

JNTUH Code(6M) CIVIL–EEE–ECE-CSE-CSE(AI&ML)-CSE(DS)-CSE(CS) EAMCET Code– PETW

DEPARTMENT OF COMPUTER SCIENCE AND ENGINEERING

Academic Year 2024-2025

COLLEGE VISION, MISSION, CORE VALUES AND QUALITY POLICY:
VISION

The educational environment in order to develop graduates with the strong academic technical backgrounds
needed to achieve distinction in the discipline and to bring up the Institution as an Institution of Academic
excellence of International standard.

MISSION

We transform persons into personalities by the state-of-the-art infrastructure, time consciousness, quick response
and the best academic practices through assessment and advice.

CORE VALUES

Attaining global eminence, by achieving excellence in all that we do in life education and service

Dept of CSE
Page 2
 NODEJS Lab

VISION AND MISSION OF CSE DEPARTMENT

VISION

The educational environment in order to develop graduates with the strong academic technical
backgrounds needed to achieve distinction in the discipline and to bring up the Institution as an
Institution of Academic excellence of International standard.

MISSION

We transform persons into personalities by the state-of-the-art infrastructure, time consciousness, quic

Dept of CSE
Page 3
NODEJS Lab

PROGRAMME EDUCATIONAL OBJECTIVES (PEOs)

PEO1: Graduates will demonstrate technical skills, competency in AI & ML and exhibit team
management capability with proper communication in a job environment

PEO2: Graduates will function in their profession with social awareness and responsibility

PEO3: Graduates will interact with their peers in other disciplines in industry and
society and contribute to the economic growth of the country

PEO4: Graduates will be successful in pursuing higher studies in engineering or

management

PROGRAMME OUTCOMES (POs)

PO1: Engineering knowledge: Apply the knowledge of mathematics, science,

engineering fundamentals, and an engineering specialization to the solution of complex
engineering problems.

PO2: Problem analysis: Identify, formulate, review research literature and analyze
complex engineering problems reaching substantiated conclusions using first principles
of mathematics, natural sciences, and engineering sciences.

PO3: Design/development of solutions: Design solutions for complex engineering

problems and design system components or processes that meet the specified needs with
appropriate consideration for the public health and safety, and the cultural, societal, and
environmental considerations.

PO4: Conduct investigations of complex problems: Use research-based knowledge and

research methods including design of experiments, analysis and interpretation of data,
and synthesis of the information to provide valid conclusions.

PO5: Modern tool usage: Create, select, and apply appropriate techniques, resources,
and modern engineering and IT tools including prediction and modeling to complex
engineering activities with an understanding of the limitations.

PO6: The engineer and society: Apply reasoning informed by the contextual knowledge to
assess societal, health, safety, legal and cultural issues and the consequent responsibilities
relevant to the professional engineering practice.

Dept of CSE
Page 4
NODEJS Lab

PO7: Environment and sustainability: Understand the impact of the professional engineering
solutions in societal and environmental contexts, and demonstrate the knowledge of, and
need for sustainable development.

PO8: Ethics: Apply ethical principles and commit to professional ethics and
responsibilities and norms of the engineering practice.

PO9: Individual and team work: Function effectively as an individual and as a member
or leader in diverse teams, and in multidisciplinary settings.
PO10: Communication: Communicate effectively on complex engineering activities with the
engineering community and with society at large, such as, being able to comprehend
and write effective reports and design documentation, make effective presentations, and give
and receive clear instructions.

PO11: Project management and finance: Demonstrate knowledge and understanding of

the engineering and management principles and apply these to one’s own work, as a
member and leader in a team, to manage projects and in multidisciplinary environments.

PO12: Life-long learning: Recognize the need for, and have the preparation and ability to
engage in independent and life-long learning in the broadest context of technological
change.

PROGRAMME SPECIFIC OUTCOMES (PSOs)

PSO1: Design and develop intelligent automated systems applying mathematical, analytical,
programming and operational skills to solve real world problems

PSO2: Apply machine learning techniques, software tools to conduct experiments,

interpret data and to solve complex problems

PSO3: Implement engineering solutions for the benefit of society by the use of AI and ML

Dept of CSE
Page 5
NODEJS Lab

2024-25 PRINCETON INSTITUTE OF

B.Tech.
ENGINEERING&TECHNOLOGY FOR
II-II
WOMEN
Semester

Code L T P
NODE JS/ REACT JS/ DJANGO LAB
Credits: 1 0 0 2

Course Objectives:
 To implement the static web pages using HTML and do client side validation
using JavaScript.
 To design and work with databases using Java
 To develop an end to end application using java full stack.
 To introduce Node JS implementation for server side programming.
 To experiment with single page application development using React.

Software Requirements: JDK, Tomcat Server, PHP and WAMP Server.

Exercises:

1. Build a responsive web application for shopping cart with registration, login,

catalog and cart pages using CSS3 features, flex and grid.
2. Make the above web application responsive web application using Bootstrap
framework.
3. Use JavaScript for doing client – side validation of the pages implemented in

experiment 1 and experiment 2.

4. Explore the features of ES6 like arrow functions, callbacks, promises,
async/await. Implement an application for reading the weather information from
openweathermap.org and display the information in the form of a graph on the
web page.
5. Develop a java stand alone application that connects with the database (Oracle /
my Sql) and perform the CRUD operation on the database tables.
6. Create an xml for the bookstore. Validate the same using both DTD and XSD.

Dept of CSE
Page 6
NODEJS Lab

7. Design a controller with servlet that provides the interaction with

application developed in experiment 1 and the database created in

experiment 5.
8. Maintaining the transactional history of any user is very important. Explore
the various session tracking mechanism (Cookies, HTTP Session)
9. Create a custom server using http module and explore the other modules of Node
JS like OS, path, event.
10. Develop an express web application that can interact with REST API to perform

CRUD operations on student data. (Use Postman)

Dept of CSE
Page 7
 NODEJS Lab

For the above application create authorized end points using JWT (JSON Web Token).
11. Create a react application for the student management system having
registration, login, contact, about pages and implement routing to navigate
through these pages.
12. Create a service in react that fetches the weather information from
openweathermap.org and the display the current and historical weather
information using graphical representation usingchart.js
13. Create a TODO application in react with necessary components and deploy it

into github.

Course Outcomes:
At the end of the course, the student will be able to,
 Build a custom website with HTML, CSS, and Bootstrap and little JavaScript.
 Demonstrate Advanced features of JavaScript and learn about JDBC
 Develop Server – side implementation using Java technologies like
 Develop the server – side implementation using Node JS.
 Design a Single Page Application using React.

Reference Books:
1. Jon Duckett, Beginning HTML, XHTML, CSS, and JavaScript, Wrox Publications, 2010
2. Bryan Basham, Kathy Sierra and Bert Bates, Head First Servlets and JSP,
O’Reilly Media, 2ndEdition, 2008.
3. Vasan Subramanian, Pro MERN Stack, Full Stack Web App Development
with Mongo, Express, React, and Node, 2nd Edition, A Press.

Dept of CSE
Page 8
 NODEJS Lab

1.Build a responsive web application for shopping cart with registration, login,
catalog and cart pages using CSS3 features, flex and grid.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Home - FBS</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tr>
<th width="20%"><img src="fbs.png" alt="FBS LOGO" width="130"
height="100"/></th>
<th colspan=4>
<h1 style="color:white;">FBS - WORLD BEST ONLINE EBOOKS
WEBSITE</h1>
</th>
</tr>
</table>
</header>
<nav>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tbody align="center" style="font-weight:bold;font-size:18px;"">
<tr>
<td width="20%"><hr><a href="index.html">Home</a><hr></td>
<td width="20%"><hr><a href="login.html">Login</a><hr></td>
<td width="20%"><hr><a href="registration.html">Registration</a><hr></td>
<td width="20%"><hr><a href="cart.html" >Cart</a><hr></td>
</tr>
</tbody>
</table>
</nav>
</div>
<div class="container1">

Dept of CSE
Page 9
 NODEJS Lab

<div class="sidebar1"></div>
<div class="container2">
<main>
<center>
<h2>Welcome to FBS e-Book's Website</h2>
<p>Shopping at <font size=5>FBS</font> can be both <font
size=5>fun</font>
and <font size=5>savings</font>.</br>Shop with us in this special <font
size=5>discount</font> season and save upto <font size=5>90%</font> on all
your
purchases.</br></p>
<br/><br/><br/><br/><br/><br/><br/><br/>
</main>
</div>
<div class="sidebar2"></div>
</div>
<footer><font color="white">(C) 2024 All rights reserved by FBS
ebooks</font></footer>
</div>
</body>
</html>

login.html

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Login - FBS</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tr>
<th width="20%"><img src="fbs.png" alt="FBS LOGO" width="130"
height="100"/></th>
<th colspan=4>

Dept of CSE
Page 10
 NODEJS Lab

<h1 style="color:white;">FBS - WORLD BEST ONLINE EBOOKS

WEBSITE</h1>
</th>
</tr>
</table>
</header>
<nav>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tbody align="center" style="font-weight:bold;font-size:18px;"">
<tr>
<td width="20%"><hr><a href="index.html">Home</a><hr></td>
<td width="20%"><hr><a href="login.html">Login</a><hr></td>
<td width="20%"><hr><a href="registration.html">Registration</a><hr></td>
<td width="20%"><hr><a href="cart.html" >Cart</a><hr></td>
</tr>
</tbody>
</table>
</nav>
</div>
<div class="container1">
<div class="sidebar1"></div>
<div class="container2">
<main>
<center><br>
<h3> Login Details</h3> <br/>
<form name="f1">
<table width="100%" align="center" >
<tr>
<td> User Name : </td>
<td> <input type="text" name="username"></td>
</tr>
<tr><td><br></td></tr>
<tr>
<td> Password : </td>
<td> <input type="password" name="password"></td>
</tr>
<tr><td><br></td></tr>
<tr><td></td>
<td><input type="submit" value="SUBMIT">
<input type="reset" value="RESET"></td>
</tr>
</table>
</form>
</center>
</main>

Dept of CSE
Page 11
 NODEJS Lab

</div>
<div class="sidebar2"></div>
</div>
<footer><font color="white">(C) 2024 All rights reserved by FBS
ebooks</font></footer>
</div>
</body>
</html>

registration.html

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Registration - FBS</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tr>
<th width="20%"><img src="fbs.png" alt="FBS LOGO" width="130"
height="100"/></th>
<th colspan=4>
<h1 style="color:white;">FBS - WORLD BEST ONLINE EBOOKS
WEBSITE</h1>
</th>
</tr>
</table>
</header>
<nav>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tbody align="center" style="font-weight:bold;font-size:18px;"">
<tr>
<td width="20%"><hr><a href="index.html">Home</a><hr></td>
<td width="20%"><hr><a href="login.html">Login</a><hr></td>
<td width="20%"><hr><a href="registration.html">Registration</a><hr></td>

Dept of CSE
Page 12
 NODEJS Lab

<td width="20%"><hr><a href="cart.html" >Cart</a><hr></td>

</tr>
</tbody>
</table>
</nav>
</div>
<div class="container1">
<div class="sidebar1"></div>
<div class="container2">
<main>
<center><br>
<h3>Registration Form </h3>
<br/>
<form name="f1">
<table cellpadding="1" align="center" >
<tr><td> Name:*</td>
<td><input type="text" name="username"></td></tr>
<tr><td>Password:*</td>
<td><input type="password" name="password"></td></tr>
<tr><td>Email ID:*</td>
<td><input type="text" name="email"></td></tr>
<tr><td>Phone Number:*</td>
<td><input type="text" name="phno"></td></tr>
<tr><td valign="top">Gender:*</td>
<td><input type="radio" name="radio" value="1">Male &nbsp;&nbsp;
<input type="radio" name="radio" value="2">Female</td></tr>
<tr> <td valign="top">Language Known:*</td>
<td> <input type="checkbox" name="checkbox"
value="English">English<br/>
<input type="checkbox" name="checkbox" value="Telugu">Telugu<br>
<input type="checkbox" name="checkbox" value="Hindi">Hindi<br>
<input type="checkbox" name="checkbox" value="Tamil">Tamil
</td></tr>
<tr> <td valign="top">Address:*</td>
<td><textarea name="address"></textarea></td>
<tr><td></td><td><input type="submit" value="submit" hspace="10">
<input type="reset" value="reset"></td></tr>
<tr> <td colspan=2 >*<font color="#FF0000">fields are mandatory</font>
</td>
</tr>
</table>
</form>
</center>
</main>
</div>

Dept of CSE
Page 13
 NODEJS Lab

<div class="sidebar2"></div>
</div>
<footer><font color="white">(C) 2024 All rights reserved by FBS
ebooks</font></footer>
</div>
</body>
</html>

cart.html

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Cart - FBS</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tr>
<th width="20%"><img src="fbs.png" alt="FBS LOGO" width="130"
height="100"/></th>
<th colspan=4>
<h1 style="color:white;">FBS - WORLD BEST ONLINE EBOOKS
WEBSITE</h1>
</th>
</tr>
</table>
</header>
<nav>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tbody align="center" style="font-weight:bold;font-size:18px;"">
<tr>
<td width="20%"><hr><a href="index.html">Home</a><hr></td>
<td width="20%"><hr><a href="login.html">Login</a><hr></td>
<td width="20%"><hr><a href="registration.html">Registration</a><hr></td>
<td width="20%"><hr><a href="cart.html" >Cart</a><hr></td>

Dept of CSE
Page 14
 NODEJS Lab

</tr>
</tbody>
</table>
</nav>
</div>
<div class="container1">
<div class="sidebar1"></div>
<div class="container2">
<main>
<center>
<h3>Cart</h3>
<table width="100%" align="center" >
<tbody>
<tr>
<th width="40%"><hr>BookName<hr></th>
<th width="20%"><hr>Price<hr></th>
<th width="20%"><hr>Quantity<hr></th>
<th width="20%"><hr>Amount<hr></th> </tr>
</tbody>
<tbody align=center>
<tr> <td>Java Programming </td>
<td>Rs. 2300/-</td>
<td>2</td>
<td>Rs. 4600/-</td></tr>
<tr><td>Web Technologies</td>
<td>Rs. 3000/-</td>
<td>1</td>
<td>Rs. 3000/-</td></tr>
<tr><td></td>
<td><hr><font color="#996600">Total Amount:</font><hr></td>
<td><hr>3<hr></td>
<td><hr>Rs. 7600/-<hr></td> </tr>
</tbody>
</table>
</center>
</main>
</div>
<div class="sidebar2"></div>
</div>
<footer><font color="white">(C) 2024 All rights reserved by FBS
ebooks</font></footer>
</div>
</body>
</html>

Dept of CSE
Page 15
 NODEJS Lab

style.css

body{
font-family: monospace;
}

main {
background-color: #efefef;
color: #330000;
margin-left: 10px;
height: 60vh;
}

header, footer {
background-color: #000d57;
color: #fff;
padding: 1rem;
height: 50px;
}

header, nav{
margin-bottom: 10px;
flex-basis: 50%;
}

footer{
margin-top: 10px;
}
nav {
background-color: #fff;
color: #000;
padding: 1rem;
height: 20px;
}

.sidebar1, .sidebar2 {
flex-basis: 10%;
background-color: #fff;
color: #000;
}

Dept of CSE
Page 16
 NODEJS Lab

.sidebar2{
margin-left: 10px;
}

.container1{
display: flex;
}

.container2 {
display: flex;
flex-direction: column;
flex: 1;
}

header, nav, main, .sidebar1, .sidebar2, footer{

display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
}

.wrapper {
display: flex;
flex-direction: column;
font-weight: 600;
}

Output :

Dept of CSE
Page 17
NODEJS Lab

Dept of CSE
Page 18
NODEJS Lab

Dept of CSE
Page 19
 NODEJS Lab

3.Use JavaScript for doing client – side validation of the pages implemented in the
experiment

registrationJS.html

<html>
<head>
<title> Welcome to NNRG e-Book's website</title>
<script language="javascript">
function validate() {
// username validation
var uname = f1.username.value;
if (uname.length<=0)
{
alert("Please Enter UserName");
f1.username.focus();

Dept of CSE
Page 20
 NODEJS Lab

return false;
}
if (uname.length < 8)
{
alert("Please enter UserName not less than 8");
f1.username.focus();
return false;
}
//password validation
var pwd = f1.password.value;
if (pwd.length<=0)
{
alert("Please Enter password");
f1.password.focus();
return false;
}
if (pwd.length < 6)
{
alert("Please enter Password not less than 6");
f1.password.focus();
return false;
}
// email validation
var email = f1.email.value;
if (email.length<=0)
{
alert("Please Enter email");
f1.email.focus();
return false;
}
else {
let eflag=false;
for(i=0;i<email.length;i++) {
if(email.charAt(i)=="@")
{
eflag=true;
}
}
if(!(eflag))
{
alert("Please enter a valid Email ID");
f1.email.focus();
return false;
}
}

Dept of CSE
Page 21
 NODEJS Lab

// phone number validation

var phno = f1.phno.value;
if (phno.length<=0)
{
alert("Please Enter Phone Number");
f1.phno.focus();
return false;
}
if (isNaN(phno))
{
alert("Please Enter Valid Phone Number");
f1.phno.focus();
return false;
}
if (phno.length != 10)
{
alert("Please Enter Valid Phone Number");
f1.phno.focus();
return false;
}
// gender validation
let flag=false;
for(i=0;i<f1.gen.length;i++)
if(f1.gen[i].checked)
flag=true;
if(!(flag))
{
alert("Please choose a Gender");
return false;
}
// Language validation
flag=false;
for(i=0;i<f1.lang.length;i++)
if(f1.lang[i].checked)
flag=true;
if(!(flag))
{
alert("Please select at least one of the Language options.");
return false;
}
// address validation
var addr = f1.address.value;
if (addr.length<=0)
{
alert("Please Enter address");

Dept of CSE
Page 22
 NODEJS Lab

f1.address.focus();
return false;
}
// to display Success message
alert("Registration Successful");
}
</script>
</head>
<body>
<center><br>
<h3>Registration Form </h3>
<br/>
<form name="f1">
<table cellpadding="1" align="center" >
<tr><td> User Name:*</td>
<td><input type="text" name="username"></td></tr>
<tr><td>Password:*</td>
<td><input type="password" name="password"></td></tr>
<tr><td>Email ID:*</td>
<td><input type="text" name="email"></td></tr>
<tr><td>Phone Number:*</td>
<td><input type="text" name="phno"></td></tr>
<tr><td valign="top">Gender:*</td>
<td><input type="radio" name="gen" value="Male">Male &nbsp;&nbsp;
<input type="radio" name="gen" value="Female">Female</td></tr>
<tr> <td valign="top">Language Known:*</td>
<td> <input type="checkbox" name="lang" value="English">English<br/>
<input type="checkbox" name="lang" value="Telugu">Telugu<br>
<input type="checkbox" name="lang" value="Hindi">Hindi<br>
<input type="checkbox" name="lang" value="Tamil">Tamil
</td></tr>
<tr> <td valign="top">Address:*</td>
<td><textarea name="address"></textarea></td>
<tr><td></td><td><input type="button" value="SUBMIT" hspace="10"
onclick="validate()">
<input type="reset" value="RESET"></td></tr>
<tr> <td colspan=2 >*<font color="#FF0000">fields are mandatory</font>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>

Dept of CSE
Page 23
 NODEJS Lab

Output :

Dept of CSE
Page 24
NODEJS Lab

Dept of CSE
Page 25
 NODEJS Lab

4. Explore the features of ES6 like arrow functions, callbacks, promises, async/await.
Implement an application for reading the weather information from openweathermap.org and
display the information in the form of a graph on the web page.

First, install the required npm packages:

npm install express axios

npm install express --save

Create a file named server.js for the backend:

server.js

// server.js
constexpress = require('express');
constaxios = require('axios');

constapp = express();
constport = 3000;

app.use(express.static('public'));

app.get('/weather/:city', async (req, res) => {

const{ city } = req.params;

try {
constapiKey = 'c97c0c1086d42990e89d64d76f50bb61';
constresponse = awaitaxios.get(`https://api.openweathermap.org/data/2.5/weather?q=$
{city}&appid=${apiKey}`);
consttemperature = response.data.main.temp;
res.json({ temperature });
} catch (error) {
console.error('Error fetching weather data:', error);
res.status(500).json({ error:'Internal Server Error' });
}
});

app.listen(port, () => {
console.log(`Server listening at http://localhost:${port}`);
});

Dept of CSE
Page 26
 NODEJS Lab

Create a folder named public and create an index.html file for the frontend:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="./style.css">
<title>Home - FBS</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tr>
<th width="20%"><img src="fbs.png" alt="FBS LOGO" width="130"
height="100"/></th>
<th colspan=4>
<h1 style="color:white;">FBS - WORLD BEST ONLINE EBOOKS
WEBSITE</h1>
</th>
</tr>
</table>
</header>
<nav>
<table width="100%" align="center" cellpadding="0" cellspacing="2">
<tbody align="center" style="font-weight:bold;font-size:18px;"">
<tr>
<td width="20%"><hr><a href="index.html">Home</a><hr></td>
<td width="20%"><hr><a href="login.html">Login</a><hr></td>
<td width="20%"><hr><a href="registration.html">Registration</a><hr></td>
<td width="20%"><hr><a href="cart.html" >Cart</a><hr></td>
</tr>
</tbody>
</table>
</nav>
</div>
<div class="container1">
<div class="sidebar1"></div>
<div class="container2">
<main>
<center>
<h2>Welcome to FBS e-Book's Website</h2>

Dept of CSE
Page 27
 NODEJS Lab

<p>Shopping at <font size=5>FBS</font> can be both <font

size=5>fun</font>
and <font size=5>savings</font>.</br>Shop with us in this special <font
size=5>discount</font> season and save upto <font size=5>90%</font> on all
your
purchases.</br></p>
<br/><br/><br/><br/><br/><br/><br/><br/>
</main>
</div>
<div class="sidebar2"></div>
</div>
<footer><font color="white">(C) 2024 All rights reserved by FBS
ebooks</font></footer>
</div>
</body>
</html>

Now, you can run your Node.js server:

node server.js

Output :

☛ Locate API key

Dept of CSE
Page 28
 NODEJS Lab

Initially It look Like:

Then, by entering the city then click update chart then

Dept of CSE
Page 29
 NODEJS Lab

5. Develop a java stand alone application that connects with the database (Oracle / mySql)
and perform the CRUD operation on the database tables.

I will provide you with the MySQL code for creating the student table and make some
changes to your Java code to improve it:

MySQL Code:

sql> CREATE TABLE IF NOT EXISTS student ( s_id INT PRIMARY KEY,
s_nameVARCHAR(255), s_addressVARCHAR(255) );
This SQL code creates a table with three columns: s_id for student ID (primary key), s_name
for student name, and s_address for student address.

Java Code

InsertData.java

import java.sql.*;
import java.util.Scanner;

public class InsertData {

public static void main(String[] args) {
try (Connection con = DriverManager.getConnection("jdbc:mysql://localhost/mydb",
"root", "");
Statements = con.createStatement()) {

Scanner sc = new Scanner(System.in);

System.out.println("Inserting Data into student table:");
System.out.println("________________________________________");

System.out.print("Enter student id: ");

int sid = sc.nextInt();
System.out.print("Enter student name: ");
String sname = sc.next();
System.out.print("Enter student address: ");
String saddr = sc.next();

String insertQuery = "INSERT INTO student VALUES(" + sid + ",'" + sname + "','" +
saddr + "')";
s.executeUpdate(insertQuery);

System.out.println("Data inserted successfully into student table");

Dept of CSE
Page 30
 NODEJS Lab

} catch (SQLException err) {

System.out.println("ERROR: " + err);
}
}
}

Output :

Inserting Data into student table:

________________________________________
Enter student id: 101
Enter student name: John Doe
Enter student address: 123 Main Street
Data inserted successfully into student table

UpdateData.java

import java.sql.*;
import java.util.Scanner;

public class UpdateData {

public static void main(String[] args) {
try (Connection con = DriverManager.getConnection("jdbc:mysql://localhost/mydb",
"root", "");
Statements = con.createStatement()) {

Scanner sc = new Scanner(System.in);

System.out.println("Update Data in student table:");
System.out.println("________________________________________");

System.out.print("Enter student id: ");

int sid = sc.nextInt();
System.out.print("Enter student name: ");
String sname = sc.next();
System.out.print("Enter student address: ");
String saddr = sc.next();

Dept of CSE
Page 31
 NODEJS Lab

String updateQuery = "UPDATE student SET s_name='" + sname + "', s_address='" +

saddr + "' WHERE s_id=" + sid;
s.executeUpdate(updateQuery);

System.out.println("Data updated successfully");

} catch (SQLException err) {

System.out.println("ERROR: " + err);
}
}
}

Output :

Update Data in student table:

________________________________________
Enter student id: 101
Enter student name: Jane Doe
Enter student address: 456 Broad Street
Data updated successfully

DeleteData.java

import java.sql.*;
import java.util.Scanner;

public class DeleteData {

public static void main(String[] args) {
try (Connection con = DriverManager.getConnection("jdbc:mysql://localhost/mydb",
"root", "");
Statements = con.createStatement()) {

Scanner sc = new Scanner(System.in);

System.out.println("Delete Data from student table:");
System.out.println("________________________________________");

System.out.print("Enter student id: ");

int sid = sc.nextInt();

Dept of CSE
Page 32
 NODEJS Lab

String deleteQuery = "DELETE FROM student WHERE s_id=" + sid;

s.executeUpdate(deleteQuery);

System.out.println("Data deleted successfully");

} catch (SQLException err) {

System.out.println("ERROR: " + err);
}
}
}

Output :

Delete Data from student table:

______________________________________
Enter student id: 101
Data deleted successfully

DisplayData.java

import java.sql.*;

public class DisplayData {

public static void main(String[] args) {
try (Connection con = DriverManager.getConnection("jdbc:mysql://localhost/mydb",
"root", "");
Statement s = con.createStatement()) {

ResultSet rs = s.executeQuery("SELECT * FROM student");

if (rs != null) {
System.out.println("SID \t STU_NAME \t ADDRESS");
System.out.println("________________________________________");

while (rs.next()) {
System.out.println(rs.getString("s_id") + " \t " + rs.getString("s_name") + " \t " +
rs.getString("s_address"));
System.out.println("________________________________________");
}
}

Dept of CSE
Page 33
 NODEJS Lab

} catch (SQLException err) {

System.out.println("ERROR: " + err);
}
}
}

Output :

SID STU_NAME ADDRESS

________________________________________
102 Alice Smith 789 Oak Avenue
________________________________________
103 Bob Johnson 567 Pine Road

6. Create an xml for the bookstore. Validate the same using both DTD and XSD.

Solution :

☛ XML data to validate:

bookstore.xml

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE bookstore[
<!ELEMENT bookstore (book+)>
<!ELEMENT book (title, author, price)>
<!ELEMENT title (#PCDATA)>
<!ELEMENT author (#PCDATA)>
<!ELEMENT price (#PCDATA)>
]>
<bookstore>
<book>
<title>Introduction to XML</title>
<author>John Doe</author>
<price>29.99</price>
</book>
<book>
<title>Programming with XML</title>

Dept of CSE
Page 34
 NODEJS Lab

<author>Jane Smith</author>
<price>39.99</price>
</book>
</bookstore>

XML schema (XSD) data:

bookstore.xsd

<?xml version="1.0" encoding="UTF-8"?>

<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema"
targetNamespace="http://example.com"
xmlns="http://example.com">
<xs:element name="root">
<xs:complexType>
<xs:sequence>
<xs:element name="bookstore" type="bookstoreType"/>
</xs:sequence>
</xs:complexType>
</xs:element>

<xs:complexType name="bookstoreType">
<xs:sequence>
<xs:element name="book" type="bookType" minOccurs="0" maxOccurs="unbounded"/>
</xs:sequence>
</xs:complexType>
<xs:complexType name="bookType">
<xs:sequence>
<xs:element name="title" type="xs:string"/>
<xs:element name="author" type="xs:string"/>
<xs:element name="price" type="xs:decimal"/>
</xs:sequence>
</xs:complexType>
</xs:schema>

To Check the Validity :

1. Go to the below link,

https://www.liquid-technologies.com/online-xsd-validator
2. Place the XML code in the XML Validate.
3. Place the XSD code in the XML Schema Data.

Dept of CSE
Page 35
 NODEJS Lab

4. Then click the validate Button.

5. Then it will show the Document as Valid.

Output :

9. Create a custom server using http module and explore the other modules of Node JS
like OS, path, event.

Solution :

☛ Open Terminal or Command Prompt:

Open a terminal or command prompt in the directory where you saved your server.js file.

☛ Run the Server Script:

Execute the server script using the Node.js runtime. In the terminal, run:

Dept of CSE
Page 36
 NODEJS Lab

node server.js

This will start the HTTP server, and you should see the message "Server running at
http://127.0.0.1:3000/".

☛ Access the Server:

Open your web browser and navigate to http://127.0.0.1:3000/ or http://localhost:3000/. You

should see the response "Hello, World!".

☛ Check OS Information:

In the same terminal where your server is running, you'll see information about your
operating system (OS) type, platform, architecture, CPU cores, etc.

☛ Check Current Working Directory:

The current working directory of the script is printed in the terminal.

☛ Check Joined Path:

The joined path using the path module is printed in the terminal.

☛ Check Custom Event:

The script emits a custom event and listens for it. In the terminal, you should see the message
"Custom Event Triggered: { message: 'Hello from custom event!' }".

☛ Stop the Server:

To stop the server, press Ctrl+C in the terminal where the server is running.

server.js

// Step 1: Import required modules

const http = require('http');
const os = require('os');
const path = require('path');
const { EventEmitter } = require('events');

// Step 2: Create an instance of EventEmitter

const eventEmitter = new EventEmitter();

Dept of CSE
Page 37
 NODEJS Lab

// Step 3: Create a simple HTTP server

const server = http.createServer((req, res) => {
res.writeHead(200, { 'Content-Type':'text/plain' });
res.end('Hello, World!\n');
});

// Step 4: Define server port and hostname

constport = 3000;
consthostname = '127.0.0.1';

// Step 5: Listen for requests on the specified port and hostname

server.listen(port, hostname, () => {
console.log('Server running at http://${hostname}:${port}/');
});

// Step 6: Print OS information

console.log('OS Type:', os.type());
console.log('OS Platform:', os.platform());
console.log('OS Architecture:', os.arch());
console.log('CPU Cores:', os.cpus().length);

// Step 7: Print current working directory

console.log('Current Working Directory:', process.cwd());

// Step 8: Join paths using the path module

const joinedPath = path.join(__dirname, 'public', 'images');
console.log('Joined Path:', joinedPath);

// Step 9: Handle a custom event

eventEmitter.on('customEvent', (data) => {
console.log('Custom Event Triggered:', data);
});

// Step 10: Emit a custom event

eventEmitter.emit('customEvent', { message:'Hello from custom event!' });

Output :

In the Terminal:

Dept of CSE
Page 38
 NODEJS Lab

In the Browser:

Link: http://127.0.0.1:3000/

10. Develop an express web application that can interact with REST API to perform CRUD
operations on student data. (Use Postman)

 Firstly we need to create a new folder and open the folder in the command prompt and
enter a command as below:

 npminit -y


 Open that folder in the vscode by entering code.

 Next in the terminal we need to install all the packages we need, so we mainly use
express and sqlite3.
 The Command to install express and sqlite3 is

Dept of CSE
Page 39
 NODEJS Lab

 npm install express sqlite3



Then create file named as the app.js and db.js

db.js

const sqlite3 = require('sqlite3').verbose();

// Function to initialize the database schema

function initializeDatabase() {
const db = new sqlite3.Database('./mydatabase.db', (err) => {
if (err) {
console.error(err.message);
} else {
console.log('Connected to the SQLite database.');
createStudentsTable(db);
}
});

// Close the database connection when the Node process exits

process.on('exit', () => {
db.close((err) => {
if (err) {
console.error(err.message);
} else {
console.log('Disconnected from the SQLite database.');
}
});
});
}
// Function to create the 'students' table if it doesn't exist
function createStudentsTable(db) {
const createTableQuery = `
CREATE TABLE IF NOT EXISTS students (
id INTEGER PRIMARY KEY AUTOINCREMENT,
name TEXT,
age INTEGER,
grade TEXT
);
`;

db.run(createTableQuery, (err) => {

if (err) {

Dept of CSE
Page 40
 NODEJS Lab

console.error(err.message);
} else {
console.log('The students table has been created or already exists.');
}
});
}

module.exports = { initializeDatabase };

when we execute both the db.js then the database will be created that is mydatabase.db

app.js

const express = require('express');

const sqlite3 = require('sqlite3');
const{ initializeDatabase } = require('./db');
const app = express();
const port = 3000;

// Connect to SQLite database

const db = new sqlite3.Database('./mydatabase.db', (err) => {
if (err) {
console.log(err.message);
} else {
console.log('Connected to the SQLite database.');
}
});

// Middleware to parse request body as JSON

app.use(express.json());

app.get('/', (req, res) => {

res.send('Welcome to the Student');
});

// Get all Students

app.get('/students', (req, res) => {
db.all('SELECT * FROM students', [], (err, rows) => {
if (err) {
return console.error(err.message);
}

Dept of CSE
Page 41
 NODEJS Lab

res.json(rows);
});
});

// Get a single student by id

app.get('/students/:id', (req, res) => {
const id = req.params.id;
db.all('SELECT * FROM students WHERE id = ?', [id], (err, row) => {
if (err) {
return console.error(err.message);
}
res.json(row);
});
});

// Create a new student

app.post('/students', (req, res) => {
const{ name, age, grade } = req.body;
db.run('INSERT INTO students (name, age, grade) VALUES (?, ?, ?)', [name, age, grade],
function (err) {
if (err) {
return console.error(err.message);
}
res.status(201).json({ id:this.lastID });
});
});

// Update a student
app.put('/students/:id', (req, res) => {
const id = req.params.id;
const{ name, age, grade } = req.body;
db.run('UPDATE students SET name = ?, age = ?, grade = ? WHERE id = ?', [name, age,
grade, id], function (err) {
if (err) {
return console.error(err.message);
}
res.json({ updatedID:id });
});
});

// Delete a student
app.delete('/students/:id', (req, res) => {
const id = req.params.id;
db.run('DELETE FROM students WHERE id = ?', id, function (err) {
if (err) {

Dept of CSE
Page 42
 NODEJS Lab

return console.error(err.message);
}
res.json({ deletedID:id });
});
});

app.listen(port, () => {
console.log('Server running at http://localhost:${port}');
});

Output :

GET:

 Open Postman.
 Set the request type to GET.
 Enter the URL: http://localhost:3000/students.

POST : Create a New Student

 Open Postman.

Dept of CSE
Page 43
 NODEJS Lab

 Set the request type to POST.

 Enter the URL: http://localhost:3000/students.
 Go to the "Body" tab.
 Select raw and set the body to JSON format.

GET: #all Students

 Set the request type to GET.

 Enter the URL: http://localhost:3000/students.
 Click on the "Send" button
 You should receive a response with details of all students in your SQLite database.

Dept of CSE
Page 44
 NODEJS Lab

DELETE:

 Set the request type to DELETE.

 Enter the URL for the student you want to delete (replace: id with an actual student
ID): http://localhost:3000/students/:id
 Place instead of ID which replace with number that is ID to be deleted.
 Then click send

Dept of CSE
Page 45
 NODEJS Lab

PUT:

 Set the request type to PUT.

 Enter the URL for the student you want to delete (replace: id with an actual student
ID): http://localhost:3000/students/:id
 Go to the "Body" tab.
 Select raw and set the body to JSON format

Dept of CSE
Page 46
 NODEJS Lab

13. Create a service in react that fetches the weather information from open weathermap.org
and the display the current and historical weather information using graphical representation
using chart.js

Step 1: Create an OpenWeatherMap Account and Generate API Key

 Visit the OpenWeatherMap website (https://openweathermap.org/) and click on "Sign

Up" or "Log In" to create an account or log into your existing account.
 Once logged in, navigate to your account dashboard.
 From the dashboard, locate my API Keys section and click on "Create Key" or "API
Keys" to generate a new API key.
 Provide a name for your API key (e.g., "WeatherApp") and click on the "Generate"
or "Create" button.
 Your API key will be generated and displayed on the screen. Make sure to copy it as
we will need it later.
Locate API key

Dept of CSE
Page 47
 NODEJS Lab

Step 2: Set up a new React project

 Open your terminal or command prompt.

 Run the following command to create a new React project:

npxcreate-react-app weather-app

 Once the project is created, navigate into the project directory:

cd weather-app

Step 3: Install required packages

In the project directory, install the necessary packages by executing the following command

npm install axios

Dept of CSE
Page 48
 NODEJS Lab

We will use the Axios library to make HTTP requests to the OpenWeatherMap API.

Step 4: Create a Weather component

 Inside the "src" directory, create a new file called "Weather.js" and open it in your
code editor.
 Add the following code to define a functional component named Weather:

import React, { useEffect, useState } from 'react';

import axios from 'axios';

const Weather = () => {

const [city, setCity] = useState('');
const [weatherData, setWeatherData] = useState(null);

const fetchData = async () => {

try {
const apiKey = 'c97c0c1086d42990e89d64d76f50bb61'; // Replace with your
OpenWeatherMap API key
const response = await axios.get(
'https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=$
{apiKey}'
);
setWeatherData(response.data);
console.log(response.data); //You can see all the weather data in console log
} catch (error) {
console.error(error);
}
};

useEffect(() => {
fetchData();
}, []);

const handleInputChange = (e) => {

setCity(e.target.value);
};

const handleSubmit = (e) => {

e.preventDefault();
fetchData();

Dept of CSE
Page 49
 NODEJS Lab

};

return (
<div>
<form onSubmit={handleSubmit}>
<input
type="text"
placeholder="Enter city name"
value={city}
onChange={handleInputChange}
/>
<button type="submit">Get Weather</button>
</form>
{weatherData ? (
<>
<h2>{weatherData.name}</h2>
<p>Temperature: {weatherData.main.temp} C</p>
<p>Description: {weatherData.weather[0].description}</p>
<p>Feels like : {weatherData.main.feels_like} C</p>
<p>Humidity : {weatherData.main.humidity}%</p>
<p>Pressure : {weatherData.main.pressure}</p>
<p>Wind Speed : {weatherData.wind.speed}m/s</p>
</>
):(
<p>Loading weather data...</p>
)}
</div>
);
};

export default Weather;

Replace {YOUR_API_KEY} in the API URL with the API key you generated from
OpenWeatherMap.

Step 5: Connect the Weather component to your app.

 Open the "App.js" file in the "src" directory.

 Replace the existing code with the following code:

import React from'react';

import Weather from'./Weather';

Dept of CSE
Page 50
 NODEJS Lab

const App = () => {

return (
<div>
<h1>Weather Forecast App</h1>
<Weather />
</div>
);
};

exportdefault App;
Your output should look like this:

Output :

Initial Screen

Dept of CSE
Page 51
 NODEJS Lab

After Supply the City name

14. Create a TODO application in react with necessary components and deploy it into github.

Step 1: Set Up the Project

Our first task is to set up the React project. This step involves creating the necessary project
structure. Here's how you can do it:

1. Create a React App:

Open your terminal and navigate to your preferred directory. Run the following command to
generate a new React app. Replace "todo-app" with your desired project name:

npx create-react-app todo-app

Dept of CSE
Page 52
 NODEJS Lab

This command will create a directory named "todo-app" with all the initial code required for
a React app.

2. Navigate to the Project Directory:

Change your working directory to the "todo-app" folder:

cd todo-app

3. Start the Development Server:

Launch the development server with the following command:

npm start

This will open your React app, and you�ll see the default React starter page in your web
browser at 'http://localhost:3000'.

Step 2: Create the App Component

In this step, we create the App component, which serves as the entry point to our Todo List
application.

import React from'react';

import TodoList from'./components/TodoList';
function App() {
return (
<div className="App">
<TodoList />
</div>
);
}
exportdefault App;

Step 3: Create the TodoList

Dept of CSE
Page 53
 NODEJS Lab

src->Component

Now, let's create the 'TodoList' component, which is responsible for managing the list of
tasks and handling task-related functionality.

import React, { useState } from 'react';

import TodoItem from './TodoItem';

function TodoList() {
const [tasks, setTasks] = useState([
{
id: 1,
text: 'Doctor Appointment',
completed: true
},
{
id: 2,
text: 'Meeting at School',
completed: false
}
]);

const [text, setText] = useState('');

function addTask(text) {
const newTask = {
id: Date.now(),
text,
completed: false
};
setTasks([tasks, newTask]);
setText('');
}
function deleteTask(id) {
setTasks(tasks.filter(task => task.id !== id));
}
function toggleCompleted(id) {
setTasks(tasks.map(task => {
if (task.id === id) {
return {task, completed: !task.completed};
} else {
return task;
}
}));
}
return (

Dept of CSE
Page 54
 NODEJS Lab

<div className="todo-list">
{tasks.map(task => (
<TodoItem
key={task.id}
task={task}
deleteTask={deleteTask}
toggleCompleted={toggleCompleted}
/>
))}
<input
value={text}
onChange={e => setText(e.target.value)}
/>
<button onClick={() => addTask(text)}>Add</button>
</div>
);
}
exportdefault TodoList;

Step 4: Create the place the TodoItem in

src->Component

In this step, we create the 'TodoItem' component, which represents an individual task in our
Todo List.

import React from'react';

function TodoItem({ task, deleteTask, toggleCompleted }) {
function handleChange() {
toggleCompleted(task.id);
}

return (
<div className="todo-item">
<input
type="checkbox"
checked={task.completed}
onChange={handleChange}
/>
<p>{task.text}</p>
<button onClick={() => deleteTask(task.id)}>
X
</button>
</div>

Dept of CSE
Page 55
 NODEJS Lab

);
}
exportdefault TodoItem;
These three components, 'App', 'TodoList', and 'TodoItem', work together to create a
functional Todo List application in React. The 'TodoList' component manages the state of the
tasks, and the 'TodoItem' component represents and handles individual tasks within the list.

Step 5: Styling

To enhance the visual appeal of your Todo List, you can apply some basic styling. Here �s
an example of how you can style the todo items. In the `App.css` file, add the following
styles:

.todo-item {
display: flex;
justify-content: space-between;
margin-bottom: 8px;
}
.todo-itemp {
color: #888;
text-decoration: line-through;
}
Your output should look like this:

Output :

Initially it looks like:

Dept of CSE
Page 56
 NODEJS Lab

Next,

2. Make the above application in bootstrap framework

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Dept of CSE
Page 57
 NODEJS Lab

<title>FBS - World Best Online eBooks Website</title>

<!-- Bootstrap CSS -->

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/
bootstrap.min.css" rel="stylesheet">

<link rel="stylesheet" href="./style.css">

<style>

body {

font-family: monospace;

header,

footer {

background-color: #000d57;

color: white;

padding: 1rem;

footer {

margin-top: 10px;

.main-content {

background-color: #efefef;

color: #330000;

Dept of CSE
Page 58
 NODEJS Lab

padding: 20px;

.sidebar {

background-color: #fff;

padding: 10px;

</style>

</head>

<body>

<!-- Wrapper -->

<div class="wrapper">

<!-- Header -->

<header>

<div class="container d-flex justify-content-between align-items-center">

<img src="fbs.png" alt="FBS LOGO" width="130" height="100" />

<h1 class="text-white">FBS - WORLD BEST ONLINE EBOOKS

WEBSITE</h1>

</div>

</header>

<!-- Navigation -->

Dept of CSE
Page 59
 NODEJS Lab

<nav class="bg-light">

<div class="container">

<ul class="nav justify-content-center">

<li class="nav-item">

<a class="nav-link active" href="#home-section">Home</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#login-section">Login</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#registration-section">Registration</a>

</li>

<li class="nav-item">

<a class="nav-link" href="#cart-section">Cart</a>

</li>

</ul>

</div>

</nav>

<!-- Home Section -->

<div id="home-section" class="main-content">

<div class="container text-center">

<h2>Welcome to FBS e-Book's Website</h2>

Dept of CSE
Page 60
 NODEJS Lab

<p>Shopping at <strong>FBS</strong> can be both <strong>fun</strong> and

<strong>savings</strong>.</p>

<p>Shop with us in this special <strong>discount</strong> season and save up to

<strong>90%</strong> on all your purchases.</p>

</div>

</div>

<!-- Login Section -->

<div id="login-section" class="main-content">

<div class="container">

<h3 class="text-center">Login Details</h3>

<form>

<div class="mb-3">

<label for="username" class="form-label">User Name</label>

<input type="text" class="form-control" id="username" required>

</div>

<div class="mb-3">

<label for="password" class="form-label">Password</label>

<input type="password" class="form-control" id="password" required>

</div>

<div class="d-flex justify-content-center">

<button type="submit" class="btn btn-primary me-3">Submit</button>

<button type="reset" class="btn btn-secondary">Reset</button>

</div>

Dept of CSE
Page 61
 NODEJS Lab

</form>

</div>

</div>

<!-- Registration Section -->

<div id="registration-section" class="main-content">

<div class="container">

<h3 class="text-center">Registration Form</h3>

<form>

<div class="mb-3">

<label for="reg-username" class="form-label">Name</label>

<input type="text" class="form-control" id="reg-username" required>

</div>

<div class="mb-3">

<label for="reg-password" class="form-label">Password</label>

<input type="password" class="form-control" id="reg-password" required>

</div>

<div class="mb-3">

<label for="reg-email" class="form-label">Email ID</label>

<input type="email" class="form-control" id="reg-email" required>

</div>

<div class="mb-3">

<label for="reg-phno" class="form-label">Phone Number</label>

Dept of CSE
Page 62
NODEJS Lab

<input type="text" class="form-control" id="reg-phno" required>

</div>

<div class="mb-3">

<label class="form-label">Gender</label><br>

<input type="radio" name="gender" value="male" id="male"> Male

<input type="radio" name="gender" value="female" id="female"> Female

</div>

<div class="mb-3">

<label class="form-label">Language Known</label><br>

<input type="checkbox" name="language" value="English"> English<br>

<input type="checkbox" name="language" value="Telugu"> Telugu<br>

<input type="checkbox" name="language" value="Hindi"> Hindi<br>

<input type="checkbox" name="language" value="Tamil"> Tamil

</div>

<div class="mb-3">

<label for="reg-address" class="form-label">Address</label>

<textarea class="form-control" id="reg-address" required></textarea>

</div>

<div class="d-flex justify-content-center">

<button type="submit" class="btn btn-primary me-3">Submit</button>

<button type="reset" class="btn btn-secondary">Reset</button>

</div>

<p class="text-danger mt-2">* Fields are mandatory</p>

Dept of CSE
Page 63
 NODEJS Lab

</form>

</div>

</div>

<!-- Cart Section -->

<div id="cart-section" class="main-content">

<div class="container">

<h3 class="text-center">Cart</h3>

<table class="table table-bordered">

<thead>

<tr>

<th>Book Name</th>

<th>Price</th>

<th>Quantity</th>

<th>Amount</th>

</tr>

</thead>

<tbody>

<tr>

<td>Java Programming</td>

<td>Rs. 2300/-</td>

<td>2</td>

<td>Rs. 4600/-</td>

Dept of CSE
Page 64
 NODEJS Lab

</tr>

<tr>

<td>Web Technologies</td>

<td>Rs. 3000/-</td>

<td>1</td>

<td>Rs. 3000/-</td>

</tr>

<tr>

<td colspan="3" class="text-right"><strong>Total Amount:</strong></td>

<td><strong>Rs. 7600/-</strong></td>

</tr>

</tbody>

</table>

</div>

</div>

<!-- Footer -->

<footer class="text-center">

<p class="text-white">(C) 2024 All rights reserved by FBS ebooks</p>

</footer>

</div>

Dept of CSE
Page 65
 NODEJS Lab

<!-- Bootstrap JS and Dependencies -->

<script
src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>

<script
src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>

</body>

</html>

Dept of CSE
Page 66
 NODEJS Lab

Output:

Dept of CSE
Page 67