Experiment 1 Record Format
Experiment 1 Record Format
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:
Code Snippet:
Catalog.html:
<div class="header">
</div>
<div class="individual-products">
<div class="product-info">
<h3>Tab</h3>
<p> ₹ 66970 </p>
<p class="description">Electronics</p>
'/images/tab.jpg',
'Tab',
'66970 '
)">Add to cart</button>
</div>
</div>
</div>
<div class="footer">
</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)
Cart.html:
<div class="header">
</div>
<div class="cart-page">
<div id="cart-items"></div>
</div>
<div class="footer">
</div>
Cart.js:
function generatecartItems() {
if(cartList.length !== 0) {
cartContainer.innerHTML = cartList.map((element)=> {
return `
<div class="cart-ind-products">
<p>${name}</p>
<img src="${img}" alt="" class="cart-img"/>
<p>₹${price}</p>
</div>
})
else {
generatecartItems()
function total_price () {
let total_amount = 0
total_price()
function remove_button(id) {
if(cartList[ind].id==id) {
cartList.splice(ind,1)
}
}
localStorage.setItem("data",JSON.stringify(cartList))
generatecartItems()
total_price()
login.html:
<form class="login-form">
<p id="login-info"></p>
<div class="reg-details">
</div>
</form>
login.js:
event.preventDefault()
window.location.href = "catalog.html"
else {
document.getElementById("login-info").innerText="Password Mismatch"
}
}
register.html:
<form class="register-form">
</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.