script.js

/* https://fakestoreapi.in/api/products */

let productsSection = document.getElementById("productssection");
// console.log(productsSection);


async function getProducts() {
    try {
        let response = await fetch("https://fakestoreapi.in/api/products");
        let data = await response.json();
        // console.log(data.products);
        displayAllProducts(data.products); // ! Sending products as an argument
    }
    catch (error) {
        console.log("error while fetching products", error);
    }
}
getProducts();

function displayAllProducts(allProducts) {
    // console.log(allProducts);

    allProducts.map((ele) => {
        // console.log(ele);

        // ! Creating elements
        let cardContainer = document.createElement("article");
        // let productImage = document.createElement("img");
        // let productTitle = document.createElement("h2");
        // let productPrice = document.createElement("h4");

        // ! setting attribute
        cardContainer.setAttribute("class", "cardcontainer");
        // productImage.setAttribute("src", ele.image);
        // productImage.setAttribute("alt", ele.title);


        //! adding text content 
        // productTitle.textContent = `${ele.title.slice(0,30)}...`;
        // productPrice.textContent =``

        cardContainer.innerHTML = `
        <div>
            <img src =${ele.image}>
            <h2>${ele.title.slice(0, 60)}...</h2>
        </div>

        <h4>Rs.${ele.price}</h4>
        <button onclick = 'handleAddToCard(${JSON.stringify(ele)})'>Add to Cart</button>
        `;
        //! append element

        // cardContainer.append(productImage,productTitle);
        // console.log(cardContainer);
        productsSection.append(cardContainer);
    });
}

function handleAddToCard(product) {
    console.log("Added to cart");
    console.log(product);

    // console.log(product.id);
    // console.log(product.title);
    // console.log(product.price);
    // console.log(product.image);

    //! initializing cart variable
    let cart = JSON.parse(localStorage.getItem("cart")) || [];

    //! finding index of exesting products
    let exestingProductsIndex = cart.findIndex((ele) => ele.id === product.id);

    if (exestingProductsIndex !== -1) {
        cart[exestingProductsIndex].quantity += 1;
    }
    else {
        cart.push({ ...product, quantity: 1 });
    }

    //! store cart in localStorage
    localStorage.setItem("cart", JSON.stringify(cart));

    //! alert msg
    alert(`${product.title} Added to Cart`);
    displayCartItems();
}

function displayCartItems() {
    let cart = JSON.parse(localStorage.getItem("cart")) || [];
    // console.log(cart);

    let cartsection = document.getElementById("cartsection");
    cartsection.innerHTML = "<h1>My Cart</h1>";

    if (cart.length === 0) {
        cartsection.innerHTML = "<h1>Cart is empty</h1>"
    }
    else {
        cart.map((item,index) => {
            let div = document.createElement("div");
            div.innerHTML = `
            <img src = '${item.image}'>
            <h2>${item.title}</h2>
            <p>Quantity ${item.quantity}</p>
            <p>price ${item.quantity * item.price}</p>
            <button onclick ='removeCartItem(${index})'>remove</button>
            `;
            cartsection.append(div);
        });
    }
}

function removeCartItem(index){
    console.log("Removed",index);

    let cart = JSON.parse(localStorage.getItem("cart")) || [];

    if (cart[index].quantity >1) {
        cart[index].quantity -= 1
    }
    else{
        cart.splice(index,1)
    }

    localStorage.setItem("cart" ,JSON.stringify(cart));

    displayCartItems();
}

window.addEventListener("load", () => {
    displayCartItems();
});