Study Glance
💻
B.TECH • SKILL DEVELOPMENT COURSE

Node JS / React JS / Django Lab

Web Development Laboratory • Experiment 1

💻 Node JS ⚛️ React JS 🌐 Web Development 🧪 Lab Program
Experiment 01

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

← All Lab Programs
EXP-01

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 :

image
image
image
image

Related Node JS / React JS / Django Lab Programs

01 Build a responsive web application for shopping cart with registration, login, catalog and cart pages using CSS3 features, flex and grid. Current
02 Make the above web application responsive web application using Bootstrap framework. View Solution →
03 Use JavaScript for doing client-side validation of the pages implemented in experiment 1 and experiment 2. View Solution →
04 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. View Solution →
05 Develop a Java stand alone application that connects with the database (Oracle / MySQL) and perform the CRUD operation on the database tables. View Solution →
06 Create an XML for the bookstore. Validate the same using both DTD and XSD. View Solution →
07 Design a controller with servlet that provides the interaction with application developed in experiment 1 and the database created in experiment 5. View Solution →
08 Maintaining the transactional history of any user is very important. Explore the various session tracking mechanism (Cookies, HTTP Session). View Solution →
09 Create a custom server using http module and explore the other modules of Node JS like OS, path, event. View Solution →
10 Develop an Express web application that can interact with REST API to perform CRUD operations on student data. (Use Postman) View Solution →
11 For the above application create authorized end points using JWT (JSON Web Token). View Solution →
12 Create a React application for the student management system having registration, login, contact, about pages and implement routing to navigate through these pages. View Solution →
13 Create a service in React that fetches the weather information from openweathermap.org and display the current and historical weather information using graphical representation using Chart.js. View Solution →
14 Create a To-Do application in React with necessary components and deploy it into GitHub. View Solution →
← Back to Lab Programs 📚 All Lab Manuals
```