//this code writen from toturial for learning purposes i'dont own it please see toturial at https://youtu.be/90PgFUPIybY (function() { "use strict"; const PRODUCTS = "http://dl.dropboxusercontent.com/s/o0azg2mu1gdyo52/products.json?dl=0"; const cartBtn = document.querySelector(".cart-btn"); const closeCartBtn = document.querySelector(".close-cart"); const clearCartBtn = document.querySelector(".clear-cart"); const cartDOM = document.querySelector(".cart"); const cartOverlay = document.querySelector(".cart-overlay"); const cartItems = document.querySelector(".cart-items"); const cartTotal = document.querySelector(".cart-total"); const cartContent = document.querySelector(".cart-content"); const productsDOM = document.querySelector(".products-center"); // cart let cart = []; let buttonsDOM = []; class Products { async getProducts() { try { let result = await fetch(PRODUCTS); let data = await result.json(); let products = data.items; products = products.map(item => { const { title, price } = item.fields; const { id } = item.sys; const image = item.fields.image.fields.file.url; return { title, price, id, image }; }); return products; } catch (error) { console.log(error); } } } class UI { displayProducts(products) { let result = ""; products.forEach(product => { result += `

${product.title}

${product.price}€

`; }); productsDOM.innerHTML = result; } getBagButtons() { const btns = [...document.querySelectorAll(".bag-btn")]; buttonsDOM = btns; btns.forEach(btn => { let id = btn.dataset.id; let inCart = cart.find(item => item.id === id); if (inCart) { btn.innerText = "In cart"; btn.disabled = true; } btn.addEventListener("click", e => { e.target.innerText = "In Cart"; e.target.disabled = true; let cartItem = { ...Storage.getProduct(id), amount: 1 }; cart = [...cart, cartItem]; Storage.saveCart(cart); this.setCartValues(cart); this.addCartItem(cartItem); this.showCart(); }); }); } setCartValues(cart) { let tempTotal = 0; let itemsTotal = 0; cart.map(item => { tempTotal += item.price * item.amount; itemsTotal += item.amount; }); cartTotal.innerText = parseFloat(tempTotal.toFixed(2)); cartItems.innerText = itemsTotal; } addCartItem(item) { const div = document.createElement("div"); div.classList.add("cart-item"); div.innerHTML = ` product

${item.title}

${item.price}

remove

${item.amount}

`; cartContent.appendChild(div); } showCart() { cartOverlay.classList.add("transparentBcg"); cartDOM.classList.add("showCart"); } hideCart() { cartOverlay.classList.remove("transparentBcg"); cartDOM.classList.remove("showCart"); } cartLogic() { clearCartBtn.addEventListener("click", () => { this.clearCart(); }); cartContent.addEventListener("click", e => { if (e.target.classList.contains("remove-item")) { let removeItem = e.target; let id = removeItem.dataset.id; cartContent.removeChild(removeItem.parentElement.parentElement); this.removeItem(id); } else if (e.target.classList.contains("fa-chevron-up")) { let addAmount = e.target; let id = addAmount.dataset.id; let tempItem = cart.find(item => item.id === id); tempItem.amount = tempItem.amount + 1; Storage.saveCart(cart); this.setCartValues(cart); addAmount.nextElementSibling.innerText = tempItem.amount; } else if (e.target.classList.contains("fa-chevron-down")) { let lowerAmount = e.target; let id = lowerAmount.dataset.id; let tempItem = cart.find(item => item.id === id); tempItem.amount = tempItem.amount - 1; if (tempItem.amount > 0) { Storage.saveCart(cart); this.setCartValues(cart); lowerAmount.previousElementSibling.innerText = tempItem.amount; } else { cartContent.removeChild(lowerAmount.parentElement.parentElement); this.removeItem(id); } } }); } clearCart() { let cartItems = cart.map(item => item.id); cartItems.forEach(id => this.removeItem(id)); while (cartContent.children.length > 0) { cartContent.removeChild(cartContent.children[0]); } this.hideCart(); } removeItem(id) { cart = cart.filter(item => item.id !== id); this.setCartValues(cart); Storage.saveCart(cart); let button = this.getSingleButton(id); button.disabled = false; button.innerHTML = `add to cart`; } getSingleButton(id) { return buttonsDOM.find(btn => btn.dataset.id === id); } setupAPP() { cart = Storage.getCart(); this.setCartValues(cart); this.populateCart(cart); cartBtn.addEventListener("click", this.showCart); closeCartBtn.addEventListener("click", this.hideCart); } populateCart(cart) { cart.forEach(item => this.addCartItem(item)); } } class Storage { static saveProducts(products) { localStorage.setItem("products", JSON.stringify(products)); } static getProduct(id) { let products = JSON.parse(localStorage.getItem("products")); return products.find(product => product.id === id); } static saveCart(cart) { localStorage.setItem("cart", JSON.stringify(cart)); } static getCart() { return localStorage.getItem("cart") ? JSON.parse(localStorage.getItem("cart")) : []; } } document.addEventListener("DOMContentLoaded", () => { const ui = new UI(); const products = new Products(); ui.setupAPP(); products .getProducts() .then(products => { ui.displayProducts(products); Storage.saveProducts(products); }) .then(() => { ui.getBagButtons(); ui.cartLogic(); }); }); })();

Shopping Cart (from toturial https://youtu.be/90PgFUPIybY)