addtocart.js

const product = [
    {
        id: 0,
        image:'image/boat.jpeg' ,
        title: "Boat Netflix Edition HeadPhone",
        price: 4999,
    },
    {
        id: 1,
        image: 'image/noise.jpeg',
        title: "Noise Buds Combat",
        price: 1499,
    },
    {
        id: 2,
        image:'image/bracelet.jpeg' ,
        title: "Natural Healing Stone Bracelet",
        price: 999,
    },
    {
        id: 3,
        image:'image/goldb.jpeg' ,
        title: "Gold Bracelet",
        price: 8799,
    },
    {
        id: 4,
        image:'image/shoe.jpeg' ,
        title: "Nike Shoe",
        price: 8049,
    },
    {
        id: 5,
        image:'image/campusshoe.jpeg' ,
        title: "Campus Shoe",
        price: 1289,
    },

];

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}.00</h2>`+
        "<button onclick='addtocart("+(i++)+")'> Add to Cart </button>"+
        `</div>
        </div>`
    )
}).join('')

var cart = [];

function addtocart(a){
    cart.push({...categories[a]});
    displaycart();
}

function delElement(a){
    cart.splice(a, 1);
    displaycart();
}

 
function displaycart(a){
    let j=0, total=0;
    document.getElementById("count").innerHTML = cart.length;
    if(cart.length==0){
        document.getElementById('cartItem').innerHTML = "Your Cart is Empty !!";
        document.getElementById("total").innerHTML = "₹ "+0+".00";
    }
    else{
        document.getElementById("cartItem").innerHTML = cart.map((items)=>
        {
            var {image, title, price} = items;
            total=total+price;
            document.getElementById('total').innerHTML="₹ "+total+".00";
            return(
                `<div class='cart-item'>
                <div class='row-img'>
                    <img class='rowing' src=${image}>
                </div>
            
                <p style='font-size:12px;'>₹ ${title}</p>
                <h2 style='font-size:15px;'>₹ ${price}.00</h2>`+
                "<i class='fa-solid fa-trash' onclick='delElement("+ (j++) +")'></i></div>"
            );
        }).join('')
    }
}