Scribd
Upload
23 views15 pages

Skill Development Course IoT II II Sem Lab

Uploaded by

janakireddy444
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
23 views15 pages

Skill Development Course IoT II II Sem Lab

Uploaded by

janakireddy444
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

Skill Development Course - NodeJs Lab Manual - (LAB

PROGRAMS)

Skill Development Course - NodeJs Lab Programs


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

2) Use JavaScript for doing client – side validation of the pages implemented in the experiment
3) 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.
4) Develop a java stand alone application that connects with the database (Oracle / mySql) and
perform the CRUD operation on the database tables.
5) Create an xml for the bookstore. Validate the same using both DTD and XSD.
6) Create a custom server using http module and explore the other modules of Node JS like OS,
path, event.
7) Develop an express web application that can interact with REST API to perform CRUD operations
on student data. (Use Postman)
8) 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

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

Aim:

☛ Build a responsive web application for shopping cart with


registration, login, catalog and cart pages using CSS3 features, flex and
grid.

Solution :

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>
<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>
<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>
</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>
<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>
<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>
</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>

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;
}

.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 :

You might also like