Towl

supermarket baskets backup

Oct 23rd, 2021
1,001
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. <body>
  10. <style>
  11. @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;700;900&display=swap');
  12.  
  13. * {
  14.     margin: 0;
  15.     padding: 0;
  16.     box-sizing: border-box;
  17. }
  18.  
  19. body {
  20.     font-family: poppins;
  21.     height: 100vh;
  22.     display: grid;
  23.     overflow: hidden;
  24.     padding: 15px;
  25.     grid-template-columns: 7fr 3fr;
  26.     grid-template-rows: 9fr 1fr;
  27.     grid-template-areas:
  28.         "col1 col2"
  29.         "lfooter rfooter";
  30.     gap: 15px;
  31.     background-color:rgb(173, 173, 173);
  32.     user-select: none;
  33. }
  34.  
  35. .products {
  36.     height: 100%;
  37.     width: 100%;
  38.     grid-area: col1;
  39.     border: 3px solid black;
  40.     padding: 15px;
  41.     overflow: auto;
  42.     border-radius: 10px;
  43.     background-color: rgb(224, 224, 224);
  44. }
  45.  
  46. .cart {
  47.     height: 100%;
  48.     width: 100%;
  49.     grid-area: col2;
  50.     padding: 15px;
  51.     border: 3px solid black;
  52.     overflow: auto;
  53.     border-radius: 10px;
  54.     background-color: rgb(224, 224, 224);
  55. }
  56.  
  57. .wrapper, .cart-wrapper {
  58.     background-color: rgb(128, 192, 192);
  59.     border: 3px solid black;
  60.     border-radius: 10px;
  61.     margin: 10px;
  62.     padding: 10px;
  63.     overflow: hidden;
  64. }
  65.  
  66. button {
  67.     padding: 5px 10px;
  68.     border: 3px solid black;
  69.     border-radius: 10px;
  70.     cursor: pointer;
  71. }
  72.  
  73. button:hover {
  74.     background-color:azure;
  75. }
  76.  
  77. .lfooter, .rfooter {
  78.     background-color: rgb(224, 224, 224);
  79.     height: 100%;
  80.     width: 100%;
  81.     border: 3px solid black;
  82.     padding: 10px 25px;
  83.     border-radius: 10px;
  84.     overflow: hidden;
  85.     display: flex;
  86.     align-items: center;
  87.     justify-content: space-between;
  88. }
  89.  
  90. .lfooter {
  91.     grid-area: lfooter;
  92. }
  93.  
  94. .rfooter {
  95.     grid-area: rfooter;
  96. }
  97.  
  98. .green {
  99.     color: green;
  100. }
  101.  
  102. .blue {
  103.     color: darkblue;
  104. }
  105.  
  106. .red {
  107.     color: rgb(223, 0, 0);
  108. }
  109.  
  110. .delBtn {
  111.     font-weight: 700;
  112.     height: max-content;
  113.     width: max-content;
  114.     padding: 6px 10px;
  115. }
  116.  
  117. .delBtn:hover {
  118.     background-color: rgb(223, 113, 113);
  119. }
  120.  
  121. .checkoutBtn {
  122.     font-weight: 700;
  123. }
  124.  
  125. .small {
  126.     font-weight: 400;
  127.     font-size: 12px;
  128. }
  129.  
  130. .darkOverlay {
  131.     background-color: rgba(0, 0, 0, 0.473);
  132.     position: fixed;
  133.     top: 0;
  134.     right: 0;
  135.     bottom: 0;
  136.     left: 0;
  137.     display: none;
  138.     place-content: center;
  139.     z-index: 10;
  140. }
  141.  
  142. .popupContainer {
  143.     min-height: 250px;
  144.     min-width: 450px;
  145.     padding: 20px;
  146.     border: 3px solid black;
  147.     overflow: auto;
  148.     border-radius: 10px;
  149.     background-color: rgb(224, 224, 224);
  150. }
  151.  
  152. .row1 {
  153.     display: flex;
  154.     justify-content: space-between;
  155.     margin-bottom: 20px;
  156. }
  157.  
  158. .row2 {
  159.     width: 75%;
  160.     margin-bottom: 25px;
  161. }
  162.  
  163. .row2 > div {
  164.     display: flex;
  165.     justify-content: space-between;
  166.     margin-bottom: 5px;
  167. }
  168.  
  169. .row2 + div{
  170.     display: flex;
  171.     justify-content: space-between;
  172. }
  173. </style>
  174.  
  175.  
  176.  
  177.  
  178.  
  179.  
  180.  
  181.  
  182.  
  183.  
  184.  
  185. <div class="products"></div>
  186. <div class="cart"></div>
  187.  
  188. <div class="lfooter">
  189.     <button class="addProductBtn">Add products to shop</button>
  190.     <button class="addToAllStocksBtn">+1 stock to all products</button>
  191. </div>
  192.  
  193. <div class="rfooter">
  194.     <h3 class="totalPriceElement"></h3>
  195.     <button class=checkoutBtn>Checkout</button>
  196. </div>
  197.  
  198.  
  199. <div class="darkOverlay">    
  200.     <div class="popupContainer">
  201.         <div class="row1">
  202.             <h1>Add Product</h1>
  203.             <button id="closePopupBtn" class="delBtn">X</button>
  204.         </div>
  205.         <div class="row2">
  206.             <div>
  207.                 <h4>Product Name:</h4>
  208.                 <input type="text" id="nameInput">
  209.             </div>
  210.             <div>
  211.                 <h4>Product Price:</h4>
  212.                 <input type="text" id="priceInput">
  213.             </div>
  214.             <div>
  215.                 <h4>Product Stock:</h4>
  216.                 <input type="text" id="stockInput">
  217.             </div>
  218.         </div>
  219.         <div>
  220.             <button id="submit">Submit</button>
  221.             <p class="information"></p>
  222.         </div>
  223.     </div>
  224. </div>
  225.    
  226.  
  227.  
  228.  
  229.  
  230.  
  231.  
  232.  
  233.  
  234.  
  235.  
  236.  
  237.  
  238.  
  239.  
  240.  
  241.  
  242. <script>
  243. // array with objects inside
  244. const products = [
  245.     { name: "Apples", price: 1, stock: 10 },
  246.     { name: "Bananas", price: 2, stock: 7  },
  247.     { name: "Oranges", price: 3, stock: 5  },
  248.     { name: "Kiwis", price: 4, stock: 10  },
  249. ]
  250.  
  251. let cart = [];
  252. const prodDiv = document.querySelector(".products");
  253. const cartDiv = document.querySelector(".cart");
  254. const rfooter = document.querySelector(".rfooter");
  255. const totalPriceElement = document.querySelector(".totalPriceElement");
  256. const checkoutBtn = document.querySelector(".checkoutBtn");
  257. const addToAllStocksBtn = document.querySelector(".addToAllStocksBtn");
  258. const addProductBtn = document.querySelector(".addProductBtn");
  259. const closePopupBtn = document.querySelector("#closePopupBtn");
  260. const darkOverlay = document.querySelector(".darkOverlay");
  261. const nameInput = document.querySelector("#nameInput");
  262. const priceInput = document.querySelector("#priceInput");
  263. const stockInput = document.querySelector("#stockInput");
  264. const submit = document.querySelector("#submit");
  265. const information = document.querySelector(".information");
  266.  
  267. drawProducts()
  268. drawCartItems()
  269.  
  270. checkoutBtn.addEventListener("click", function() {
  271.     for (const item of cart) {
  272.         item.qt = "";
  273.     }
  274.     drawCartItems();
  275. })
  276.  
  277. addToAllStocksBtn.addEventListener("click", function() {
  278.     for (const product of products) {
  279.         product.stock++;
  280.         drawProducts();
  281.     }
  282. })
  283.  
  284. addProductBtn.addEventListener("click", function() {
  285.     darkOverlay.style.display = "grid";
  286.     information.innerHTML = "";
  287.     nameInput.value = "";
  288.     priceInput.value = "";
  289.     stockInput.value = "";
  290. })
  291.  
  292. closePopupBtn.addEventListener("click", function() {
  293.     darkOverlay.style.display = "none";
  294.     information.innerHTML = "";
  295.     nameInput.value = "";
  296.     priceInput.value = "";
  297.     stockInput.value = "";
  298. })
  299.  
  300. // submit button inside popup to add products
  301. submit.addEventListener("click", function() {
  302.     information.innerHTML = "";
  303.     if (nameInput.value.trim() == "") {
  304.         information.innerHTML = `<span class="red">Error: Product name is required.</span>`
  305.         nameInput.focus();
  306.     } else if (checkNames(products, nameInput.value)) { // if the nameInput is an existing product, then proceed into editting mode:
  307.         // Pseudo code of the following if else:
  308.         //🟪 if 1 and 2 empty:
  309.         //🟩     error: you must fill at least one.
  310.         //🟩 else:
  311.         //🟩     if 1 empty:
  312.         //🟩         if 2 is valid:
  313.         //🟩             change
  314.         //🟨             done
  315.         //🟩         else:
  316.         //🟩             error 2 is invalid
  317.         //🟩     else:
  318.         //🟩         if 1 is valid:
  319.         //🟩             if 2 is empty:
  320.         //🟩                 change
  321.         //🟨                 done
  322.         //🟩             else
  323.         //🟩                 if 2 is valid:
  324.         //🟩                     change double
  325.         //🟨                     done double
  326.         //🟩                 else
  327.         //🟩                     error 2 is invalid
  328.         //🟪         else:
  329.         //🟩             error 1 is invalid
  330.  
  331.         if (priceInput.value.trim() == "" && stockInput.value.trim() == "") { // if priceInput AND stockInput are empty: 🟪
  332.            information.innerHTML = `<span class="red">Error: Please fill in price or stock.</span>`
  333.            priceInput.focus();
  334.         } else {
  335.             if (priceInput.value.trim() == "") {
  336.                 if (!isNaN(stockInput.value.trim())) { // if stockInput string is a valid number:
  337.                     information.innerHTML = `<span class="green">✔️ Changed stock of ${products[foundIndex].name} from ${products[foundIndex].stock} to ${stockInput.value}</span>`
  338.                     products[foundIndex].stock = stockInput.value;
  339.                     drawProducts() // 🟨
  340.                 } else {
  341.                     information.innerHTML = `<span class="red">Error: Stock input is not a valid number.</span>`
  342.                     stockInput.focus()
  343.                 }
  344.             } else {
  345.                 if (!isNaN(priceInput.value.trim())) { // if priceInput string is a valid number:
  346.                     if (stockInput.value.trim() == "") { // if stockInput is empty:
  347.                         products[foundIndex].price = priceInput.value;
  348.                         information.innerHTML = `<span class="green">✔️ Changed stock of ${products[foundIndex].name} from ${products[foundIndex].price} to ${priceInput.value}</span>`
  349.                         drawProducts() // 🟨
  350.                     } else {
  351.                         if (!isNaN(stockInput.value.trim())) { // if stockInput string is a valid number:
  352.                             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>`
  353.                             products[foundIndex].price = priceInput.value;
  354.                             products[foundIndex].stock = stockInput.value;
  355.                             drawProducts() // 🟨
  356.                         } else {
  357.                             information.innerHTML = `<span class="red">Error: Stock input is not a valid number.</span>`
  358.                             stockInput.focus()
  359.                         }
  360.                     }
  361.                 } else { // 🟪
  362.                     information.innerHTML = `<span class="red">Error: Price input is not a valid number.</span>`
  363.                     priceInput.focus();
  364.                 }
  365.             }
  366.         }
  367.     } else { // ADDING MODE (above is all editting mode)
  368.         information.innerHTML = `<span class="green">Else</span>`
  369.  
  370.  
  371.  
  372.  
  373.  
  374.  
  375.     }
  376. })
  377.  
  378. let foundIndex = ""
  379. // returns true if personName is in the array which has name properties in it. Also gives the index it was found at.
  380. function checkNames(array, personName) {
  381.     for (let i = 0; i < array.length; i++) {
  382.        if (array[i].name == personName) {
  383.            foundIndex = i
  384.            return true;
  385.        }
  386.    }
  387.    return false
  388. }
  389.  
  390. function drawCartItems() {
  391.    // clear the cart
  392.    cartDiv.innerHTML = "";
  393.    // clear total price
  394.    totalPriceElement.innerHTML = "";
  395.    let totalPrice = 0;
  396.    for (const item of cart) {
  397.        // item is cart[i]
  398.        // if the item quantity is bigger than 0, draw the item. If not then dont draw the item because its quantity is 0.
  399.        if (item.qt > 0) {
  400.             const cartWrapper = document.createElement("div");
  401.             cartWrapper.classList.add("cart-wrapper");
  402.             const cartDetails = document.createElement("h3");
  403.             const delBtn = document.createElement("button");
  404.             delBtn.textContent = "X";
  405.             delBtn.classList.add("delBtn")
  406.             cartDetails.innerHTML = `${item.name} <span class="blue">x${item.qt}</span>`;
  407.             delBtn.addEventListener("click", function (e) {
  408.                 if (item.qt < 2) {
  409.                    item.qt = ""
  410.                    drawCartItems()
  411.                    // add item back to stock
  412.                    for (const product of products) {
  413.                        if (item.name == product.name) {
  414.                            product.stock++
  415.                            drawProducts();
  416.                        }
  417.                    }
  418.                } else if (item.qt > 1) {
  419.                     item.qt--
  420.                     drawCartItems()
  421.                     // add item back to stock
  422.                     for (const product of products) {
  423.                         if (item.name == product.name) {
  424.                             product.stock++
  425.                             drawProducts();
  426.                         }
  427.                     }
  428.                 } else {
  429.                     console.error(`QT has failed the if ladder. Current value: ${item.qt} Cart list: ${JSON.stringify(cart)}`)
  430.                 }
  431.             })
  432.             cartWrapper.appendChild(cartDetails);
  433.             cartWrapper.appendChild(delBtn);
  434.             cartDiv.appendChild(cartWrapper);
  435.         }
  436.         totalPrice = totalPrice + (item.price * item.qt);
  437.     }
  438.     totalPriceElement.innerHTML = `Total Price: <span class="green">$${totalPrice}</span>`
  439. }
  440.  
  441. function drawProducts() {
  442.     // clear the products column
  443.     prodDiv.innerHTML = "";
  444.     for (const product of products) {
  445.         // product is products[i]
  446.         const wrapper = document.createElement("div");
  447.         wrapper.classList.add("wrapper");
  448.         const details = document.createElement("h3");
  449.         //  details.innerHTML = `${product.name} <span class="green">$${product.price}</span><br><span class="small">Stock: <span class="blue">${product.stock}</span></span>`;
  450.         details.innerHTML = `${product.name} <span class="green">$${product.price}</span>`;
  451.         const stockInfo = document.createElement("h6");
  452.         if (product.stock > 0) {
  453.             stockInfo.innerHTML = `Stock: <span class="blue">${product.stock}</span>`;
  454.         } else {
  455.             stockInfo.innerHTML = `<span class="red">Out of stock!</span>`;
  456.         }
  457.         const addToCartBtn = document.createElement("button");
  458.         addToCartBtn.textContent = `Add ${product.name} to Cart`;
  459.        
  460.         if (product.stock > 0) {
  461.             addToCartBtn.addEventListener("click", function () {
  462.                 // The <array>.find(<function>) method returns the value of the first element in an array that returns true (using the function)
  463.                 const founditem = cart.find(function(e) {
  464.                     // return true/false if there are duplicate items
  465.                     // e is cart[i]
  466.                     // foundItem is the cart[e] which has cart[e].name == products[i].name
  467.                     return e.name == product.name
  468.                 })
  469.                 // if founditem is not empty (true) then there was duplicate found
  470.                 // else if founditems is empty/undefined (false) then it will be the first of its kind added to the array.
  471.                 if (founditem) {
  472.                     founditem.qt++
  473.                 } else {
  474.                     cart.push({
  475.                         name:product.name,
  476.                         price:product.price,
  477.                         qt: 1,
  478.                     })
  479.                 }
  480.                 product.stock--;
  481.                 drawCartItems();
  482.                 drawProducts();
  483.             });
  484.         } else {
  485.             addToCartBtn.style.backgroundColor = "grey";
  486.             addToCartBtn.style.cursor = "unset";
  487.         }
  488.         wrapper.appendChild(details);
  489.         wrapper.appendChild(stockInfo);
  490.         wrapper.appendChild(addToCartBtn);
  491.         prodDiv.appendChild(wrapper);
  492.     }
  493. }
  494.  
  495. </script>
  496. </body>
  497. </html>
RAW Paste Data