Skip to main content

How to Create Shopping Cart using HTML, CSS and JavaScript

How to Create Shopping Cart using HTML, CSS and JavaScript

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.com

Source 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

Popular posts from this blog

Styling SVGs with CSS

Styling SVGs with CSS SVGs are a versatile and powerful format for creating high-quality graphics on the web. However, by default, SVGs can appear plain and unstyled, which can make them feel out of place in a modern web design.That's where CSS comes in. By using CSS to style SVGs, you can add color, gradients, shadows, animations, and other visual effects that make them more dynamic and engaging. Back to TOC Table of Contents What is SVG? Inline vs External SVGs Basic Styling Techniques Advanced Styling Techniques Animation Demo • What is SVG? SVG stands for Scalable Vector Graphics. It is a vector graphics format that uses XML to define two-dimensional graphics. Unlike raster graphics, such as JPEGs or PNGs, SVGs can be scaled without losing quality, making them ideal for use on websites and other digital media. • Inline vs External SVGs SVGs can be...

How to Create a Circular Scroll Progress with HTML, CSS & JavaScript

See the Pen How to Create a Circular Scroll Progress with HTML, CSS & JavaScript by Mushtaq Ahmad ( @MushtaqPhysicist ) on CodePen . How to Create a Circular Scroll Progress with HTML, CSS & JavaScript In this guide, we will explore process of using HTML, CSS, and JavaScript to design a circular scroll progress indicator. This type of indicator displays percentage of a webpage that has been scrolled. Specifically, we will create a circular indicator and position it in bottom right corner of webpage. The indicator's fill level will correspond to amount of page that has been scrolled. HTML Copy Code <!DOCTYPE html> <html lang="en"> <head> <title>Scroll Percentage</title> <!-- Stylesheet --> <link rel="stylesheet" href="style.css"> </head> <body>...

CSS Glowing Corners Effects

CSS Glowing Corners Effects CSS glowing corners effects are a great way to add an extra touch of style to your website or app. By applying a subtle glowing effect to the corners of your elements, you can create a sense of depth and dimension that makes your design stand out. Back to TOC Table of Contents Introduction CSS Code Examples Conclusion Introduction CSS glowing corners effects are a popular way to add some style and visual interest to box elements on a webpage. With some simple CSS code, you can create a glowing effect around the corners of a box, which can be customized in terms of color, size, and intensity. In this article, we'll go over the basic CSS code for creating these effects, as well as some examples of how they can be used on a webpage. CSS Code The CSS code for creating glowing corners effects...