Scribd
Upload
15 views8 pages

Database

The document outlines a project for developing a responsive web application for a shopping cart using technologies like HTML, CSS, JavaScript, and Node.js. It includes features such as user registration, login, product catalog browsing, and cart management, with a focus on utilizing CSS3 functionalities and layout systems like flexbox and grid. The project consists of various HTML pages and JavaScript files to manage user interactions and application logic.

Uploaded by

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

Database

The document outlines a project for developing a responsive web application for a shopping cart using technologies like HTML, CSS, JavaScript, and Node.js. It includes features such as user registration, login, product catalog browsing, and cart management, with a focus on utilizing CSS3 functionalities and layout systems like flexbox and grid. The project consists of various HTML pages and JavaScript files to manage user interactions and application logic.

Uploaded by

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

‭NODE JS/ REACT JS/ DJANGO‬

‭B. Tech. II Year II Sem‬


‭(Information technology and Artificial Intelligence & Data Science)‬
‭1.‬ B
‭ uild‬ ‭a‬ ‭responsive‬ ‭web‬ ‭application‬ ‭for‬ ‭shopping‬ ‭cart‬ ‭with‬ ‭registration,‬ ‭login,‬ ‭catalog‬ ‭and‬
‭cart pages using CSS3 features, flex and grid.‬
‭ his‬ ‭project‬ ‭can‬ ‭be‬ ‭approached‬ ‭in‬ ‭two‬ ‭distinct‬ ‭ways:‬ ‭one‬ ‭utilizing‬ ‭traditional‬ ‭web‬
T
‭technologies‬‭-‬‭HTML,‬‭CSS,‬‭and‬‭JavaScript,‬‭and‬‭the‬‭other‬‭leveraging‬‭Node.js‬‭to‬‭create‬‭a‬‭single-page‬
‭application.‬ ‭Each‬ ‭approach‬ ‭offers‬‭its‬‭unique‬‭advantages‬‭and‬‭challenges,‬‭catering‬‭to‬‭different‬‭project‬
‭requirements and developer preferences.‬
‭Objective 1:‬
‭ evelop‬ ‭a‬ ‭responsive‬ ‭web‬ ‭application‬ ‭for‬ ‭a‬ ‭shopping‬ ‭cart‬‭featuring‬‭registration,‬‭login,‬‭catalog,‬‭and‬
D
‭cart pages, leveraging CSS3 functionalities, flexbox, and grid layout.‬
‭Description:‬
‭ he‬ ‭project‬ ‭entails‬ ‭utilizing‬ ‭HTML,‬‭CSS,‬‭and‬‭JavaScript‬‭to‬‭construct‬‭a‬‭responsive‬‭web‬‭application.‬
T
‭Specifically,‬ ‭it‬ ‭involves‬ ‭creating‬ ‭a‬ ‭shopping‬‭cart‬‭platform‬‭with‬‭essential‬‭functionalities‬‭such‬‭as‬‭user‬
‭registration,‬ ‭login,‬ ‭product‬ ‭catalog‬ ‭browsing,‬ ‭and‬ ‭managing‬ ‭cart‬ ‭contents.‬ ‭This‬ ‭will‬ ‭be‬ ‭achieved‬
‭through‬‭the‬‭integration‬‭of‬‭modern‬‭CSS3‬‭features‬‭along‬‭with‬‭the‬‭flexible‬‭layout‬‭capabilities‬‭provided‬
‭by flexbox and grid systems.‬
‭Project Components:‬

I‭ ndex.html,‬ ‭cart.html,‬ ‭login.html,‬


‭Structural elements of the web application.‬
‭registration.html‬
‭style.css‬ ‭Visual presentation and styling of the web pages.‬
‭catalog.js, cart.js‬ ‭Managing user interactions & logic implementation .‬

