Towl

Untitled

Oct 25th, 2021
497
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Document</title>
  8. </head>
  9.  
  10. <body>
  11.     <style>
  12.     @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700;900&display=swap');
  13.    
  14.     * {
  15.         margin: 0;
  16.         padding: 0;
  17.         box-sizing: border-box;
  18.     }
  19.    
  20.     body {
  21.         font-family: poppins;
  22.         display: flex;
  23.     }
  24.    
  25.     .products {
  26.         width: 70vw;
  27.         height: calc(100vh - 12px);
  28.         border: 2px solid black;
  29.         margin: 5px;
  30.         margin-right: 0;
  31.         overflow: auto;
  32.     }
  33.    
  34.     .cart {
  35.         height: calc(100vh - 12px);
  36.         width: 30vw;
  37.         margin: 5px;
  38.         border: 2px solid black;
  39.         overflow: auto;
  40.     }
  41.    
  42.     .wrapper, .cart-wrapper {
  43.         background-color: teal;
  44.         border: 3px solid black;
  45.         border-radius: 10px;
  46.         margin: 10px;
  47.         padding: 10px;
  48.     }
  49.     button {
  50.         padding: 5px 10px;
  51.         border: 3px solid black;
  52.         border-radius: 10px;
  53.     }
  54.     </style>
  55.     <div class="products"></div>
  56.     <div class="cart"></div>
  57.  
  58. <script>
  59. const products = [
  60.     { name: "Apples", price: 1 },
  61.     { name: "Bananas", price: 2 },
  62.     { name: "Oranges", price: 3 },
  63.     { name: "Kiwis", price: 4 },
  64.     { name: "Eggs", price: 5 },
  65. ]
  66.  
  67. let cart = [];
  68. console.log(`${JSON.stringify(cart)}`)
  69.  
  70. const col1 = document.querySelector(".products");
  71. const col2 = document.querySelector(".cart");
  72.  
  73. let foundIndex = ""
  74. // returns true if personName is in the array which has name properties in it. Also gives the index it was found at.
  75. function checkNames(array, personName) {
  76.     for (let i = 0; i < array.length; i++) {
  77.        if (array[i].name == personName) {
  78.            foundIndex = i
  79.            return true;
  80.        }
  81.    }
  82.    return false
  83. }
  84.  
  85. function drawCartItems() {
  86.    console.log("♻️ drawing cart ...")
  87.    col2.innerHTML = ""; // clears the cart
  88.    for (let i = 0; i < cart.length; i++) {
  89.  
  90.        const cartWrapper = document.createElement("div");
  91.        cartWrapper.classList.add("cart-wrapper");
  92.        const cartDetails = document.createElement("h3");
  93.        const delBtn = document.createElement("button");
  94.        delBtn.textContent = "X";
  95.        cartDetails.textContent = cart[i].name + " x" + cart[i].qt;
  96.        let nameStamp = cart[i].name;
  97.  
  98.        delBtn.addEventListener("click", function (e) {
  99.            let myName = nameStamp;
  100.            checkNames(cart, myName);
  101.            console.log("=================================================================================");
  102.            console.log(`🔔 myName: ${myName}`);
  103.            console.log(`🔔 checking qt at index: ${foundIndex}`);
  104.            console.log(`🔔 Current cart: ${JSON.stringify(cart)}`)
  105.            if (cart[foundIndex].qt < 2) {
  106.                console.log(`🟥 item ${cart[foundIndex].name} qt is bellow 2.`);
  107.                console.log(`🟥 myName: ${myName}`);
  108.                console.log(`🟥 Before splice: ${JSON.stringify(cart)}`);
  109.                cart.splice(foundIndex, 1);
  110.                console.log(`🟥 After splice: ${JSON.stringify(cart)}`);
  111.                console.log("=================================================================================");
  112.                // e.target.parentElement.remove(); also works
  113.                drawCartItems();
  114.            } else if (cart[foundIndex].qt > 1) {
  115.                 console.log(`🟧 item ${cart[foundIndex].name} qt is above 2. Action: qt--`);
  116.                 console.log(`🟧 Before qt-- : ${JSON.stringify(cart)}`);
  117.                 cart[foundIndex].qt--
  118.                 console.log(`🟧 After qt-- : ${JSON.stringify(cart)}`);
  119.                 console.log("=================================================================================");
  120.                 drawCartItems()
  121.             } else {
  122.                 alert("Critical error: QT else-if ladder failed")
  123.             }
  124.         })
  125.         cartWrapper.appendChild(cartDetails);
  126.         cartWrapper.appendChild(delBtn);
  127.         col2.appendChild(cartWrapper);
  128.     }
  129. }
  130.  
  131. function drawProducts() {
  132.     for (const product of products) {
  133.         // product is products[i]
  134.         const wrapper = document.createElement("div");
  135.         wrapper.classList.add("wrapper");
  136.         const details = document.createElement("h3");
  137.         details.textContent = product.name + ", $" + product.price;
  138.         const addToCartBtn = document.createElement("button");
  139.         addToCartBtn.textContent = `Add ${product.name} to Cart`;
  140.  
  141.         addToCartBtn.addEventListener("click", function () {
  142.             // The <array>.find(<function>) method returns the value of the first element in an array that returns true (using the function)
  143.             const founditem = cart.find(function(e) {
  144.                 // return true/false if there are duplicate items
  145.                 // e is foundItem
  146.                 return e.name == product.name
  147.             })
  148.             // if founditem is not empty (true) then there was duplicate found
  149.             // else if founditems is empty/undefined (false) then it will be the first of its kind added to the array.
  150.             if (founditem) {
  151.                 console.log("=================================================================================");
  152.                 console.log(`🟦 item ${product.name} is duplicate to ${founditem.name}. Action: qt++`);
  153.                 console.log(`🟦 cart before qt++ : ${JSON.stringify(cart)}`);
  154.                 // console.log(cart.find(item => item.name === founditem.name) === founditem) // returns true because same thing
  155.                 founditem.qt++
  156.                 console.log(`🟦 cart after qt++ : ${JSON.stringify(cart)}`);
  157.                 console.log("=================================================================================");
  158.             } else {
  159.                 console.log("=================================================================================");
  160.                 console.log(`🟩 No duplicates found. Adding new item to cart: ${product.name}`)
  161.                 cart.push({
  162.                     name:product.name,
  163.                     price:product.price,
  164.                     qt: 1,
  165.                 })
  166.                 console.log(`🟩 new item added! cart:`);
  167.                 console.log(`🟩 ${JSON.stringify(cart)}`);
  168.                 console.log("=================================================================================");
  169.             }
  170.             drawCartItems()
  171.         });
  172.  
  173.     wrapper.appendChild(details);
  174.     wrapper.appendChild(addToCartBtn);
  175.     col1.appendChild(wrapper);
  176.     }
  177. }
  178.  
  179. drawProducts()
  180. drawCartItems()
  181.  
  182.  
  183. </script>
  184. </body>
  185. </html>
RAW Paste Data