Morioh
Login
Aung Thapya

Aung Thapya

3 years ago

In this video we show you how to make Shopping Cart using HTML CSS and JavaScript. Complete this javascript project to practice your HTML CSS and javascript.

Source Code :

HTML File

<!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>&#169 : 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 File:

*{
    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 File

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";
    }
}

Source code & Image  : https://github.com/Ahmad528/shoppingCart/tree/main/samplesite 

Subscribe: https://www.youtube.com/channel/UCJIBDQ7L5toQK0QhWeYJc5g

#html #css #javascript

How to make Shopping Cart using HTML CSS and JavaScript with Source Code

youtube.com

How to make Shopping Cart using HTML CSS and JavaScript with Source Code

In this video we show you how to make Shopping Cart using HTML CSS and JavaScript. Complete this javascript project to practice your HTML CSS and javascript.

62.10 GEEK