‭Requirements:‬
‭Program editor (Notepad, Notepad++, Netbeans), Browser (Chrome, Firefox)‬
‭Program:‬
‭Common content in every‬‭.html‬‭file‬
‭!‬
< DOCTYPE html‬
‭ >‬
‭
<html‬‭
‭ lang‬
=‬
‭"en"‬
‭ >‬
‭
<head>‬
‭
<meta‬‭
‭ charset‬=‬
‭ "UTF-8"‬
‭ >‬
‭
<meta‬‭
‭ name‬=‬
‭"viewport"‬‭
‭ content‬=‬
‭"width=device-width,‬‭
‭ initial-scale=1.0"‬
>‬
‭
<title>‬
‭ Shopping Cart‬
‭ </title>‬
‭
<link‬‭
‭ rel‬
=‬
‭ "stylesheet"‬‭
‭ href‬
=‬
‭"style.css"‬
‭ >‬
‭
‭/head>‬
<
<body>‬
‭
<header>‬
‭
<h1>‬
‭ Welcome to My Store‬
‭ </h1>‬
‭
<nav>‬
‭
<ul>‬
‭
<li><a‬‭
‭ href‬
=‬
‭"index.html"‬
‭ >‬
‭ Home‬
‭ </a></li>‬
‭
<li><a‬‭
‭ href‬
=‬
‭"register.html"‬
‭ >‬
‭Register‬
‭ </a></li>‬
‭
<li><a‬‭
‭ href‬
=‬
‭"login.html"‬
‭ >‬
‭ Login‬
‭ </a></li>‬
‭
<li><a‬‭
‭ href‬
=‬
‭"catalog.html"‬
‭ >‭
‭B
‬rowse Catalog‬</a></li>‬
‭
</ul>‬
‭
</nav>‬
‭
</header>‬
‭

<main>‬
‭
Change Content according to page‬
‭
</main>‬
‭

‭/body>‬
<
</html>‬
‭

‭Note:‬‭write above code in all html pages and change‬‭<main>‬‭section according to page requirement.‬
‭Index.html‬
<main>‬
‭
<h3>‬
‭ Objective:‬
‭ </h3>‬
‭
<p>‬
‭
Develop‬ ‭
‭ a‬ ‭
responsive‬ ‭ web‬ ‭
application‬ ‭ for‬ ‭
a‬ ‭shopping‬ ‭ cart‬ ‭ featuring‬
registration,‬ ‭
‭ login,‬ ‭ catalog,‬ ‭and‬ ‭
cart‬ ‭pages,‬ ‭
leveraging‬ ‭CSS3‬ ‭functionalities,‬
flexbox, and grid layout.‬
‭
</p>‬
‭
<h3>‬
‭ Description:‬
‭ </h3>‬
‭
<p>‬
‭
The‬ ‭
‭ project‬ ‭entails‬ ‭utilizing‬ ‭ HTML,‬ ‭
CSS,‬ ‭
and‬ ‭JavaScript‬ ‭ to‬ ‭construct‬ ‭
a‬
responsive‬ ‭
‭ web‬ ‭
application.‬ ‭ Specifically,‬ ‭it‬ ‭
involves‬ ‭creating‬ ‭ a‬ ‭
shopping‬ ‭cart‬
platform‬‭
‭ with‬‭
essential‬‭ functionalities‬‭ such‬‭
as‬‭user‬‭registration,‬‭ login,‬‭ product‬
catalog‬ ‭
‭ browsing,‬ ‭ and‬ ‭
managing‬ ‭
cart‬ ‭contents.‬ ‭
This‬ ‭
will‬ ‭be‬ ‭
achieved‬ ‭ through‬ ‭
the‬
integration‬ ‭
‭ of‬ ‭
modern‬ ‭CSS3‬ ‭
features‬ ‭along‬ ‭
with‬ ‭
the‬ ‭
flexible‬ ‭ layout‬ ‭capabilities‬
provided by flexbox and grid systems.‬
‭
</p>‬
‭
</main>‬
‭

‭login.html‬
<main>‬
‭
<h2>‬
‭ Login Page‬
‭ </h2>‬
‭
<form‬‭
‭ action‬=‬
‭"#"‬
‭ >‬
‭
<label‬‭
‭ for‬
=‬
‭"username"‬
‭ >‬
‭Username:‬
‭ </label>‬
‭
<input‬‭
‭ type‬=‬
‭ "text"‬‭
‭ id‬=‬
‭"username"‬‭
‭ name‬
=‬
‭ "username"‬
‭ >‬
‭
<label‬‭
‭ for‬
=‬
‭ "password"‬
‭ >‬
‭ Password:‬
‭ </label>‬
‭
<input‬‭
‭ type‬=‬
‭ "password"‬‭
‭ id‬=‬
‭"password"‬‭
‭ name‬=‬
‭"password"‬
‭ >‬
‭
<input‬‭
‭ type‬=‬
‭ "submit"‬‭
‭ id‬
=‬
‭"Login"‬‭
‭ name‬
=‬
‭"Login"‬‭
‭ value‬
=‭
‭"
‬Login"‬
/>‬
‭
</form>‬
‭
</main>‬
‭

