script.js

let cart = [];

// product data
const products = [
    {
        name: "iPhone",
        price: 999,
        image: "images/iphone.png"
    },
    {
        name: "Laptop",
        price: 1500,
        image: "images/laptop.png"
    },
    {
        name: "Headphones",
        price: 199,
        image: "images/headphones.png"
    }
];

// show products on page
function displayProducts(){

    const container = document.getElementById("products");

    products.forEach(product => {

        const div = document.createElement("div");
        div.className = "product";

        div.innerHTML = `
            <img src="${product.image}">
            <h3>${product.name}</h3>
            <p>$${product.price}</p>
            <button onclick="addToCart('${product.name}')">Add to Cart</button>
        `;

        container.appendChild(div);
    });

}

// add item to cart
function addToCart(product){

    cart.push(product);

    const cartList = document.getElementById("cart");

    cartList.innerHTML="";

    cart.forEach(item=>{
        const li=document.createElement("li");
        li.innerText=item;
        cartList.appendChild(li);
    });

}

displayProducts();