Write in
NodeJS Record
1. Build a responsive web application for shopping cart with
registration, login, catalog and cart pages using CSS3 features, flex
and grid.
AIM: Build a responsive web application for shopping cart with registration,
login, catalog and cart pages using CSS3 features, flex and grid.
DESCRIPTION: HTML, CSS, and JavaScript are essential components for
creating a functional responsive web application. A condensed example of a
shopping cart with registration, login, catalogue, and cart pages is provided.
Project Structure:
1. [Link] - Main HTML file containing the structure of the web
application.
2. [Link] – This file contains about registration details
3. [Link] – This file contains about login details
4. [Link] - This file contains about cart details
5. [Link] - CSS file for styling the web pages.
6. images/ - Folder for storing images.
1. [Link]
<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="[Link]">
<title>Home - BOOKISH</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<img src="[Link]" alt="BOOKISH LOGO" width="120" height="90" />
<h1 style="color:white;">BOOKISH - BEST ONLINE EBOOK STORE READ &
EXPLORE</h1>
</header>
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">Login</a>
<a href="[Link]">Registration</a>
<a href="[Link]" >Cart</a>
</nav>
</div>
<div class="container1">
<div class="sidebar1"></div>
<div class="container2">
<main>
<center>
<h2>Welcome to Bookish e-Book Website</h2>
<p>Shopping at <font size=5>BOOKISH</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">© 2024 All rights reserved by Bookish ebooks</font>
</footer>
</div>
</body>
</html>
2. [Link]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
<title>Registration - Bookish</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<img src="[Link]" alt="BOOKISH LOGO" width="120" height="90"/>
<h1 style="color:white;">BOOKISH - BEST ONLINE EBOOK STORE READ &
EXPLORE</h1>
</header>
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">Login</a>
<a href="[Link]">Registration</a>
<a href="[Link]" >Cart</a>
</nav>
</div>
<div class="container1">
<div class="sidebar1"></div>
<div class="container2">
<main>
<center><br>
<h1>Registration Form </h1>
<br/>
<form>
<table cellpadding="1" align="center" style="font-size:15px;">
<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>Gender:*</td>
<td><input type="radio" name="radio" value="1">Male
<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>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="red">fields are mandatory</font>
</td>
</tr>
</table>
</form>
</center>
</main>
</div>
<div class="sidebar2">
</div>
</div>
<footer>
<font color="white">© 2024 All rights reserved by Bookish ebooks</font>
</footer>
</div>
</body>
</html>
3. [Link]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="[Link]">
<title>Login - Bookish</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<img src="[Link]" alt="BOOKISH LOGO" width="120" height="90"/>
<h1 style="color:white;">BOOKISH - BEST ONLINE EBOOK STORE READ &
EXPLORE</h1>
</header>
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">Login</a>
<a href="[Link]">Registration</a>
<a href="[Link]" >Cart</a>
</nav>
<div class="container1">
<div class="sidebar1"></div>
<div class="container2">
<main>
<center><br>
<h1> Login Details</h1> <br/>
<form>
<table width="100%" align="center" style="font-size:15px;">
<tr>
<td font> 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">© 2024 All rights reserved by Bookish ebooks</font>
</footer>
</div>
</body>
</html>
4. [Link]
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./[Link]">
<title>Cart - Bookish</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<header>
<img src="[Link]" alt="BOOKISH LOGO" width="120" height="90"/>
<h1 style="color:white;">BOOKISH - BEST ONLINE EBOOK STORE READ &
EXPLORE</h1>
</header>
<nav>
<a href="[Link]">Home</a>
<a href="[Link]">Login</a>
<a href="[Link]">Registration</a>
<a href="[Link]" >Cart</a>
</nav>
</div>
<div class="container1">
<div class="sidebar1"></div>
<div class="container2">
<main>
<center>
<h1>Cart</h1>
<table border=2px height=250 width=300 align="center" style="font-size:15px;" >
<tbody align="center">
<tr>
<th>BookName</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
<tr>
<td>Python Programming</td>
<td>Rs. 3500/-</td>
<td>2</td>
<td>Rs. 7000/-</td>
</tr>
<tr>
<td>NodeJS</td>
<td>Rs. 3000/-</td>
<td>1</td>
<td>Rs. 3000/-</td>
</tr>
<tr>
<td colspan="3" align="center">
<font color="brown">Total Amount:</font></td>
<td>Rs. 7600/-</td>
</tr>
</tbody>
</table>
</center>
</main>
</div>
<div class="sidebar2"></div>
</div>
<footer>
<font color="white">© 2024 All rights reserved by Bookish ebooks</font>
</footer>
</div>
</body>
</html>
5. [Link]
body {
font-family: monospace;
}
main {
background-color: LightGray;
color: maroon;
margin-left: 10px;
height: 60vh;
}
header, footer {
background-color: midnightblue;
color: White;
padding: 1rem;
height: 50px;
}
header, nav {
margin-bottom: 10px;
flex-basis: 50%;
}
footer {
margin-top: 10px;
font-size: 15px;
}
nav {
background-color: White;
color: Black;
padding: 1rem;
height: 20px;
display: flex;
gap: 120px;
padding: 20px;
font-size: 23px;
}
.sidebar1, .sidebar2 {
flex-basis: 10%;
background-color: White;
color: Black;
}
.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;
}