‭register.html‬
<main>‬
‭
<h2>‬
‭ Register‬
‭ </h2>‬
‭
<form‬‭
‭ action‬
=‬
‭"#"‬
‭ >‬ ‭
‭ <label‬‭ for‬=‬
‭"username"‬
‭ >‭
‭U
‬sername:‬</label>‬
‭
<input‬‭
‭ type‬
=‬
‭ "text"‬‭
‭ id‬=‬
‭"username"‬‭
‭ name‬=‬
‭"username"‬
‭ >‬
‭
<label‬‭
‭ for‬
=‬
‭"email"‬
‭ >‬
‭Email:‬
‭ </label>‬
‭
<input‬‭
‭ type‬
=‬
‭ "email"‬‭
‭ id‬
=‭
‭"‬email"‬‭name‬
=‬
‭"email"‬
‭ >‬
‭
<label‬‭
‭ for‬
=‬
‭"password"‬
‭ >‬
‭Password:‬
‭ </label>‬
‭
<input‬‭
‭ type‬
=‬
‭ "password"‬‭
‭ id‬=‬
‭"password"‬‭
‭ name‬=‬
‭"password"‬
‭ >‬
‭
<input‬‭
‭ type‬
=‬
‭ "submit"‬‭
‭ id‬
=‬
‭ "Register"‬‭
‭ name‬=‬
‭"Register"‬‭
‭ value‬
=‬
‭ "Register"‬
‭ />‬
‭
</form>‬
‭
</main>‬
‭

‭catalog.html‬
<main>‬
‭
<h2>‬
‭ Product Catalog‬
‭ </h2>‬
‭
<div‬‭
‭ class‬=‭
‭"
‬product-grid"‬ >‬
‭
<article‬‭
‭ class‬=‭
‭"
‬product"‬>‬
‭
<img‬‭
‭ src‬=‬
‭"html5.jpeg"‬‭
‭ alt‬ =‬
‭"HTML 5 Notes"‬
‭ >‬
‭
<h3>‬
‭ HTML 5 Notes‬
‭ </h3>‬
‭
<p>&#8377‬‭
‭ 20.00‬
</p>‬
‭
<button‬
‭ data-product-id‬
‭ =‬
‭"1"‬
‭ class‬
‭ =‭
‭"‬add-to-cart"‬
onclick‬
‭ =‭
‭"
‬goToCart(this)"‬ >‬
‭Add to Cart‬
‭ </button>‬
‭
</article>‬
‭
<article‬‭
‭ class‬=‭
‭"
‬product"‬>‬
‭
<img‬‭
‭ src‬=‬
‭"CSS.jpeg"‬‭
‭ alt‬=‬
‭"CSS Notes"‬
‭ >‬
‭
<h3>‬
‭ CSS Notes‬
‭ </h3>‬
‭
<p>&#8377‬‭
‭ 15.00‬
</p>‬
‭
<button‬
‭ data-product-id‬
‭ =‬
‭"2"‬
‭ class‬
‭ =‭
‭"‬add-to-cart"‬
onclick‬
‭ =‭
‭"
‬goToCart(this)"‬ >‬
‭Add to Cart‬
‭ </button>‬
‭
</article>‬
‭
<article‬‭
‭ class‬=‭
‭"
‬product"‬>‬
‭
<img‬‭
‭ src‬=‬
‭"NodeJs.jpeg"‬‭
‭ alt‬=‬
‭ "Node Js Notes"‬
‭ >‬
‭
<h3>‬
‭ Node JS Notes‬
‭ </h3>‬
‭
<p>&#8377‬‭
‭ 40.00‬
</p>‬
‭
<button‬
‭ data-product-id‬
‭ =‬
‭"3"‬
‭ class‬
‭ =‭
‭"‬add-to-cart"‬
onclick‬
‭ =‭
‭"
‬goToCart(this)"‬ >‬
‭Add to Cart‬
‭ </button>‬
‭
</article>‬
‭
</div>‬
‭
</main>‬
‭
<script‬‭
‭ src‬
=‬
‭"catalog.js"‬
‭ ></script>‬
‭

‭cart.html‬
<main>‬
‭
<h2>‬
‭ Shopping Cart‬
‭ </h2>‬
‭
<div‬‭
‭ id‬
=‬
‭ "cart-items"‬
‭ >‬
‭
<!-- Cart items will be displayed here dynamically‬‭
‭ -->‬
</div>‬
‭
</main>‬
‭
<script‬‭
‭ src‬
=‬
‭ "cart.js"‬
‭ ></script>‬
‭

