Create JavaScript Shopping Cart with Add to Cart
In this tutorial, we’ll use CSS and Javascript to build a shopping cart. In this project, we’ll make three distinct pieces and one section that combines all three components. For males, women, watches, and Javascript, separate sections will be created. In this project, we’ll make three distinct pieces and one section that combines all three components.
50+ HTML, CSS and JavaScript Projects With Source Code
For men, women, and watches, we shall make separate sections. To purchase a specific item, a user can choose it from the listing and then click the add to cart button. We’ll also include a shopping cart button in the user interface of the shopping cart where the total number of products and their combined cost will be shown to the user.
We’ll use the web development tools HTML and CSS to create and style the structure of a webpage. A shopping cart is a requirement for any eCommerce website so that customers can select and purchase things. By following this tutorial, you may create your own shopping cart from scratch while learning practical web development and design skills.
Step1: HTML Code For Shopping Cart
<main>
<nav class="navbar navbar-expand-lg navbar-dark fixed-top bg-dark">
<a class="navbar-brand" href="#"><strong>Shoping Cart</strong></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="search" id="search_field" placeholder="Search" aria-label="Search">
</form>
<button type="button" class="btn btn-success my-2 my-sm-0" data-toggle="modal"
data-target="#staticBackdrop">
<i class="fas fa-shopping-cart total-count"></i>
</button>
</div>
</nav>
<section>
<div class="featured-area pt-100 pb-70">
<div class="container">
<div class="tab featured-tab-area">
<div class="row justify-content-center">
<div class="col-lg-4 col-md-8">
<ul class="tabs active">
<li class="">
<a href="#">
All
</a>
</li>
<li class="">
<a href="#">
Men
</a>
</li>
<li class="">
<a href="#">
Women
</a>
</li>
<li class="">
<a href="#">
Watch
</a>
</li>
</ul>
</div>
</div>
<div class="tab_content current active pt-45">
<div class="tabs_item current">
<div class="row justify-content-center">
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/men-1.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Oxford Shirts</a></h3>
<hr>
<div class="content-in">
<h4>₹ 1200 </h4>
<span>(4.9)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="Oxford" data-price="1200" class="default-btn border-radius-5"> Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/women-1.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Tunic </a></h3>
<hr>
<div class="content-in">
<h4>₹ 459 </h4>
<span>(4.4)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="Tunic" data-price="459" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/watch-1.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Huawei Watch Buds </a></h3>
<hr>
<div class="content-in">
<h4>₹ 4059 </h4>
<span>(4.4)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="Huawei" data-price="4059" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/men-2.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Short-Sleeve Shirt</a></h3>
<hr>
<div class="content-in">
<h4>₹ 800 </h4>
<span>(4.9)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="Short-Sleeve" data-price="800" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/women-2.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Culotte dress</a></h3>
<hr>
<div class="content-in">
<h4>₹ 2459 </h4>
<span>(4.4)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="Culotte" data-price="2459" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/watch-2.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Fire Boltt Dazzle </a></h3>
<hr>
<div class="content-in">
<h4>₹ 1999 </h4>
<span>(4.4)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="FireBoltt" data-price="1999" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/men-3.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Cuban Collar Shirt</a></h3>
<hr>
<div class="content-in">
<h4>₹ 499 </h4>
<span>(4.9)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="CubanCollar" data-price="499" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/women-3.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Babydoll</a></h3>
<hr>
<div class="content-in">
<h4>₹ 1159 </h4>
<span>(4.0)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="Babydoll" data-price="1159" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/watch-3.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Google Pixel</a></h3>
<hr>
<div class="content-in">
<h4>₹ 2059 </h4>
<span>(4.4)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="Google" data-price="2059" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/men-4.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">T-shirt</a></h3>
<hr>
<div class="content-in">
<h4>₹ 700 </h4>
<span>(3.9)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="T-shirt" data-price="700" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/women-4.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Wrap around</a></h3>
<hr>
<div class="content-in">
<h4>₹ 4059 </h4>
<span>(4.4)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="Wrap" data-price="4059" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/watch-4.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">titan Power</a></h3>
<hr>
<div class="content-in">
<h4>₹ 459 </h4>
<span>(4.4)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="titan" data-price="459" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tabs_item">
<div class="row justify-content-center">
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/men-1.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Oxford Shirts</a></h3>
<hr>
<div class="content-in">
<h4>₹ 1200 </h4>
<span>(4.9)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="Oxford" data-price="1200" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/men-2.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Short-Sleeve Shirt</a></h3>
<hr>
<div class="content-in">
<h4>₹ 800 </h4>
<span>(4.9)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="Short-Sleeve" data-price="800" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/men-3.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Cuban Collar Shirt</a></h3>
<hr>
<div class="content-in">
<h4>₹ 499 </h4>
<span>(4.9)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="Cuban" data-price="499" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/men-4.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">T-shirt</a></h3>
<hr>
<div class="content-in">
<h4>₹ 700 </h4>
<span>(3.9)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="T-shirt" data-price="700" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tabs_item">
<div class="row justify-content-center">
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/women-1.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Tunic </a></h3>
<hr>
<div class="content-in">
<h4>₹ 459 </h4>
<span>(4.4)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="Tunic" data-price="459" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/women-2.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Culotte dress</a></h3>
<hr>
<div class="content-in">
<h4>₹ 2459 </h4>
<span>(4.4)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="Culotte" data-price="2459" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/women-3.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Babydoll</a></h3>
<hr>
<div class="content-in">
<h4>₹ 1159 </h4>
<span>(4.0)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="Babydoll" data-price="1159" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/women-4.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Wrap around</a></h3>
<hr>
<div class="content-in">
<h4>₹ 4059 </h4>
<span>(4.4)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="Wrap" data-price="4059" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="tabs_item">
<div class="row justify-content-center">
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/watch-1.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Huawei Watch Buds </a></h3>
<hr>
<div class="content-in">
<h4>₹ 4059 </h4>
<span>(4.4)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="Huawei" data-price="4059" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/watch-2.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Fire Boltt Dazzle </a></h3>
<hr>
<div class="content-in">
<h4>₹ 1999 </h4>
<span>(4.4)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="FireBoltt" data-price="1999" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/watch-3.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">Google Pixel</a></h3>
<hr>
<div class="content-in">
<h4>₹ 2059 </h4>
<span>(4.4)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="Google" data-price="2059" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
<div class="col-lg-3 col-md-6">
<div class="featured-item">
<div class="featured-item-img">
<a href="#">
<img src="https://add-to-cart-javascript.vercel.app/img/watch-4.jpg" alt="Images">
</a>
</div>
<div class="content">
<h3><a href="#">titan Power</a></h3>
<hr>
<div class="content-in">
<h4>₹ 459 </h4>
<span>(4.4)<i class="fa fa-star"></i></span>
</div>
<hr>
<div class="featured-content-list">
<button type="button" data-name="titan" data-price="459" class="default-btn border-radius-5">Add to cart</button>
</div>
</div>
</div>
</div>
</div>
</div>
<p id="not_found"></p>
</div>
</div>
</div>
</div>
</section>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="staticBackdropLabel">Your Cart</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<table class="show-cart table">
</table>
<div class="grand-total">Total price: ₹<span class="total-cart"></span></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<!-- <button type="button" class="btn btn-danger clear-all">Clear All</button> -->
</div>
</div>
</div>
</div>
</main>Our shopping cart’s framework is more responsive and efficient thanks to the use of the Bootstrap framework. For the different sections of our shopping cart, we created them using Bootstrap classes.
Create Add To Cart Button Using HTML Code
To start, we’ll establish a fixed navbar inside the main tag, which we’ll utilise to build the primary framework for our shopping cart. The search bar, the title of our shopping cart, and a link to Font Awesome will all be added to that navbar. Finally, we will use those links to add the shopping icons to our project.
Then, using Javascript, we will give each of the four buttons for the men, men, women, and watch sections functionality. The featured product will now be listed on the home page. We’ll make a section for each product using the div tag. Along with the information and a “add to cart” button, we will list the product in card form.
We will add the product’s image here along with the details using the image tag. We will add the project’s structure using fundamental HTML tags and Bootstrap classes. Let’s now examine our product’s structure.
HTML Output:
Step2: CSS Code For Shopping Cart
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
:root {
--bodyFonts: 'Josefin Sans', sans-serif;
--pinkColor: #5557F3;
--titleColor: #000000;
--bodyColor: #666666;
--lightblueColor: #8D99FF;
--whiteColor: #ffffff;
--fontSize: 16px;
--transition: .5s;
}
body {
padding: 0;
margin: 0;
font-family: 'Noto Sans', sans-serif !important;
}
a,
a:hover {
text-decoration: none !important;
}
img {
max-width: 100%;
}
hr {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.pt-100 { padding-top: 100px; }
.pt-45 { padding-top: 45px; }
#not_found {
text-align: center;
color: red;
}
.grand-total {
margin-top: 1rem;
text-align: center;
font-weight: 600;
}
.table {
margin-bottom: 0 !important;
}
.default-btn {
padding: 12px 25px 10px;
text-align: center;
color: var(--whiteColor) !important;
font-size: var(--fontSize);
transition: var(--transition);
display: inline-block;
align-items: center;
justify-content: center;
position: relative;
border-radius: 8px;
z-index: 0;
background: var(--pinkColor);
overflow: hidden;
white-space: nowrap;
border: 0;
}
.default-btn:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 550px;
height: 550px;
margin: auto;
background: var(--lightblueColor);
border-radius: 8px;
z-index: -1;
transform-origin: top center;
transform: translateX(-50%) translateY(-5%) scale(0.4);
transition: transform .9s;
}
.default-btn:hover {
color: var(--whiteColor) !important;
}
.default-btn:hover:before {
transition: transform 1s;
transform: translateX(-45%) translateY(0) scale(1);
transform-origin: bottom center;
}
.btn-success {
background-color: #F96B6A !important;
border-color: #F96B6A !important;
}
.featured-area {
background-color: #EDEFF9;
}
.featured-tab-area .tabs {
margin: 0;
padding: 0;
list-style: none;
float: right;
}
.featured-tab-area .tabs li {
display: inline-block;
line-height: initial;
margin-right: 20px;
}
.featured-tab-area .tabs li a {
display: inline-block;
position: relative;
color: var(--titleColor);
padding: 13px 26px 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.featured-tab-area .tabs li.active a {
background-color: var(--pinkColor);
color: var(--whiteColor);
}
.featured-tab-area .tabs li.current a {
background-color: var(--pinkColor);
color: var(--whiteColor);
}
.featured-tab-area-ml .tabs {
margin-top: 0 !important;
float: left;
}
.tab .tabs_item {
display: none;
}
.tab .tabs_item:first-child {
display: block;
}
.featured-item {
margin-bottom: 30px;
background-color: var(--whiteColor);
border-radius: 5px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.featured-item .featured-item-img {
position: relative;
z-index: 1;
transition: 0.3s linear;
overflow: hidden;
}
.featured-item .featured-item-img a {
display: block;
}
.featured-item .featured-item-img a img {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 4px solid var(--whiteColor);
transition: 0.3s linear;
}
.featured-item .featured-item-img a img:hover {
scale: 1.08;
}
.featured-item .content {
padding: 20px 15px;
}
.featured-item .content h3 {
margin-bottom: 10px;
}
.featured-item .content h3 a {
color: var(--titleColor);
-webkit-transition: var(--transition);
transition: var(--transition);
font-weight: bold;
}
.featured-item .content .content-in {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 12px 10px;
border-radius: 3px;
}
.featured-item .content .content-in i {
color: #ffcc00;
}
.featured-item .content .content-in span {
font-size: 15px;
color: var(--titleColor);
font-weight: 500;
}
.featured-item .content .content-in h4 {
font-size: 15px;
color: var(--titleColor);
font-weight: 500;
margin-bottom: 0;
}
.featured-item .content .featured-content-list {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 0 0;
}
.featured-tab-area .tabs li {
margin-right: 5px;
}
#staticBackdropLabel {
font-weight: bold;
}
/* responsive css */
@media only screen and (max-width: 767px) {
.featured-tab-area .tabs {
margin: 20px 0 0;
float: none;
text-align: left;
}
.featured-tab-area .tabs li:last-child {
margin-right: 5px;
}
.featured-tab-area .tabs li a {
font-size: 14px;
padding: 12px 16px 9px;
}
.featured-item .content {
padding: 20px 10px;
}
.featured-item .content h3 {
font-size: 19px;
}
.featured-item .content .content-in span {
font-size: 14px;
}
.featured-item .content .content-in h4 {
font-size: 14px;
}
.featured-item .content .featured-content-list {
padding: 12px 0 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.featured-item .content {
padding: 20px 15px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.featured-tab-area .tabs li a {
font-size: 14px;
padding: 12px 16px 9px;
}
.featured-item .featured-item-img .featured-user {
top: 20px;
}
.featured-item .featured-item-img .featured-user .featured-user-option img {
margin-right: 7px;
width: 25px !important;
height: 25px !important;
}
.featured-item .featured-item-img .featured-user .featured-user-option span {
font-size: 13px;
padding-top: 2px;
}
.featured-item .featured-item-img .featured-item-clock {
font-size: 18px;
}
.featured-item .content {
padding: 20px 10px;
}
.featured-item .content h3 {
font-size: 19px;
}
.featured-item .content .content-in span {
font-size: 14px;
}
.featured-item .content .content-in h4 {
font-size: 14px;
}
.featured-item .content .featured-content-list {
padding: 12px 0 0;
}
.featured-item .content .featured-content-list p {
font-size: 14px;
}
.featured-item .content .featured-content-list p i {
font-size: 16px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.featured-tab-area .tabs li {
margin-right: 5px;
}
.featured-tab-area .tabs li a {
font-size: 14px;
padding: 12px 16px 9px;
}
.featured-item .content h3 {
font-size: 16px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1299px) {
.featured-tab-area .tabs li a {
font-size: 14px;
padding: 12px 16px 9px;
}
.featured-item .content {
padding: 20px 20px;
}
.featured-item .content .content-in {
padding: 10px 5px 8px;
}
.featured-item .content h3 {
font-size: 18px;
}
}We will now use the class selectors to add the styling to our shopping cart while still using the fundamental styling. We will style each component of our shopping cart individually to give our project a more dynamic look.
Create Portfolio Website Using HTML and CSS (Source Code)
Step1:We will first import the “Noto” fonts for our shopping cart UI using the Google import link, and then we will predefine the colour, body fonts, title colour, font size, and transition to our project using the root tag.
The padding and margin will now be set to “zero” using the body tag selector, and the font family will be set to “Noto Sans” using the font family property. We will also style our anchor and image tags using the tag selector attribute, and we will set the width of our picture to “100%”.
@import url(‘https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap’);
:root {
--bodyFonts: 'Josefin Sans', sans-serif;
--pinkColor: #5557F3;
--titleColor: #000000;
--bodyColor: #666666;
--lightblueColor: #8D99FF;
--whiteColor: #ffffff;
--fontSize: 16px;
--transition: .5s;
}
body {
padding: 0;
margin: 0;
font-family: 'Noto Sans', sans-serif !important;
}
a,
a:hover {
text-decoration: none !important;
}
img {
max-width: 100%;
}
hr {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.pt-100 { padding-top: 100px; }
.pt-45 { padding-top: 45px; }
#not_found {
text-align: center;
color: red;
}Step2:Using the class selector (.table), we will now style the components of our shopping cart application. We’ll set the bottom margin to “zero,” and then, using the class default button, we’ll give the buttons in our shopping cart padding of 12, 25, 25, and 10 pixels, respectively. We will also add the colour and font size from the predefined values using the root selection property. The featured item will then receive styling, and our project will also receive a margin and a background colour.
Create Resume/CV Website Using HTML and CSS (Source Code)
.table {
margin-bottom: 0 !important;
}
.default-btn {
padding: 12px 25px 10px;
text-align: center;
color: var(--whiteColor) !important;
font-size: var(--fontSize);
transition: var(--transition);
display: inline-block;
align-items: center;
justify-content: center;
position: relative;
border-radius: 8px;
z-index: 0;
background: var(--pinkColor);
overflow: hidden;
white-space: nowrap;
border: 0;
}
.default-btn:before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 550px;
height: 550px;
margin: auto;
background: var(--lightblueColor);
border-radius: 8px;
z-index: -1;
transform-origin: top center;
transform: translateX(-50%) translateY(-5%) scale(0.4);
transition: transform .9s;
}
.default-btn:hover {
color: var(--whiteColor) !important;
}
.default-btn:hover:before {
transition: transform 1s;
transform: translateX(-45%) translateY(0) scale(1);
transform-origin: bottom center;
}
.btn-success {
background-color: #F96B6A !important;
border-color: #F96B6A !important;
}
.featured-area {
background-color: #EDEFF9;
}
.featured-tab-area .tabs {
margin: 0;
padding: 0;
list-style: none;
float: right;
}
.featured-tab-area .tabs li {
display: inline-block;
line-height: initial;
margin-right: 20px;
}
.featured-tab-area .tabs li a {
display: inline-block;
position: relative;
color: var(--titleColor);
padding: 13px 26px 10px;
background-color: #fff;
border-radius: 5px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.featured-tab-area .tabs li.active a {
background-color: var(--pinkColor);
color: var(--whiteColor);
}
.featured-tab-area .tabs li.current a {
background-color: var(--pinkColor);
color: var(--whiteColor);
}
.featured-tab-area-ml .tabs {
margin-top: 0 !important;
float: left;
}
.tab .tabs_item {
display: none;
}
.tab .tabs_item:first-child {
display: block;
}
.featured-item {
margin-bottom: 30px;
background-color: var(--whiteColor);
border-radius: 5px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.featured-item .featured-item-img {
position: relative;
z-index: 1;
transition: 0.3s linear;
overflow: hidden;
}
.featured-item .featured-item-img a {
display: block;
}
.featured-item .featured-item-img a img {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border: 4px solid var(--whiteColor);
transition: 0.3s linear;
}
.featured-item .featured-item-img a img:hover {
scale: 1.08;
}
.featured-item .content {
padding: 20px 15px;
}
.featured-item .content h3 {
margin-bottom: 10px;
}
.featured-item .content h3 a {
color: var(--titleColor);
-webkit-transition: var(--transition);
transition: var(--transition);
font-weight: bold;
}
.featured-item .content .content-in {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 12px 10px;
border-radius: 3px;
}
.featured-item .content .content-in i {
color: #ffcc00;
}
.featured-item .content .content-in span {
font-size: 15px;
color: var(--titleColor);
font-weight: 500;
}
.featured-item .content .content-in h4 {
font-size: 15px;
color: var(--titleColor);
font-weight: 500;
margin-bottom: 0;
}
.featured-item .content .featured-content-list {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 0 0;
}
.featured-tab-area .tabs li {
margin-right: 5px;
}
#staticBackdropLabel {
font-weight: bold;
}
Step3: Using the media query property, we will now add responsiveness to our project. We’ll establish the maximum screen width, and if the screen shrinks to less than that, the products in our shopping cart UI will resize themselves to fit the available space.
/* responsive css */
@media only screen and (max-width: 767px) {
.featured-tab-area .tabs {
margin: 20px 0 0;
float: none;
text-align: left;
}
.featured-tab-area .tabs li:last-child {
margin-right: 5px;
}
.featured-tab-area .tabs li a {
font-size: 14px;
padding: 12px 16px 9px;
}
.featured-item .content {
padding: 20px 10px;
}
.featured-item .content h3 {
font-size: 19px;
}
.featured-item .content .content-in span {
font-size: 14px;
}
.featured-item .content .content-in h4 {
font-size: 14px;
}
.featured-item .content .featured-content-list {
padding: 12px 0 0;
}
}
@media only screen and (min-width: 576px) and (max-width: 767px) {
.featured-item .content {
padding: 20px 15px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.featured-tab-area .tabs li a {
font-size: 14px;
padding: 12px 16px 9px;
}
.featured-item .featured-item-img .featured-user {
top: 20px;
}
.featured-item .featured-item-img .featured-user .featured-user-option img {
margin-right: 7px;
width: 25px !important;
height: 25px !important;
}
.featured-item .featured-item-img .featured-user .featured-user-option span {
font-size: 13px;
padding-top: 2px;
}
.featured-item .featured-item-img .featured-item-clock {
font-size: 18px;
}
.featured-item .content {
padding: 20px 10px;
}
.featured-item .content h3 {
font-size: 19px;
}
.featured-item .content .content-in span {
font-size: 14px;
}
.featured-item .content .content-in h4 {
font-size: 14px;
}
.featured-item .content .featured-content-list {
padding: 12px 0 0;
}
.featured-item .content .featured-content-list p {
font-size: 14px;
}
.featured-item .content .featured-content-list p i {
font-size: 16px;
}
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
.featured-tab-area .tabs li {
margin-right: 5px;
}
.featured-tab-area .tabs li a {
font-size: 14px;
padding: 12px 16px 9px;
}
.featured-item .content h3 {
font-size: 16px;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1299px) {
.featured-tab-area .tabs li a {
font-size: 14px;
padding: 12px 16px 9px;
}
.featured-item .content {
padding: 20px 20px;
}
.featured-item .content .content-in {
padding: 10px 5px 8px;
}
.featured-item .content h3 {
font-size: 18px;
}
}CSS Output:
ADVERTISEMENT
Step3:Javascript for Shopping Cart
var shoppingCart = (function () {
cart = [];
function Item(name, price, count) {
this.name = name;
this.price = price;
this.count = count;
}
// Save cart
function saveCart() {
localStorage.setItem('shoppingCart', JSON.stringify(cart));
}
// Load cart
function loadCart() {
cart = JSON.parse(localStorage.getItem('shoppingCart'));
}
if (localStorage.getItem("shoppingCart") != null) {
loadCart();
}
var obj = {};
// Add to cart
obj.addItemToCart = function (name, price, count) {
for (var item in cart) {
if (cart[item].name === name) {
cart[item].count++;
saveCart();
return;
}
}
var item = new Item(name, price, count);
cart.push(item);
saveCart();
}
// Set count from item
obj.setCountForItem = function (name, count) {
for (var i in cart) {
if (cart[i].name === name) {
cart[i].count = count;
break;
}
}
};
// Remove item from cart
obj.removeItemFromCart = function (name) {
for (var item in cart) {
if (cart[item].name === name) {
cart[item].count--;
if (cart[item].count === 0) {
cart.splice(item, 1);
}
break;
}
}
saveCart();
}
// Remove all items from cart
obj.removeItemFromCartAll = function (name) {
for (var item in cart) {
if (cart[item].name === name) {
cart.splice(item, 1);
break;
}
}
saveCart();
}
// Clear cart
obj.clearCart = function () {
cart = [];
saveCart();
}
// Count cart
obj.totalCount = function () {
var totalCount = 0;
for (var item in cart) {
totalCount += cart[item].count;
}
return totalCount;
}
// Total cart
obj.totalCart = function () {
var totalCart = 0;
for (var item in cart) {
totalCart += cart[item].price * cart[item].count;
}
return Number(totalCart.toFixed(2));
}
// List cart
obj.listCart = function () {
var cartCopy = [];
for (i in cart) {
item = cart[i];
itemCopy = {};
for (p in item) {
itemCopy[p] = item[p];
}
itemCopy.total = Number(item.price * item.count).toFixed(2);
cartCopy.push(itemCopy)
}
return cartCopy;
}
return obj;
})();
// Add item
$('.default-btn').click(function (event) {
// alert('working');
event.preventDefault();
var name = $(this).data('name');
var price = Number($(this).data('price'));
shoppingCart.addItemToCart(name, price, 1);
displayCart();
});
// Clear items
$('.clear-cart').click(function () {
shoppingCart.clearCart();
displayCart();
});
function displayCart() {
var cartArray = shoppingCart.listCart();
var output = "";
for (var i in cartArray) {
output += "<tr>"
+ "<td>" + cartArray[i].name + "</td>"
+ "<td>(" + cartArray[i].price + ")</td>"
+ "<td><div class='input-group'>"
+ "<input type='number' class='item-count form-control' data-name='" + cartArray[i].name + "' value='" + cartArray[i].count + "'>"
+ "</div></td>"
+ "<td><button class='delete-item btn btn-danger' data-name=" + cartArray[i].name + ">X</button></td>"
+ " = "
+ "<td>" + cartArray[i].total + "</td>"
+ "</tr>";
}
$('.show-cart').html(output);
$('.total-cart').html(shoppingCart.totalCart());
$('.total-count').html(shoppingCart.totalCount());
}
// Delete item button
$('.show-cart').on("click", ".delete-item", function (event) {
var name = $(this).data('name')
shoppingCart.removeItemFromCartAll(name);
displayCart();
})
// Item count input
$('.show-cart').on("change", ".item-count", function (event) {
var name = $(this).data('name');
var count = Number($(this).val());
shoppingCart.setCountForItem(name, count);
displayCart();
});
displayCart();
//////// ui script start /////////
// Tabs Single Page
$('.tab ul.tabs').addClass('active').find('> li:eq(0)').addClass('current');
$('.tab ul.tabs li a').on('click', function (g) {
var tab = $(this).closest('.tab'),
index = $(this).closest('li').index();
tab.find('ul.tabs > li').removeClass('current');
$(this).closest('li').addClass('current');
tab.find('.tab_content').find('div.tabs_item').not('div.tabs_item:eq(' + index + ')').slideUp();
tab.find('.tab_content').find('div.tabs_item:eq(' + index + ')').slideDown();
g.preventDefault();
});
// search function
$('#search_field').on('keyup', function() {
var value = $(this).val();
var patt = new RegExp(value, "i");
$('.tab_content').find('.col-lg-3').each(function() {
var $table = $(this);
if (!($table.find('.featured-item').text().search(patt) >= 0)) {
$table.not('.featured-item').hide();
}
if (($table.find('.col-lg-3').text().search(patt) >= 0)) {
$(this).show();
document.getElementById('not_found').style.display = 'none';
} else {
document.getElementById("not_found").innerHTML = " Product not found..";
document.getElementById('not_found').style.display = 'block';
}
});
});We will incorporate the feature into our shopping cart UI using Javascript. We are going to include the ability to switch sections inside of our shopping cart.
ADVERTISEMENT
As soon as the user clicks on the specific button (men, women, or watch), we will create an active class, and after that, we will add the specific class using the addclasslist function. Similar to this, when we add the add to cart feature, the item we purchase will also be shown inside the shopping cart symbol. In order to count the number of products and the total cost using the sum function, we will add the count functionality.
ADVERTISEMENT
100+ JavaScript Projects With Source Code (2023)
ADVERTISEMENT
Final Output Of Shopping Cart:
Live Preview Javascript Shopping Cart:-
ADVERTISEMENT
Now We have Successfully created our Javascript shopping cart. You can use this project for your personal webpage and We hope you understood the project, If you any doubt feel free to comment!! If you find out this Blog helpful, then make sure to search Codewithrandom on Google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.
Follow: @codewithrandom
Written By : @arun
Code by : @Rajamanickam
