Untitled

<!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;
        display: flex;
    }

    .products {
        width: 70vw;
        height: calc(100vh - 12px);
        border: 2px solid black;
        margin: 5px;
        margin-right: 0;
        overflow: auto;
    }

    .cart {
        height: calc(100vh - 12px);
        width: 30vw;
        margin: 5px;
        border: 2px solid black;
        overflow: auto;
    }

    .wrapper, .cart-wrapper {
        background-color: teal;
        border: 3px solid black;
        border-radius: 10px;
        margin: 10px;
        padding: 10px;
    }
    button {
        padding: 5px 10px;
        border: 3px solid black;
        border-radius: 10px;
    }
    </style>
    <div class="products"></div>
    <div class="cart"></div>

<script>
const products = [
    { name: "Apples", price: 1 },
    { name: "Bananas", price: 2 },
    { name: "Oranges", price: 3 },
    { name: "Kiwis", price: 4 },
    { name: "Eggs", price: 5 },
]

let cart = [];
console.log(`${JSON.stringify(cart)}`)

const col1 = document.querySelector(".products");
const col2 = document.querySelector(".cart");

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() {
    console.log("♻️ drawing cart ...")
    col2.innerHTML = ""; // clears the cart
    for (let i = 0; i < cart.length; i++) {

        const cartWrapper = document.createElement("div");
        cartWrapper.classList.add("cart-wrapper");
        const cartDetails = document.createElement("h3");
        const delBtn = document.createElement("button");
        delBtn.textContent = "X";
        cartDetails.textContent = cart[i].name + " x" + cart[i].qt;
        let nameStamp = cart[i].name;

        delBtn.addEventListener("click", function (e) {
            let myName = nameStamp;
            checkNames(cart, myName);
            console.log("=================================================================================");
            console.log(`🔔 myName: ${myName}`);
            console.log(`🔔 checking qt at index: ${foundIndex}`);
            console.log(`🔔 Current cart: ${JSON.stringify(cart)}`)
            if (cart[foundIndex].qt < 2) {
                console.log(`🟥 item ${cart[foundIndex].name} qt is bellow 2.`);
                console.log(`🟥 myName: ${myName}`);
                console.log(`🟥 Before splice: ${JSON.stringify(cart)}`);
                cart.splice(foundIndex, 1);
                console.log(`🟥 After splice: ${JSON.stringify(cart)}`);
                console.log("=================================================================================");
                // e.target.parentElement.remove(); also works
                drawCartItems();
            } else if (cart[foundIndex].qt > 1) {
                console.log(`🟧 item ${cart[foundIndex].name} qt is above 2. Action: qt--`);
                console.log(`🟧 Before qt-- : ${JSON.stringify(cart)}`);
                cart[foundIndex].qt--
                console.log(`🟧 After qt-- : ${JSON.stringify(cart)}`);
                console.log("=================================================================================");
                drawCartItems()
            } else {
                alert("Critical error: QT else-if ladder failed")
            }
        })
        cartWrapper.appendChild(cartDetails);
        cartWrapper.appendChild(delBtn);
        col2.appendChild(cartWrapper);
    }
}

function drawProducts() {
    for (const product of products) {
        // product is products[i]
        const wrapper = document.createElement("div");
        wrapper.classList.add("wrapper");
        const details = document.createElement("h3");
        details.textContent = product.name + ", $" + product.price;
        const addToCartBtn = document.createElement("button");
        addToCartBtn.textContent = `Add ${product.name} to Cart`;

        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 foundItem
                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) {
                console.log("=================================================================================");
                console.log(`🟦 item ${product.name} is duplicate to ${founditem.name}. Action: qt++`);
                console.log(`🟦 cart before qt++ : ${JSON.stringify(cart)}`);
                // console.log(cart.find(item => item.name === founditem.name) === founditem) // returns true because same thing
                founditem.qt++
                console.log(`🟦 cart after qt++ : ${JSON.stringify(cart)}`);
                console.log("=================================================================================");
            } else {
                console.log("=================================================================================");
                console.log(`🟩 No duplicates found. Adding new item to cart: ${product.name}`)
                cart.push({
                    name:product.name,
                    price:product.price,
                    qt: 1,
                })
                console.log(`🟩 new item added! cart:`);
                console.log(`🟩 ${JSON.stringify(cart)}`);
                console.log("=================================================================================");
            }
            drawCartItems()
        });

    wrapper.appendChild(details);
    wrapper.appendChild(addToCartBtn);
    col1.appendChild(wrapper);
    }
}

drawProducts()
drawCartItems()


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