script.js

let total = 0;
let cartItems = [];
let espcard = document.getElementById("espresso-card");
let cappuccino = document.getElementById("cappuccino-card");
let coldbrew = document.getElementById("coldbrew-card");
let totalDisplay = document.getElementById("total-bill");
let cartlist = document.getElementById("cart-list");
let button = document.getElementById("order-btn");
let reset = document.getElementById("clear-btn");
const priceList = {
    "Espresso": 3.50,
    "Cappuccino": 4.50,
    "Cold Brew": 5.00
};
function addToCart(productName, price) {
    total += price;
    totalDisplay.textContent = "Total: $" + total.toFixed(2);
    cartItems.push(productName);
    let newItem = document.createElement("li");
    newItem.style.display = "flex";
    newItem.style.justifyContent = "space-between";
    newItem.style.marginBottom = "20px";
    let textItem = document.createElement("span");
    textItem.textContent = productName;
    newItem.appendChild(textItem);
    let deleteBtn = document.createElement("button");
    deleteBtn.textContent = "Remove";
    deleteBtn.style.background = "#e74c3c";
    deleteBtn.style.color = "white";
    deleteBtn.style.border = "none";
    deleteBtn.style.borderRadius = "5px";
    deleteBtn.style.cursor = "pointer";
    deleteBtn.style.marginLeft = "5px";
    deleteBtn.style.padding = "10px 10px";
    deleteBtn.onclick = function () {
        newItem.remove();
        let index = cartItems.indexOf(productName);
        if (index > -1) {
            cartItems.splice(index, 1);
        }
        total = total - price;
        totalDisplay.textContent = "Total: $" + total.toFixed(2);
        saveCart();
    }
    newItem.appendChild(deleteBtn);
    cartlist.style.listStyle = "none";
    cartlist.appendChild(newItem);
    saveCart();
}
espcard.addEventListener("click", function () {
    addToCart("Espresso", 3.50);
    espcard.style.backgroundColor = "#dff9fb";
})
cappuccino.addEventListener("click", function () {
    addToCart("Cappuccino", 4.50);
    cappuccino.style.backgroundColor = "#dff9fb";
})
coldbrew.addEventListener("click", function () {
    addToCart("Cold Brew", 5.00);
    coldbrew.style.backgroundColor = "#dff9fb";
})
button.addEventListener("click", function () {
    button.textContent = "Order Placed!";
    button.style.backgroundColor = "#27ae60";
    button.style.color = "white";
    totalDisplay.textContent = "Total: $" + total.toFixed(2);
})
reset.addEventListener("click", function () {
    total = 0;
    cartItems = [];
    totalDisplay.textContent = "Total: $" + total.toFixed(2);
    localStorage.removeItem("total");
    localStorage.removeItem("cartItems");
    cartlist.innerHTML = "";
})
function saveCart() {
    localStorage.setItem("total", total);
    localStorage.setItem("cartItems", JSON.stringify(cartItems));
}
function loadCart() {
    let savedTotal = localStorage.getItem("total");
    let savedItems = localStorage.getItem("cartItems");
    if (savedTotal) {
        total = parseFloat(savedTotal);
        totalDisplay.textContent = "Total: $" + total.toFixed(2);
    }
    if (savedItems) {
        cartItems = JSON.parse(savedItems);
        for (let i = 0; i < cartItems.length; i++) {
            let item = cartItems[i];
            let newItem = document.createElement("li");
            let textSpan = document.createElement("span");
            let itemPrice = priceList[item];
            newItem.style.display = "flex";
            newItem.style.justifyContent = "space-between";
            newItem.style.marginBottom = "20px";
            textSpan.textContent = item;
            newItem.appendChild(textSpan);
            let deleteBtn = document.createElement("button");
            deleteBtn.textContent = "Remove";
            deleteBtn.style.background = "#e74c3c";
            deleteBtn.style.color = "white";
            deleteBtn.style.border = "none";
            deleteBtn.style.borderRadius = "5px";
            deleteBtn.style.cursor = "pointer";
            deleteBtn.style.marginLeft = "5px";
            deleteBtn.style.padding = "10px 10px";
            deleteBtn.onclick = function () {
                newItem.remove();
                let index = cartItems.indexOf(item);
                if (index > -1) {
                    cartItems.splice(index, 1);
                }
                total = total - itemPrice;
                totalDisplay.textContent = "Total: $" + total.toFixed(2);
                saveCart();
            }
            newItem.appendChild(deleteBtn);

            cartlist.appendChild(newItem);
            cartlist.style.listStyle = "none";
        }
    }
}
loadCart();