Experiment 1

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

Aim:

To implement a responsive web application for a shopping cart with registration, login, catalog, and cart
pages using CSS3 features, Flexbox, and Grid.

Objective:

To create a shopping cart web application with registration, login, catalog and cart.

To get responsiveness across various devices using CSS3 features, Flexbox, and Grid.

Procedure:

Step 1:
Create a folder and open in VS code.

Step 2:

Create a catalog.html, catalog.js, cart.html , cart.js, login.html, login.js , register.html, register.js and
style.css.

Step 3:

Write all the relevant codes and click on live server or open it in browser by copying path.

Step 4:

Open the console page by clicking on inspect for errors.

Code Snippet:

Catalog.html:

<div class="header">

//code related to header section

</div>

<div class="catalog-page" id="catalog">

<div class="individual-products">

<img src="/images/tab.jpg" alt="" class="prd-img">

<div class="product-info">

<h3>Tab</h3>
 <p> ₹ 66970 </p>

<p class="description">Electronics</p>

<button class="cart-btn" onclick="add_to_cart('1',

'/images/tab.jpg',

'Tab',

'66970 '

)">Add to cart</button>

</div>

</div>

//repeat all the individual products

</div>

<div class="footer">

@ 2024 Shopping Cart All rights reserved

</div>

Catolog.js:

et cartList = JSON.parse(localStorage.getItem("data")) || []

function add_to_cart(id,img,name,price) {

cartList.push(

id:id,

img:img,

name:name,

price:price

)
 localStorage.setItem("data",JSON.stringify(cartList))

console.log(cartList)

alert(`${name} added to cart`)

Cart.html:

<div class="header">

//code related to header section

</div>

<div class="cart-page">

<div id="cart-items"></div>

<div><h3 id="total-price" >Total Price:0</h3></div>

</div>

<div class="footer">

@ 2024 Shopping Cart All rights reserved

</div>

Cart.js:

let cartList = JSON.parse(localStorage.getItem("data")) || []

let cartContainer = document.getElementById("cart-items")

function generatecartItems() {

if(cartList.length !== 0) {

cartContainer.innerHTML = cartList.map((element)=> {

let {id,img,name,price}= element

return `

<div class="cart-ind-products">

<p>${name}</p>
 <img src="${img}" alt="" class="cart-img"/>

<p>₹${price}</p>

<button onclick="remove_button('${id}')" class="cart-btn" > Remove</button>

</div>

})

else {

cartContainer.innerHTML=` <h3>Shopping cart is empty</h3>`

generatecartItems()

function total_price () {

let total_amount = 0

for(let each of cartList) {

total_amount = total_amount + parseInt(each.price)

document.getElementById("total-price").innerHTML = ` <h4> Total Price: ${total_amount} </h4> `

total_price()

function remove_button(id) {

for(let ind in cartList) {

if(cartList[ind].id==id) {

cartList.splice(ind,1)

}
 }

localStorage.setItem("data",JSON.stringify(cartList))

generatecartItems()

total_price()

login.html:

<form class="login-form">

<input type="text" id="username" placeholder="Username" required>

<input type="password" id="password" placeholder="Password" required>

<button class="login-button" type="submit" onclick="form_data(event)" >Login</button>

<p id="login-info"></p>

<div class="reg-details">

<p>New User? <a href="register.html" >Click here to register</a></p>

</div>

</form>

login.js:

function form_data (event) {

event.preventDefault()

let name = document.getElementById("username").value

let password = document.getElementById("password").value

if(name=="Arun" && password=="123") {

window.location.href = "catalog.html"

else {

document.getElementById("login-info").innerText="Password Mismatch"

}
}

register.html:

<form class="register-form">

<input type="text" id="name" placeholder="Name" />

<input type="email" name="" id="email" placeholder="email" />

<input type="password" id="password" placeholder="password" />

<input type="password" id="re-password" placeholder="Re-Password" />

<input type="number" id="number" placeholder="Number" />

<input type="number" id="age" placeholder="Age" />

<button type="submit" onclick="register_page(event)" class="reg-button">Register</button>

</form>

register.js:

function register_page(event) {

event.preventDefault()

window.location.href="login.html"

style.css:

.header {

background-color: blue;

color: white;

padding: 8px;

height: 50px;

display: flex;

justify-content: space-between;

align-items: center;

}
.login-form {

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

.footer {

background-color: blue;

color: white;

font-size: 20px;

display: flex;

justify-content: center;

align-items: center;

position: fixed;

height: 30px;

left: 0;

bottom: 0

width: 100%;

Conclusion:

successfully built a responsive web application for a shopping cart using CSS3 features, Flexbox, and Grid
in VS Code.