‭style.css‬
/* General Styles */‬
‭
body‬‭
‭ {‬
font-family‬
‭ : sans-serif;‬
‭
margin‬
‭ : 0;‬
‭
padding‬
‭ : 0;‬
‭
}‬
‭
header‬‭
‭ {‬
background-color‬
‭ : #f0f0f0;‬
‭
padding‬
‭ : 10px;‬
‭
text-align‬
‭ : center;‬
‭
}‬
‭
main‬‭
‭ {‬
padding‬
‭ : 20px;‬
‭
}‬
‭
h2‬
‭ {‭
‭t
‬ext-align‬:center;}‬
‭

‭* Menu Styles */‬


/
nav ul‬‭
‭ {‬
list-style-type‬
‭ : none;‬
‭
margin‬
‭ : 0;‬
‭
padding‬
‭ : 0;‬
‭
display‬
‭ : flex;‬
‭
/* justify-content: space-between; */‬
‭
}‬
‭

nav ul li‬‭
‭ {‬
margin-right‬
‭ : 20px;‬
‭
padding‬
‭ :10px 20px;‬
‭
background-color‬
‭ :#4CAF50;‬
‭
border-radius‬
‭ : 4px;‬
‭
}‬
‭

nav ul li‬
‭ :‬
‭last-child‬‭
‭ {‬
margin-right‬
‭ : 0;‬
‭
}‬
‭

nav ul li a‬‭
‭ {‬
text-decoration‬
‭ : none;‬
‭
color‬
‭ :#fff;‬
‭
padding‬
‭ :20px;‬
‭
cursor‬
‭ : pointer;‬
‭
}‬
‭

