In this tutorial, you'll learn how to make Shopping Cart using HTML CSS and JavaScript. Complete this JavaScript project to practice your HTML CSS and JavaScript.
Download Source Code:https://drive.google.comSource Code
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SaampleKart</title>
</head>
<!-- css file -->
<link rel="stylesheet" href="/site.css">
<!-- font awesome icon -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<body>
<nav>
<div class="nav-responsive">
<img src="/images/phone-icon3.png" alt="image" class="logo" id="logo">
<div class="nav-search">
<a href="">
<i class="fa fa-search" id="find">
</i>
</a>
<input type="text" id="search" placeholder="Search your items, brands">
</div>
<div class="access">
<a href="#" id="notification"><i class="fa fa-bell"></i></a>
<a href="#" id="cart"><i class="fa fa-shopping-cart"></i></a>
<a href="#" id="bars"><i class="fa fa-bars"></i></a>
<a href="#" id="account"><i class="fa fa-user-circle-o"></i></a>
</div>
</div>
</nav>
<!-- main section -->
<main id="main" >
<!-- categories section -->
<section id="categories">
<div class="brand">
<div class="img-container">
<img src="/images/redmi note 8C.jpg" alt="img" class="brand-img">
</div>
<h4 id="brand-name">Xiaomi</h4>
</div>
<div class="brand">
<div class="img-container">
<img src="/images/realmeX20pro.jpg" alt="img" class="brand-img">
</div>
<h4 id="brand-name">Realme</h4>
</div>
<div class="brand">
<div class="img-container">
<img src="/images/vivo1.jpg" alt="img" class="brand-img">
</div>
<h4 id="brand-name">Oppo</h4>
</div>
<div class="brand">
<div class="img-container">
<img src="/images/samGalaxynote20.jpg" alt="img" class="brand-img">
</div>
<h4 id="brand-name">Samsung</h4>
</div>
<div class="brand">
<div class="img-container">
<img src="/images/iphone1.jpeg" alt="img" class="brand-img">
</div>
<h4 id="brand-name">iPhone</h4>
</div>
<div class="brand">
<div class="img-container">
<img src="/images/nokia.jpeg" alt="img" class="brand-img">
</div>
<h4 id="brand-name">Nokia</h4>
</div>
</section>
<!-- end of categories section -->
<!-- all categories -->
<section class="categories">
<div class="title-container">
<h1 id="title">Latest Phones</h1>
<button type="button" id="item-btn">View All</button>
</div>
<div class="card">
<div class="item-container" id="0">
<div class="card-item">
<img src="/images/redmiK20.jpg" alt="img" id="card-img">
<p id="item-name">Redmi K20 (Flame Red, 6GB RAM, 128GB Storage)</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 190</h3>
</div>
<div class="item-container" id="1">
<div class="card-item" >
<img src="/images/samGalaxynote20.jpg" alt="img" id="card-img">
<p id="item-name">Samsung Galaxy Note 20 Ultra 5G</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 300</h3>
</div>
<div class="item-container" id="2">
<div class="card-item" >
<img src="/images/oppofindX2.jpg" alt="img" id="card-img">
<p id="item-name">OPPO Find X2 (Ocean, 12GB RAM, 256GB Storage)</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 240</h3>
</div>
<div class="item-container" id="3">
<div class="card-item">
<img src="/images/realmeX20pro.jpg" alt="img" id="card-img">
<p id="item-name">Realme X50 Pro (Moss Green, 12GB RAM, 256GB Storage) </p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 285</h3>
</div>
</div>
</section>
<!-- Redmi phones -->
<section class="categories">
<div class="title-container">
<h1 id="title">Xiaomi Phones</h1>
<button type="button" id="item-btn">View All</button>
</div>
<div class="card">
<div class="item-container" id="4">
<div class="card-item">
<img src="/images/redminote8.jpg" alt="img" id="card-img">
<p id="item-name">Redmi Note 8 (Neptune Blue, 4GB RAM, 64GB Storage)</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 200</h3>
</div>
<div class="item-container" id="5">
<div class="card-item">
<img src="/images/redminote9.jpg" alt="img" id="card-img">
<p id="item-name">Redmi Note 9 (Pebble Grey, 4GB RAM 64GB Storage)</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 220</h3>
</div>
<div class="item-container" id="6">
<div class="card-item">
<img src="/images/redmi8.jpg" alt="img" id="card-img">
<p id="item-name">Redmi 8A Dual (Sky White, 2GB RAM, 32GB Storage)</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 160</h3>
</div>
<div class="item-container" id="7">
<div class="card-item">
<img src="/images/redmi9.jpg" alt="img" id="card-img">
<p id="item-name">Redmi 9 (Sporty Orange, 4GB RAM, 64GB Storage)</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 100</h3>
</div>
</div>
</section>
<!-- end of Redmi phones -->
<!-- Realme Phones -->
<section class="categories">
<div class="title-container">
<h1 id="title">Realme Phones</h1>
<button type="button" id="item-btn">View All</button>
</div>
<div class="card">
<div class="item-container" id="8">
<div class="card-item">
<img src="/images/realme C11.jpg" alt="img" id="card-img">
<p id="item-name">Realme C11 (Rich Green, 32 GB) (2 GB RAM)</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 170</h3>
</div>
<div class="item-container" id="9">
<div class="card-item">
<img src="/images/realmeNarzo.jpg" alt="img" id="card-img">
<p id="item-name">Realme Narzo 20 (Victory Blue, 4 GB RAM, 128 GB Storage)</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 210</h3>
</div>
<div class="item-container" id="10">
<div class="card-item">
<img src="/images/realme7i.jpg" alt="img" id="card-img">
<p id="item-name">Realme 7i (4 GB RAM /64 GB Storage)</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 330</h3>
</div>
<div class="item-container" id="11">
<div class="card-item">
<img src="/images/realmeC15.jpg" alt="img" id="card-img">
<p id="item-name">Realme C15 (Power Silver, 4GB RAM, 64GB Storage)</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 350</h3>
</div>
</div>
</section>
<!-- end of realme phones -->
<!-- Oppo Phones -->
<section class="categories">
<div class="title-container">
<h1 id="title">Oppo Phones</h1>
<button type="button" id="item-btn">View All</button>
</div>
<div class="card">
<div class="item-container" id="12">
<div class="card-item">
<img src="/images/oppoA31.jpg" alt="img" id="card-img">
<p id="item-name">Oppo A31 (Fantasy White, 6GB RAM, 128GB Storage)</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 280</h3>
</div>
<div class="item-container" id="13">
<div class="card-item">
<img src="/images/oppA5s.jpg" alt="img" id="card-img">
<p id="item-name">OPPO A5S (Black, 3GB RAM, 32GB Storage)</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 190</h3>
</div>
<div class="item-container" id="14">
<div class="card-item">
<img src="/images/oppoF17.jpg" alt="img" id="card-img">
<p id="item-name">OPPO F17 Pro (Matte Black, 8GB RAM, 128GB Storage)</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 300</h3>
</div>
<div class="item-container" id="15">
<div class="card-item">
<img src="/images/oppoA15.jpg" alt="img" id="card-img">
<p id="item-name">OPPO A15 (Dynamic Black, 3GB RAM, 32GB Storage)</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 275</h3>
</div>
</div>
</section>
<!-- end of oppo phones -->
<!-- samsung Phones -->
<section class="categories">
<div class="title-container">
<h1 id="title">Samsung Phones</h1>
<button type="button" id="item-btn">View All</button>
</div>
<div class="card">
<div class="item-container" id="16">
<div class="card-item">
<img src="/images/samgalaxyM01.jpg" alt="img" id="card-img">
<p id="item-name">Samsung Galaxy M01 (Blue, 3GB RAM, 32GB Storage)</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 310</h3>
</div>
<div class="item-container" id="17">
<div class="card-item">
<img src="/images/samGalaxyM21.jpg" alt="img" id="card-img">
<p id="item-name">Samsung Galaxy M21 (Raven Black, 4GB RAM, 64GB Storage)</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 400</h3>
</div>
<div class="item-container" id="18">
<div class="card-item">
<img src="/images/samsGalaxyNote20.jpg" alt="img" id="card-img">
<p id="item-name">amsung Galaxy Note 20</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 290</h3>
</div>
<div class="item-container" id="19">
<div class="card-item">
<img src="/images/samGalaxys20+.jpg" alt="img" id="card-img">
<p id="item-name">Samsung Galaxy S20 +</p>
</div>
<i class="fa fa-shopping-cart" id="add-to-cart"></i>
<h3 id="item-price">Price : $ 350</h3>
</div>
</div>
</section>
<!-- end of samsung phones -->
<!-- Footer section -->
<footer>
<p id="footer-title">our support team</h3p>
<div class="footer">
<div class="support">
<ul>
<h3>Know About Us</h3>
<li><a href="#" id="about">Know Us</a></li>
<li><a href="#" id="Refund-policy">Refund Policy</a></li>
<li><a href="#" id="policy">Our Policy</a></li>
<li><a href="#" id="return-product">How to Return ?</a></li>
<li><a href="#" id="terms">Term & Conditios</a></li>
<li><a href="#" id="privacy">Privacy Policy</a></li>
</ul>
</div>
<div class="social-media">
<ul>
<h3>Contact Us</h3>
<li><i class="fa fa-facebook"></i><a href="#" id="facebook">Facebook</a></li>
<li><i class="fa fa-twitter"></i><a href="#" id="twitter">Twitter</a></li>
<li><i class="fa fa-instagram"></i><a href="#" id="facebook">Instagram</a></li>
<li><i class="fa fa-telegram"></i><a href="#" id="facebook">Telegram</a></li>
</ul>
</div>
<div class="address">
<h3>Office Address</h3>
<p>Building Ashiana,Cubbon Park,</p>
<p>Bengaluru,560103,</p>
<p>Karnatka,India</p>
<p>Phone No : 9876543210</p>
</div>
</div>
<div id="copyright">
<p>© : 2020 SampleKart.com. All Rights Reserved</p>
</div>
</footer>
<!-- end of footer section -->
</main>
<!-- end of main -->
<!-- details page section -->
<div id="details-page">
<div class="details">
<div class="items-detail">
<div class="image-container">
<img src="/images/redmiK20.jpg" alt="" id="details-img">
</div>
<div class="details-card">
<h2 id="detail-title">Samsung Galaxy</h2>
<h4 id="detail-price">Price : Rs 9,999</h4>
<p id="you-save">You save : (Rs 4,000)</p>
<p id="delievery"><strong>Delivery : </strong> In 3 - 4 days</p>
<p id="spec"><strong>Specification :</strong>
<ul>
<li>13MP AI triple main camera + 2MP bokeh (depth of field) camera + 2MP macro camera with photo, video, professional mode panorama, portrait, time-lapse etc. | 16MP front punch hole camera</li>
<li>Lorem ipsum, dolor sit amet consectetur adipisicing elit. </li>
<li>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil maxime reiciendis laborum! Velit odit molestias architecto doloremque est sapiente. </li>
</ul>
</p>
<button id="carts">Add to Cart</button>
<button id="buy">Back</button>
</div>
</div>
</div>
</div>
<!-- end of page detail -->
<!-- cart list section -->
<div id="cart-container">
<p id="cart-title">Your <strong>Cart</strong></p id="cart-title">
<div id="empty-cart">
<h1>Your Cart is Empty...</h1>
</div>
<div id="cart-with-items">
<div class="cart-column">
<h3>Product</h3>
<h3>Product Name</h3>
<h3>Total </h3>
<h3>Quantity</h3>
<h3>Remove</h3>
</div>
<div id="item-body">
</div>
<div id="total">
<h3 id="total-items"></h3>
<h2 id="total-amount"></h2>
<h3 id="you-saved"></h3>
</div>
</div>
</div>
<script src="/site.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: lavender;
}
.nav-responsive{
display: flex;
position: fixed;
z-index: 1;
width: 100vw;
justify-content: space-between;
align-items: center;
background:rgb(128, 180, 248);
padding: 0.8rem 0rem;
margin-top: -5rem;
}
.logo{
width: 4rem;
height: 3rem;
border-radius: 50%;
}
.nav-search{
width: 50vw;
margin: 0 auto;
position: relative;
}
#search{
margin: 0 auto;
width: 50vw;
outline: none;
font-size: 1.3rem;
padding:0.2rem 2rem 0.2rem 1rem;
border-radius: 1rem;
border: none;
}
#find{
position: absolute;
font-size: 1.3rem;
top: 0.3rem;
right: 0.5rem;
color: rgb(184, 140, 140);
background: transparent;
}
.access a{
color: rgb(73, 73, 70);
font-size: 20px;
padding:0 10px;
}
#notification{
position: relative;
top: -5px;
}
#cart{
position: relative;
top: -5px;
}
#bars{
padding:0 10px;
font-size: 30px;
margin-right: 1rem;
}
#account{
display: none;
margin-right: 1rem;
}
#account i{
font-size: 30px;
}
/* main section */
#main{
margin-top: 5rem;
}
#categories{
margin: 0.5rem 0;
display: flex;
padding: 0.5rem 0.3rem;
background: rgba(253, 253, 253, 0.924);
}
.brand{
width: 4rem;
text-align: center;
margin-right: 1rem;
cursor: pointer;
}
.img-container{
width: 4rem;
height: 4rem;
background: rgba(0, 128, 128, 0.278);
border-radius: 50%;
position: relative;
}
.brand-img{
height: 4.2rem;
width: 2.2rem;
position: relative;
top: -2.5px;
margin: auto;
text-align: center;
}
#brand-name{
font-family: sans-serif;
text-transform: capitalize;
margin-top: 10px;
color: teal;
}
.categories{
margin-top: 25px;
}
.title-container{
display: flex;
justify-content: space-between;
background: white;
padding: 1rem 0.5rem;
}
#item-btn{
outline: none;
border: none;
background: rgb(126, 202, 228);
color: white;
padding: 0 0.5rem;
font-size: 1.2rem;
margin-right: 0.5rem;
}
#item-btn:active{
background: rgb(4, 167, 243);
}
#title{
font-size: 2rem;
background: white;
}
.card{
display: grid;
grid-template-columns:
auto auto ;
grid-gap: 1px;
text-align: center;
font-family: sans-serif;
}
.item-container{
background: white;
position: relative;
background: white;
padding: 15px 12px;
position: relative;
}
.item-container:hover{
background: lavender;
transition: all 0.7s ease-in-out;
}
.item-container:hover #card-img{
transform: scale(1.1);
transition: all 0.7s ease-in-out;
}
.card-item{
cursor: pointer;
}
#card-img{
position: relative;
max-width: 100%;
max-height: 8rem;
text-align: center;
}
#item-name{
text-align: left;
color: lightseagreen;
margin-top: 1rem;
font-size: 0.95rem;
}
#add-to-cart{
font-size: 1.5rem;
color: rgb(155, 85, 96);
position: absolute;
bottom: 1rem;
right: 0.8rem;
cursor: pointer;
opacity: 0;
}
.item-container:hover #add-to-cart{
transition: all 0.7s ease-in-out;
opacity: 1;
}
#item-price{
color: rgb(199, 110, 110);
text-align: left;
margin-top: 0.5rem;
}
/* footer */
footer{
background: rgb(18, 29, 29);
color: white;
font-family: sans-serif;
margin-top: 1rem;
}
#footer-title{
font-size: 2rem;
text-transform: capitalize;
text-align: center;
padding: 0.3rem 0;
color: grey;
}
.footer{
display: grid;
padding: 5rem 2rem;
grid-template-columns: auto auto;
grid-gap: 2rem;
font-size: 0.9rem;
}
.footer h3{
margin-bottom: 1rem;
font-weight: 200;
font-size: 1.2rem;
color: grey;
}
.footer ul li{
list-style-type: none;
line-height: 1.5rem;
}
.footer ul li a{
color: white;
text-decoration: none;
}
.footer p{
line-height: 1.5rem;
}
#copyright{
margin-top: 3rem;
text-align: center;
background: rgb(39, 38, 38);
padding: 0.7rem 0;
font-size: 1.2rem;
}
.footer .social-media i{
padding: 0.5rem;
font-size: 1.5rem;
}
/* Details page */
#details-page{
background: rgba(128, 128, 128, 0.356);
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
display: none;
transition: all 0.3s ease-in-out;
}
.details{
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.items-detail{
position: relative;
display: grid;
grid-template-columns: auto auto;
grid-column-gap: 1rem;
background: white;
width: 60vw;
height: 70vh;
}
.image-container{
padding: 2rem;
margin-top: 3rem;
}
#details-img{
width: 15rem;
height: 15rem;
}
#detail-title{
margin-top: 1rem;
color: teal;
font-size: 2.5rem;
}
#detail-price{
margin-top: 1.5rem;
color: rgb(199, 110, 110);
font-size: 1.5rem;
}
#you-save{
font-size: 1.2rem;
color: rgb(106, 146, 161);
}
#delievery{
margin-top: 1.5rem;
font-size: 1.2rem;
}
#spec{
margin-top: 0.5rem;
font-size: 1.2rem;
}
.items-detail ul li{
position: relative;
margin: 0.5rem 0;
font-family: sans-serif;
list-style-position: inside;
}
.items-detail button{
font-size: 1.5rem;
padding: 0.3rem;
text-align: center;
margin-top: 0.5rem;
outline: none;
border: none;
}
#carts{
background: rgb(238, 166, 12);
color: white;
}
#carts:active{
background: white;
color: rgb(238, 166, 12);
}
#buy{
background: rgb(167, 179, 5);
color: white;
}
#buy:active{
background: white;
color:rgb(167, 179, 5);
}
/* cart list section*/
#cart-container{
display: none;
margin-top: 5rem;
}
#cart-title{
font-size: 3.5rem;
text-align: center;
font-family: sans-serif;
color: rgb(146, 78, 78);
}
#empty-cart{
display: none;
margin-top: 4rem;
text-align: center;
font-size: larger;
}
#cart-with-items{
display: none;
margin-top: 1rem;
}
.cart-column{
display: grid;
padding: 1rem;
grid-template-columns: repeat(5,1fr);
}
.cart-list{
display: grid;
grid-template-columns: repeat(5,1fr);
margin-top: 0.4rem;
position: relative;
padding:0.5rem 1rem;
background: white;
}
.list-name,.pay,.quantity,#remove{
padding: 1.2rem 0.2rem;
}
#list-img{
width: 5rem;
height: 5rem;
}
#total{
display: none;
position: relative;
margin-top: 3rem;
right: 1rem;
float: right;background: rgb(172, 191, 246);
font-family: monospace;
font-size: larger;
padding: 1rem;
color: rgb(149, 51, 34);
letter-spacing: 0.1rem;
margin-bottom: 1.5rem;
}
#you-saved{
color: rgb(101, 99, 102);
}
/* media queries for responsive view */
@media only screen and (min-width : 800px){
.card{
grid-template-columns: repeat(4,1fr);
}
.footer{
grid-template-columns: auto auto auto;
}
#account{
display: inline;
}
#bars{
display: none;
}
}
@media only screen and (max-width : 800px){
.items-detail{
display: block;
width: 70vw;
height: 70vh;
padding: 0 4.5rem;
}
#details-img{
width: 8rem;
height: 9rem;
}
#detail-title{
font-size: 1.7rem;
margin-top: 0rem;
}
#detail-price,#delievery{
margin-top: 0.5rem;
}
#spec,.items-detail ul{
display: none;
}
.image-container{
padding: 1rem;
margin-top: 1rem;
}
}
JavaScript
const data= [
{
id : 0,
img : '/images/redmiK20.jpg',
name : 'Redmi K20',
price : 190,
save : 25,
delievery : 'In 3 - 4 days',
itemInCart: false
},
{
id : 1,
img : '/images/samGalaxynote20.jpg',
name : 'Samsung Galaxy Note 20',
price : 300,
save : 50,
delievery : 'In 3 - 4 days',
itemInCart: false
},
{
id : 2,
img : '/images/oppofindX2.jpg',
name : 'OPPO Find X2',
price : 240,
save : 30,
delievery : 'In 3 - 4 days',
itemInCart: false
},
{
id : 3,
img : '/images/realmeX20pro.jpg',
name : 'Realme X50 Pro',
price : 285,
save : 35,
delievery : 'In 3 - 4 days',
itemInCart: false
},
{
id : 4,
img : '/images/redminote8.jpg',
name : 'Redmi Note 8',
price : 200,
save : 15,
delievery : 'In 3 - 4 days',
itemInCart: false
},
{
id : 5,
img : '/images/redminote9.jpg',
name : 'Redmi Note 9',
price : 220,
save : 25,
delievery : 'In 3 - 4 days',
itemInCart: false
},
{
id : 6,
img : '/images/redmi8.jpg',
name : 'Redmi 8A Dual',
price : 160,
save : 20,
delievery : 'In 3 - 4 days',
itemInCart: false
},
{
id : 7,
img : '/images/redmi9.jpg',
name : 'Redmi 9',
price : 100,
save : 10,
delievery : 'In 3 - 4 days',
itemInCart: false
},
];
let cartList=[]; //array to store cart lists
var i;
var detail =document.getElementsByClassName('card-item');
var detailsImg = document.getElementById('details-img')
var detailTitle = document.getElementById('detail-title')
var detailPrice = document.getElementById('detail-price')
var youSave = document.getElementById('you-save');
var detailsPage = document.getElementById('details-page');
var back = document.getElementById('buy')
back.addEventListener('click',refreshPage)
var addToCarts = document.querySelectorAll('#add-to-cart')
var cart = document.getElementById('cart');
// click event to display cart page
cart.addEventListener('click',displayCart)
var carts = document.getElementById('carts');
//click events to add items to cart from details page
carts.addEventListener('click',()=>addToCart(getId))
var home = document.getElementById('logo');
//click event to hide cart page and return to home page
home.addEventListener('click',hideCart);
//events on dynamically created element to remove items from list
document.addEventListener('click',function (e){
if(e.target.id=='remove'){
var itemId = e.target.parentNode.id
removeFromCart(itemId)
}
})
//click event to display details page
for(i=0;i<data.length;i++){
detail[i].addEventListener('click',handleDetail)
}
var getId;
//click events to add items to cart from home page cart icon
addToCarts.forEach(val=>val.addEventListener('click',()=>addToCart(val.parentNode.id)));
// details function
function handleDetail(e){
detailsPage.style.display = 'block'
getId= this.parentNode.id;
detailsImg.src= data[getId].img;
detailTitle.innerHTML= data[getId].name;
detailPrice.innerHTML= 'Price : $ ' +data[getId].price;
youSave.innerHTML= 'You save : ($ ' + data[getId].save + ')';
}
// add item to the cart
function addToCart(id) {
if(!data[id].itemInCart){
cartList= [...cartList,data[id]];
addItem()
alert('item added to your cart')
}
else{
alert('your item is already there')
}
data[id].itemInCart= true
}
//back to main page
function refreshPage(){
detailsPage.style.display = 'none'
}
// hide your cart page
function hideCart(){
document.getElementById('main').style.display= "block";
document.getElementById('cart-container').style.display= "none";
}
//display your cart page
function displayCart(){
document.getElementById('main').style.display= "none";
document.getElementById('details-page').style.display= "none";
document.getElementById('cart-container').style.display= "block";
if(cartList.length==0){
document.getElementById('cart-with-items').style.display= "none";
document.getElementById('empty-cart').style.display= "block";
}
else{
document.getElementById('empty-cart').style.display= "none";
document.getElementById('cart-with-items').style.display= "block";
}
}
var totalAmount;
var totalItems;
var totalSaving;
//add item to the cart
function addItem(){
totalAmount=0;
totalItems = 0;
totalSaving=0
var clrNode=document.getElementById('item-body');
clrNode.innerHTML= '';
console.log(clrNode.childNodes)
cartList.map((cart)=>
{
var cartCont = document.getElementById('item-body');
totalAmount = totalAmount + cart.price;
totalSaving = totalSaving + cart.save;
totalItems = totalItems + 1;
var tempCart = document.createElement('div')
tempCart.setAttribute('class','cart-list');
tempCart.setAttribute('id',cart.id);
var listImg = document.createElement('img');
listImg.setAttribute('id','list-img');
listImg.src = cart.img
tempCart.appendChild(listImg)
var listName = document.createElement('h3');
listName.setAttribute('class','list-name');
listName.innerHTML = cart.name;
tempCart.appendChild(listName)
var listPay = document.createElement('h3');
listPay.setAttribute('class','pay');
listPay.innerHTML = cart.price;
tempCart.appendChild(listPay);
var listQuantity = document.createElement('h3');
listQuantity.setAttribute('class','quantity');
listQuantity.innerHTML = '1';
tempCart.appendChild(listQuantity);
var listTrash = document.createElement('i');
listTrash.setAttribute('class','fa fa-trash ');
listTrash.setAttribute('id','remove');
tempCart.appendChild(listTrash);
cartCont.appendChild(tempCart)
})
document.getElementById('total-amount').innerHTML = 'Total Amount : $ ' + totalAmount;
document.getElementById('total-items').innerHTML = 'Total Items : ' + totalItems;
document.getElementById('you-saved').innerHTML = 'You Saved : $ ' + totalSaving;
document.getElementById('total').style.display= "block";
}
//remove item from the cart
function removeFromCart(itemId){
data[itemId].itemInCart = false
cartList = cartList.filter((list)=>list.id!=itemId);
addItem()
if(cartList.length==0){
document.getElementById('cart-with-items').style.display= "none";
document.getElementById('empty-cart').style.display= "block";
}
}
Comments
Post a Comment
Hello,
Thank you for taking the time to leave a comment! Your feedback is important to us and we appreciate any suggestions or thoughts you may have. We strive to create the best possible experience for our users and your comments will help us achieve that goal.
If you have any questions or concerns, please don't hesitate to reach out to us. We're here to help and are always happy to hear from our users.
Thank you again for your comment and have a great day!
Best regards,
NewWebSofts