supermarket baskets backup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700;900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: poppins;
    height: 100vh;
    display: grid;
    overflow: hidden;
    padding: 15px;
    grid-template-columns: 7fr 3fr;
    grid-template-rows: 9fr 1fr;
    grid-template-areas:
        "col1 col2"
        "lfooter rfooter";
    gap: 15px;
    background-color:rgb(173, 173, 173);
    user-select: none;
}

.products {
    height: 100%;
    width: 100%;
    grid-area: col1;
    border: 3px solid black;
    padding: 15px;
    overflow: auto;
    border-radius: 10px;
    background-color: rgb(224, 224, 224);
}

.cart {
    height: 100%;
    width: 100%;
    grid-area: col2;
    padding: 15px;
    border: 3px solid black;
    overflow: auto;
    border-radius: 10px;
    background-color: rgb(224, 224, 224);
}

.wrapper, .cart-wrapper {
    background-color: rgb(128, 192, 192);
    border: 3px solid black;
    border-radius: 10px;
    margin: 10px;
    padding: 10px;
    overflow: hidden;
}

button {
    padding: 5px 10px;
    border: 3px solid black;
    border-radius: 10px;
    cursor: pointer;
}

button:hover {
    background-color:azure;
}

.lfooter, .rfooter {
    background-color: rgb(224, 224, 224);
    height: 100%;
    width: 100%;
    border: 3px solid black;
    padding: 10px 25px;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.lfooter {
    grid-area: lfooter;
}

.rfooter {
    grid-area: rfooter;
}

.green {
    color: green;
}

.blue {
    color: darkblue;
}

.red {
    color: rgb(223, 0, 0);
}

.delBtn {
    font-weight: 700;
    height: max-content;
    width: max-content;
    padding: 6px 10px;
}

.delBtn:hover {
    background-color: rgb(223, 113, 113);
}

.checkoutBtn {
    font-weight: 700;
}

.small {
    font-weight: 400;
    font-size: 12px;
}

.darkOverlay {
    background-color: rgba(0, 0, 0, 0.473);
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    place-content: center;
    z-index: 10;
}

.popupContainer {
    min-height: 250px;
    min-width: 450px;
    padding: 20px;
    border: 3px solid black;
    overflow: auto;
    border-radius: 10px;
    background-color: rgb(224, 224, 224);
}

.row1 {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

.row2 {
    width: 75%;
    margin-bottom: 25px;
}

.row2 > div {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
}

.row2 + div{
    display: flex;
    justify-content: space-between;
}
</style>











<div class="products"></div>
<div class="cart"></div>

<div class="lfooter">
    <button class="addProductBtn">Add products to shop</button>
    <button class="addToAllStocksBtn">+1 stock to all products</button>
</div>

<div class="rfooter">
    <h3 class="totalPriceElement"></h3>
    <button class=checkoutBtn>Checkout</button>
</div>


<div class="darkOverlay">
    <div class="popupContainer">
        <div class="row1">
            <h1>Add Product</h1>
            <button id="closePopupBtn" class="delBtn">X</button>
        </div>
        <div class="row2">
            <div>
                <h4>Product Name:</h4>
                <input type="text" id="nameInput">
            </div>
            <div>
                <h4>Product Price:</h4>
                <input type="text" id="priceInput">
            </div>
            <div>
                <h4>Product Stock:</h4>
                <input type="text" id="stockInput">
            </div>
        </div>
        <div>
            <button id="submit">Submit</button>
            <p class="information"></p>
        </div>
    </div>
</div>

















<script>
// array with objects inside
const products = [
    { name: "Apples", price: 1, stock: 10 },
    { name: "Bananas", price: 2, stock: 7  },
    { name: "Oranges", price: 3, stock: 5  },
    { name: "Kiwis", price: 4, stock: 10  },
]

let cart = [];
const prodDiv = document.querySelector(".products");
const cartDiv = document.querySelector(".cart");
const rfooter = document.querySelector(".rfooter");
const totalPriceElement = document.querySelector(".totalPriceElement");
const checkoutBtn = document.querySelector(".checkoutBtn");
const addToAllStocksBtn = document.querySelector(".addToAllStocksBtn");
const addProductBtn = document.querySelector(".addProductBtn");
const closePopupBtn = document.querySelector("#closePopupBtn");
const darkOverlay = document.querySelector(".darkOverlay");
const nameInput = document.querySelector("#nameInput");
const priceInput = document.querySelector("#priceInput");
const stockInput = document.querySelector("#stockInput");
const submit = document.querySelector("#submit");
const information = document.querySelector(".information");

drawProducts()
drawCartItems()

checkoutBtn.addEventListener("click", function() {
    for (const item of cart) {
        item.qt = "";
    }
    drawCartItems();
})

addToAllStocksBtn.addEventListener("click", function() {
    for (const product of products) {
        product.stock++;
        drawProducts();
    }
})

addProductBtn.addEventListener("click", function() {
    darkOverlay.style.display = "grid";
    information.innerHTML = "";
    nameInput.value = "";
    priceInput.value = "";
    stockInput.value = "";
})

closePopupBtn.addEventListener("click", function() {
    darkOverlay.style.display = "none";
    information.innerHTML = "";
    nameInput.value = "";
    priceInput.value = "";
    stockInput.value = "";
})

// submit button inside popup to add products
submit.addEventListener("click", function() {
    information.innerHTML = "";
    if (nameInput.value.trim() == "") {
        information.innerHTML = `<span class="red">Error: Product name is required.</span>`
        nameInput.focus();
    } else if (checkNames(products, nameInput.value)) { // if the nameInput is an existing product, then proceed into editting mode:
        // Pseudo code of the following if else:
        //🟪 if 1 and 2 empty:
        //🟩     error: you must fill at least one.
        //🟩 else:
        //🟩     if 1 empty:
        //🟩         if 2 is valid:
        //🟩             change
        //🟨             done
        //🟩         else:
        //🟩             error 2 is invalid
        //🟩     else:
        //🟩         if 1 is valid:
        //🟩             if 2 is empty:
        //🟩                 change
        //🟨                 done
        //🟩             else
        //🟩                 if 2 is valid:
        //🟩                     change double
        //🟨                     done double
        //🟩                 else
        //🟩                     error 2 is invalid
        //🟪         else:
        //🟩             error 1 is invalid

        if (priceInput.value.trim() == "" && stockInput.value.trim() == "") { // if priceInput AND stockInput are empty: 🟪
            information.innerHTML = `<span class="red">Error: Please fill in price or stock.</span>`
            priceInput.focus();
        } else {
            if (priceInput.value.trim() == "") {
                if (!isNaN(stockInput.value.trim())) { // if stockInput string is a valid number:
                    information.innerHTML = `<span class="green">✔️ Changed stock of ${products[foundIndex].name} from ${products[foundIndex].stock} to ${stockInput.value}</span>`
                    products[foundIndex].stock = stockInput.value;
                    drawProducts() // 🟨
                } else {
                    information.innerHTML = `<span class="red">Error: Stock input is not a valid number.</span>`
                    stockInput.focus()
                }
            } else {
                if (!isNaN(priceInput.value.trim())) { // if priceInput string is a valid number:
                    if (stockInput.value.trim() == "") { // if stockInput is empty:
                        products[foundIndex].price = priceInput.value;
                        information.innerHTML = `<span class="green">✔️ Changed stock of ${products[foundIndex].name} from ${products[foundIndex].price} to ${priceInput.value}</span>`
                        drawProducts() // 🟨
                    } else {
                        if (!isNaN(stockInput.value.trim())) { // if stockInput string is a valid number:
                            information.innerHTML = `<span class="green">✔️ Changed price of ${products[foundIndex].name} from ${products[foundIndex].price} to ${priceInput.value}</span><br><span class="green">✔️ Changed stock of ${products[foundIndex].name} from ${products[foundIndex].stock} to ${stockInput.value}</span>`
                            products[foundIndex].price = priceInput.value;
                            products[foundIndex].stock = stockInput.value;
                            drawProducts() // 🟨
                        } else {
                            information.innerHTML = `<span class="red">Error: Stock input is not a valid number.</span>`
                            stockInput.focus()
                        }
                    }
                } else { // 🟪
                    information.innerHTML = `<span class="red">Error: Price input is not a valid number.</span>`
                    priceInput.focus();
                }
            }
        }
    } else { // ADDING MODE (above is all editting mode)
        information.innerHTML = `<span class="green">Else</span>`






    }
})

let foundIndex = ""
// returns true if personName is in the array which has name properties in it. Also gives the index it was found at.
function checkNames(array, personName) {
    for (let i = 0; i < array.length; i++) {
        if (array[i].name == personName) {
            foundIndex = i
            return true;
        }
    }
    return false
}

function drawCartItems() {
    // clear the cart
    cartDiv.innerHTML = "";
    // clear total price
    totalPriceElement.innerHTML = "";
    let totalPrice = 0;
    for (const item of cart) {
        // item is cart[i]
        // if the item quantity is bigger than 0, draw the item. If not then dont draw the item because its quantity is 0.
        if (item.qt > 0) {
            const cartWrapper = document.createElement("div");
            cartWrapper.classList.add("cart-wrapper");
            const cartDetails = document.createElement("h3");
            const delBtn = document.createElement("button");
            delBtn.textContent = "X";
            delBtn.classList.add("delBtn")
            cartDetails.innerHTML = `${item.name} <span class="blue">x${item.qt}</span>`;
            delBtn.addEventListener("click", function (e) {
                if (item.qt < 2) {
                    item.qt = ""
                    drawCartItems()
                    // add item back to stock
                    for (const product of products) {
                        if (item.name == product.name) {
                            product.stock++
                            drawProducts();
                        }
                    }
                } else if (item.qt > 1) {
                    item.qt--
                    drawCartItems()
                    // add item back to stock
                    for (const product of products) {
                        if (item.name == product.name) {
                            product.stock++
                            drawProducts();
                        }
                    }
                } else {
                    console.error(`QT has failed the if ladder. Current value: ${item.qt} Cart list: ${JSON.stringify(cart)}`)
                }
            })
            cartWrapper.appendChild(cartDetails);
            cartWrapper.appendChild(delBtn);
            cartDiv.appendChild(cartWrapper);
        }
        totalPrice = totalPrice + (item.price * item.qt);
    }
    totalPriceElement.innerHTML = `Total Price: <span class="green">$${totalPrice}</span>`
}

function drawProducts() {
    // clear the products column
    prodDiv.innerHTML = "";
    for (const product of products) {
        // product is products[i]
        const wrapper = document.createElement("div");
        wrapper.classList.add("wrapper");
        const details = document.createElement("h3");
        //  details.innerHTML = `${product.name} <span class="green">$${product.price}</span><br><span class="small">Stock: <span class="blue">${product.stock}</span></span>`;
        details.innerHTML = `${product.name} <span class="green">$${product.price}</span>`;
        const stockInfo = document.createElement("h6");
        if (product.stock > 0) {
            stockInfo.innerHTML = `Stock: <span class="blue">${product.stock}</span>`;
        } else {
            stockInfo.innerHTML = `<span class="red">Out of stock!</span>`;
        }
        const addToCartBtn = document.createElement("button");
        addToCartBtn.textContent = `Add ${product.name} to Cart`;

        if (product.stock > 0) {
            addToCartBtn.addEventListener("click", function () {
                // The <array>.find(<function>) method returns the value of the first element in an array that returns true (using the function)
                const founditem = cart.find(function(e) {
                    // return true/false if there are duplicate items
                    // e is cart[i]
                    // foundItem is the cart[e] which has cart[e].name == products[i].name
                    return e.name == product.name
                })
                // if founditem is not empty (true) then there was duplicate found
                // else if founditems is empty/undefined (false) then it will be the first of its kind added to the array.
                if (founditem) {
                    founditem.qt++
                } else {
                    cart.push({
                        name:product.name,
                        price:product.price,
                        qt: 1,
                    })
                }
                product.stock--;
                drawCartItems();
                drawProducts();
            });
        } else {
            addToCartBtn.style.backgroundColor = "grey";
            addToCartBtn.style.cursor = "unset";
        }
        wrapper.appendChild(details);
        wrapper.appendChild(stockInfo);
        wrapper.appendChild(addToCartBtn);
        prodDiv.appendChild(wrapper);
    }
}

</script>
</body>
</html>