0% found this document useful (0 votes)
69 views7 pages

Experiment 1 Record Format

Uploaded by

23ag1a6651
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
0% found this document useful (0 votes)
69 views7 pages

Experiment 1 Record Format

Uploaded by

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

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.

You might also like