diff --git a/script.js b/script.js index 3398484..03e6452 100644 --- a/script.js +++ b/script.js @@ -1,9 +1,11 @@ const productsContainer = document.querySelector('#products'); +const ordersContainer = document.querySelector('#orders'); fetch('data.json') .then(res => res.json()) .then(data => uploadProducts(data)); + const icons ={ addToCart:"./assets/images/icon-add-to-cart.svg", decrementQuantity: "./assets/images/icon-decrement-quantity.svg", @@ -13,13 +15,20 @@ const icons ={ neutral: "./assets/images/icon-carbon-neutral.svg", } +const productsInCart = []; +uploadingCart(); +function generateId(div){ + document.querySelectorAll('') +} // consoles() function uploadProducts(products){ + // console.log(products); products.forEach(product => { const div = document.createElement('div'); + div.classList.add('product-container'); const img = document.createElement('img'); img.src = product.image.mobile; @@ -31,8 +40,7 @@ function uploadProducts(products){ button.appendChild(icon); button.innerHTML += " Add to cart"; button.addEventListener('click',e =>{ - - consoles(e,button)}) + buttonAddRemove(button,icon,product.name,product.price)}); const small = document.createElement('small'); small.textContent = product.category; @@ -48,23 +56,70 @@ function uploadProducts(products){ }); } +function takeOffProducts(id){ + const product = document.querySelector('#'+ id); + +} + +function addElements(id){ + +} + +function uploadingCart(){ + // ordersContainer.innerHTML = ""; + productsInCart.forEach(product =>{ + const div = document.createElement('div'); + div.classList.add('product-in-car'); + const h2 = document.createElement('h2'); + h2.textContent = product.name; + const pAmount = document.createElement('p'); + const iconRemove = document.createElement('img'); + iconRemove.src = icons.removeItem; + const pPrice = document.createElement('p'); + pPrice.textContent = document.price; + const ptotalAmount = document.createElement('p'); + + div.append(h2,pAmount,pPrice,ptotalAmount,iconRemove); + ordersContainer.appendChild(div); + + }) +} + +function getObjects(name, cost){ + const product ={ + pName: name, + pCost: cost, + } + productsInCart.push(product); + console.log(productsInCart); +} + +function buttonAddRemove(button,img,name,cost){ + // const productContainer = document.querySelectorAll('div.product-container'); + // const buttons = productContainer.querySelectorAll('buttons'); -function consoles(e, button){ + // buttons.forEach(button=>{ + button.innerHTML = ""; + button.classList.add('buttonAdd'); + // }) // console.log(e.target) - let a = 1; - button.innerHTML = ""; - button.classList.add('buttonAdd'); + let amount = 1; + const iconPlus = document.createElement('img'); - iconPlus.addEventListener('click', e => a++) + iconPlus.addEventListener('click', e => getObjects(name,cost), console.log(amount+1)); iconPlus.src = icons.incrementQuantity; const iconMinus = document.createElement('img'); iconMinus.src = icons.decrementQuantity; + // button.innerHTML = `${iconMinus} ${amount} ${iconPlus}`; button.appendChild(iconMinus); - button.innerHTML += a; + button.innerHTML += amount; button.appendChild(iconPlus); + img.style.border = '3px solid red'; } +// function focusDiv(element){ +// } // function add(e,a){ // a++ // return a