nav ul li a‬
‭ :‬
‭hover‬
‭ {‬
‭color‬
‭ :#000;}‬
‭

‭* Media query for small screens */‬


/
@‭
‭m
‬edia only screen and (max-width: 768px)‬‭
{‬
nav ul‬‭
‭ {‬
flex-direction‬
‭ : column;‬
‭
}‬
‭
nav ul li‬‭
‭ {‬
margin-right‬
‭ : 0;‬
‭
margin-bottom‬
‭ : 10px;‬
‭
}‬
‭
}‬
‭

‭*Form Styles*/‬
/
form‬
‭ {‬
‭
display‬
‭ : flex;‬
‭
flex-direction‬
‭ : column;‬
‭
align-items‬
‭ : center;‬
‭
}‬
‭

input‬‭
‭ {‬
margin-top‬
‭ : 5px;‬
‭
margin-bottom‬
‭ : 10px;‬
‭
}‬
‭

‭* Catalog Styles */‬


/
.‭
‭p
‬roduct-grid‬‭
{‬
display‬
‭ : grid;‬
‭
grid-template-columns‬
‭ : repeat(auto-fit, minmax(200px,‬‭
‭ 1fr));‬
grid-gap‬
‭ : 20px;‬
‭
padding‬
‭ : 20px;‬
‭
}‬
‭

.‭
‭p
‬roduct‬‭
{‬
background-color‬
‭ : #fff;‬
‭
padding‬
‭ : 10px;‬
‭
text-align‬
‭ : center;‬
‭
border-radius‬
‭ : 5px;‬
‭
}‬
‭

.‭
‭p
‬roduct‬‭
img‬‭{‬
width‬
‭ : 100%;‬
‭
object-fit‬
‭ : cover;‬
‭
}‬
‭

‭‭
.p
‬roduct‬‭
button‬
{‬
‭
background-color‬
‭ : #4CAF50;‬
‭
border‬
‭ : none;‬
‭
color‬
‭ : white;‬
‭
padding‬
‭ : 10px 20px;‬
‭
text-align‬
‭ : center;‬
‭
text-decoration‬
‭ : none;‬
‭
display‬
‭ : inline-block;‬
‭
font-size‬
‭ : 16px;‬
‭
margin‬
‭ : 4px 2px;‬
‭
cursor‬
‭ : pointer;‬
‭
border-radius‬
‭ : 4px;‬
‭
}‬
‭

.‭
‭p
‬roduct‬‭
button‬
:‬
‭hover‬‭
‭ {‬‭
background-color‬
: #45a049;}‬
‭

‭* Cart Styles */‬


/
.‭
‭c
‬art-items‬‭
{‬
display‬
‭ : flex;‬
‭
flex-wrap‬
‭ : wrap;‬
‭
gap‬
‭ : 20px;‬
‭
}‬
‭

‭catalog.js‬
// Redirect from catalog to cart‬
‭
function‬‭
‭ goToCart‬
(‬
‭ button‬
‭ )‬‭
‭ {‬
const‬‭
‭ productId‬‭=‬‭
button‬.‭
‭g
‬etAttribute‬
(‬
‭ 'data-product-id'‬
‭ );‬
‭
// Redirect to the cart page with the selected‬‭
‭ product ID‬
window‬
‭ .‬
‭location‬
‭ .‬
‭href‬‭
‭ =‬‭̀cart.html?product=${productId}`‬;‬
‭
}‬
‭

‭cart.js‬
‭/ Call addToCart function when the page loads‬
/
document‬
‭ .‭
‭a
‬ddEventListener‬
(‬
‭'DOMContentLoaded'‬
‭ ,‬‭
‭ function‬
()‬‭
‭ {‬
addToCart‬
‭ ();‬
‭
});‬
‭

function‬‭
‭ addToCart‬
()‬‭
‭ {‬
// Parse the query string from the URL‬
‭
const‬‭
‭ queryString‬‭
=‬‭
window‬
.‬
‭location‬
‭ .‭
‭s‬earch‬
;‬
‭
const‬‭
‭ urlParams‬‭
=‬‭
new‬‭
URLSearchParams‬(‬
‭queryString‬
‭ );‬
‭

‭/ Get the value of the 'product' parameter‬


/
const‬‭
‭ productId‬‭
=‬‭
urlParams‬
.‬
‭get‬
‭ (‬
‭'product'‬
‭ );‬
‭

‭/ Call the addToCart function with the extracted‬‭


/ product ID‬
addToCartWithProductId‬
‭ (‬
‭productId‬
‭ );‬
‭
}‬
‭

function‬‭
‭ addToCartWithProductId‬
(‬
‭ productId‬
‭ )‬‭
‭ {‬
const‬‭
‭ products‬‭
=‬‭
[‬
{‬‭
‭ id‬
:‬‭
‭ 1‬
,‬‭
‭ src‬
:‬
‭'html5.jpeg'‬
‭ ,‬‭
‭ name‬
:‬‭
‭ 'HTML 5 Notes'‬
,‬‭
‭ price‬:‬‭
‭ 20.00‬‭},‬
{‬‭
‭ id‬
:‬‭
‭ 2‬
,‬‭
‭ src‬
:‬
‭'CSS.jpeg'‬
‭ ,‬‭
‭ name‬
:‬‭
‭ 'CSS Notes'‬
,‬‭
‭ price‬
:‬‭
‭ 15.00‬‭},‬
{‬‭
‭ id‬
:‬‭
‭ 3‬
,‬‭
‭ src‬
:‬
‭'NodeJs.jpeg'‬
‭ ,‬‭
‭ name‬
:‬‭
‭ 'Node JS‬‭
Notes'‬
,‬‭
‭ price‬:‬‭
‭ 40.00‬‭}‬
];‬
‭
// Find the product with the given ID‬
‭
const‬‭
‭ selectedProduct‬‭
=‬‭
products‬.‬
‭find‬
‭ (‬
‭product‬‭
‭ =>‬‭
product‬
.‭
‭i‬d‬‭
==‬‭productId‬
);‬
‭

‭/ Display the selected product in the cart‬


/
displayCartItems‬
‭ ([‬
‭ selectedProduct‬
‭ ]);‬
‭
}‬
‭

function‬‭
‭ displayCartItems‬
(‬
‭items‬
‭ )‬‭
‭ {‬
const‬‭
‭ cartItemsDiv‬‭
=‬‭
document‬.‬
‭getElementById‬
‭ (‬
‭'cart-items'‬
‭ );‬
‭
cartItemsDiv‬
‭ .‬
‭innerHTML‬‭
‭ =‬‭
''‬
;‬‭
‭ // Clear existing‬‭
content‬

items‬
‭ .‬
‭forEach‬
‭ (‬
‭item‬‭
‭ =>‬‭
{‬
const‬‭
‭ itemDiv‬‭ =‬‭
document‬.‬
‭createElement‬
‭ (‬
‭'div'‬
‭ );‬
‭
itemDiv‬
‭ .‬
‭classList‬
‭ .‬
‭add‬
‭ (‬
‭'cart-item'‬
‭ );‬
‭
itemDiv‬
‭ .‬
‭innerHTML‬‭
‭ =‬‭̀<img src="${item.src}"/>‬
<h3>${item.name}</h3>‬
‭
<p>&#8377; ${item.price.toFixed(2)}</p>`‬
‭ ;‬
‭
cartItemsDiv‬
‭ .‬
‭appendChild‬
‭ (‬
‭itemDiv‬
‭ );‬
‭
});‬
‭
}‬
‭

‭Outputs‬

You might also like