How to make Product screen for mobile using HTML CSS and JAVASCRIPT ?

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

• HTML
• CSS
• JavaScript

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.

Javascript

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

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>

CSS

* {
    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%;
    }
}

Output:

Output