How to make Product screen for mobile using HTML CSS and JAVASCRIPT ?
Last Updated :
23 Jul, 2024
In this post, we will explore how HTML, CSS, and JavaScript can be utilized to create a product page that enables users to add products to their cart and view the total cost.
We have provided a code that generates a card displaying the name, image, and price of a product. When you click on "Add to cart," the product will be automatically added to your cart. You can view the final price of all products in your side cart.
Preview of final output: Let us have a look at how the final output will look like.
Prerequisites
Approach
- To create an HTML card, include an image, title of the product, price of the product, and a button labeled "add to cart" to enable adding the product to the cart.
- On the right-hand side, create a card displaying the total price of the product and all products added to the cart. Grab ID and elements to add different styling properties to the card, which will include defining padding, margin, font sizes, alignments, colors, and more. For centering the card, use the flex property.
- Dynamically add the card products from the JavaScript so that items can be added dynamically.
- Implement the functions displaycart, delElement, and addtocart in JavaScript to handle the product.
- Once added to the cart, use the button "Add to cart" to see the total price of product selected.
Example: This example describes the basic implementation product screen where users can add products in their cart by using HTML, CSS, and JavaScript.
HTML
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<head>
<link rel="stylesheet" href="./style.css">
<script src="https://kit.fontawesome.com/92d70a2fd8.js"></script>
</head>
<body>
<div style="color: green;">
<h1>Geeksforgeeks</h1>
</div>
<!-- <div class="header"> -->
<div class="cart">
<i class="fa fa-shopping-cart" style="font-size:48px;color:red"></i>
<p id="count">0</p>
</div>
<!-- </div> -->
<div class="container">
<div id="root"></div>
<div class="sidebar">
<div id="cartItem">No items !!</div>
<div class="foot">
<h3>Total</h3>
<h2 id="total"> ₹ 0 </h2>
</div>
</div>
</div>
<div class="checkout-card" id="checkoutCard">
<h2>Checkout</h2>
<p>Thank you for shopping with us!</p>
<p>Total Amount: <span id="checkoutTotal">₹ 0</span></p>
<button onclick="closeCheckout()">Close</button>
</div>
<!-- Add a checkout button after the cart container -->
<div id="checkout"></div>
<script src="./script.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "poppins", sans-serif;
font-size: 18px;
}
body {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px;
}
.header {
width: 100%;
background-color: goldenrod;
border-radius: 3px;
margin-bottom: 10px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px;
}
.header .logo {
font-size: 24px;
font-weight: bold;
color: white;
}
.cart {
display: flex;
background-color: white;
justify-content: space-between;
align-items: center;
padding: 7px 10px;
border-radius: 3px;
width: 100%;
}
.fa-solid {
color: goldenrod;
}
.cart p {
height: 45px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 22px;
background-color: #f10e0e;
color: white;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.container {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
}
#root {
width: 100%;
display: grid;
grid-template-columns: repeat(
auto-fill,
minmax(250px, 1fr)
);
grid-gap: 10px;
}
.sidebar {
width: 100%;
border-radius: 5px;
background-color: #eee;
margin-top: 20px;
padding: 15px;
text-align: center;
}
.head {
background-color: goldenrod;
border-radius: 3px;
height: 40px;
padding: 10px;
margin-bottom: 20px;
color: white;
display: flex;
align-items: center;
}
.foot {
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 20px 0px;
padding: 10px 0px;
border-top: 1px solid #333;
}
.cart-item {
display: flex;
flex-direction: column;
align-items: center;
padding: 10px;
background-color: white;
border-bottom: 1px solid #aaa;
border-radius: 3px;
margin: 10px 0;
}
.row-img {
width: 50px;
height: 50px;
border-radius: 50px;
border: 1px solid goldenrod;
display: flex;
align-items: center;
justify-content: center;
}
.rowimg {
max-width: 43px;
max-height: 43px;
border-radius: 50%;
}
.fa-trash:hover {
cursor: pointer;
color: #333;
}
.box {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
border-radius: 12px;
width: 100%;
text-align: center;
box-shadow: 0px 0px 5px
rgba(0, 0, 0, 0.2);
}
.img-box {
margin-bottom: 10px;
}
.images {
max-width: 100%;
height: auto;
}
.bottom {
display: flex;
flex-direction: column;
align-items: center;
}
p {
font-size: 18px;
font-weight: bold;
}
h2 {
font-size: 24px;
color: #ff5733;
margin-top: 5px;
}
button {
background-color: #30336d;
color: #fff;
border-radius: 15px;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
width: 100%;
}
button:hover {
background-color: #f1f129;
}
.checkout-card {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
background-color: white;
box-shadow: 0px 0px 10px
rgba(0, 0, 0, 0.2);
border-radius: 8px;
z-index: 1000;
width: 80%;
max-width: 400px;
text-align: center;
}
.checkout-card button {
background-color: #30336d;
color: #fff;
border-radius: 15px;
border: none;
padding: 10px 20px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
width: 100%;
}
.checkout-card button:hover {
background-color: #f1f129;
}
@media only screen and (max-width: 600px) {
/* Adjust styles for small screens */
.cart p {
font-size: 14px;
}
.checkout-card {
width: 90%;
}
}
// Script.js
const product = [
{
id: 0,
image:
"https://media.geeksforgeeks.org/wp-content/uploads/20231114101916/1.png",
title: "MERN stack course",
price: 21999,
},
{
id: 1,
image:
"https://media.geeksforgeeks.org/wp-content/uploads/20231114101950/2.png",
title: "DSA self placed",
price: 21999,
},
{
id: 2,
image:
"https://media.geeksforgeeks.org/wp-content/uploads/20231114102324/3.png",
title: "Gate 2024",
price: 6999,
},
{
id: 3,
image:
"https://media.geeksforgeeks.org/wp-content/uploads/20231114102017/4.png",
title: "DevOps course",
price: 11999,
},
];
const categories = [...new Set(product.map((item) => {return item;}))];
let i = 0;
document.getElementById("root").innerHTML = categories
.map((item) => {
var { image, title, price } = item;
return (
`<div class='box'>
<div class='img-box'>
<img class='images' src=${image}></img>
</div>
<div class='bottom'>
<p>${title}</p>
<h2>₹ ${price}</h2>` +
"<button onclick='addtocart(" +i++ +")'>Add to cart</button>"
+`</div> </div>`
);
}).join("");
// var cart = [];
var cart = [];
function addtocart(a) {
const selectedProduct = { ...categories[a] };
const existingItem = cart.find(item => item.id === selectedProduct.id);
if (existingItem) {
// If the product already exists in the cart, increment its quantity
existingItem.quantity = (existingItem.quantity || 1) + 1;
}
else {
// If the product is not in the cart, add it with quantity 1
selectedProduct.quantity = 1;
cart.push(selectedProduct);
}
displaycart();
}
function delElement(a) {
cart.splice(a, 1);
displaycart();
}
let checkoutTotal = 0;
// Modify the displaycart function to update the checkout total
// Declare the total variable outside of the functions
let total = 0;
// Modify the displaycart function to update the global total
function displaycart() {
let j = 0;
total = 0;
if (cart.length == 0) {
document.getElementById("cartItem").innerHTML = "Your cart is empty";
document.getElementById("total").innerHTML = "₹ " + 0;
// Hide the checkout card when the cart is empty
document.getElementById("checkoutCard").style.display = "none";
}
else {
let totalquan = 0;
document.getElementById("cartItem").innerHTML = cart
.map((items, idx) => {
var { image, title, price, quantity } = items;
totalquan += quantity;
document.getElementById("count").innerHTML = totalquan;
total = total + price * quantity;
document.getElementById("total").innerHTML = "₹ " + total + "";
return (
`<div class='cart-item'>
<div class='row-img'>
<img class='rowimg' src=${image}>
</div>
<p style='font-size:12px;'>${title}</p>
<h2 style='font-size: 15px;'>₹ ${price}</h2>
<h3>${quantity}</h3>` +
"<i class='fa-solid fa-trash' onclick='delElement(" +j++ +")'></i></div>"
);
}).join("");
// Display the checkout button and total amount
document.getElementById("checkout").innerHTML =
`<button onclick="openCheckout()">Checkout</button>`;}}
// Checkout function
function openCheckout() {
// Show the checkout card
document.getElementById("checkoutCard").style.display = "block";
// Set the checkout total
document.getElementById("checkoutTotal").innerHTML = "₹ " + total;
}
function closeCheckout() {
// Hide the checkout card
document.getElementById("checkoutCard").style.display = "none";
}
Output:
Similar Reads
How to make a HTML div responsive using CSS ? The CSS Media Query can be used to make an HTML "div" responsive. The media queries allow the users to change or customize the web pages for many devices like desktops, mobile phones, tablets, etc without changing the markups. Using the media query, the user can change the style of a particular elem
2 min read
How to Create a Portfolio Website using HTML CSS and JavaScript ? A portfolio website is a website that represents you online on the web pages. It contains different sections like Introduction to Yourself, About You, Your Services, Your Contact Details, and Your Portfolio. We are going to build all of the sections with an interactive and attractive web design that
15+ min read
How to make Themed Form element button using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be making Themed Form element button using jQuery Mobile. Approach: First, add jQuery Mobile scripts needed for your project. <link rel="
1 min read
How to Create iPod Template using HTML and CSS ? The iPod template will create the look and feel of a classic iPod, with a sleek design and functional layout. The code creates a visually appealing iPod-like template with responsive design features and FontAwsome icons are used to enhance the look of the project. PreviewApproachFirst, create the st
3 min read
How to create a Form Popup using jQuery Mobile ? jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating a form popup using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheet†href=â€h
2 min read
How to make Theme collapsibles using jQuery Mobile ? jQuery Mobile is a web-based technology used to make responsive content that can be accessed on all smartphones, tablets, and desktops. In this article, we will be creating a Theme collapsible using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel="stylesheet"
1 min read