diff --git a/script.js b/script.js index 03e6452..2fceffe 100644 --- a/script.js +++ b/script.js @@ -17,13 +17,13 @@ const icons ={ const productsInCart = []; -uploadingCart(); +// uploadingCart(); + function generateId(div){ document.querySelectorAll('') } -// consoles() function uploadProducts(products){ // console.log(products); products.forEach(product => { @@ -40,7 +40,8 @@ function uploadProducts(products){ button.appendChild(icon); button.innerHTML += " Add to cart"; button.addEventListener('click',e =>{ - buttonAddRemove(button,icon,product.name,product.price)}); + buttonAddRemove(button,product.name,product.price) + img.style.border = '3px solid red';}); const small = document.createElement('small'); small.textContent = product.category; @@ -56,76 +57,82 @@ function uploadProducts(products){ }); } -function takeOffProducts(id){ - const product = document.querySelector('#'+ id); - +function takeOffProducts(name,cost){ + // const product = document.querySelector('#'+ id); + productsInCart.find } function addElements(id){ } + + +function getObjects(name, cost){ + const product ={ + pName: name, + pCost: cost, + } + productsInCart.push(product); + uploadingCart(); + orderTotal(product.pCost); + console.log(productsInCart); +} + function uploadingCart(){ - // ordersContainer.innerHTML = ""; + ordersContainer.innerHTML = ""; + document.querySelector('section.order-section').style.background = "none"; productsInCart.forEach(product =>{ const div = document.createElement('div'); div.classList.add('product-in-car'); - const h2 = document.createElement('h2'); - h2.textContent = product.name; + const h4 = document.createElement('h3'); + h4.textContent = product.pName; const pAmount = document.createElement('p'); const iconRemove = document.createElement('img'); iconRemove.src = icons.removeItem; const pPrice = document.createElement('p'); - pPrice.textContent = document.price; + pPrice.textContent = product.pCost; const ptotalAmount = document.createElement('p'); - div.append(h2,pAmount,pPrice,ptotalAmount,iconRemove); + div.append(h4,pAmount,pPrice,ptotalAmount,iconRemove); ordersContainer.appendChild(div); }) } -function getObjects(name, cost){ - const product ={ - pName: name, - pCost: cost, - } - productsInCart.push(product); - console.log(productsInCart); +function orderTotal(totalAmount){ + totalAmount = 1; + const div = document.createElement('div'); + const p = document.createElement('p'); + p.textContent = "Order Total"; + const h4 = document.createElement('h4'); + h4.textContent = totalAmount + const button = document.createElement('button'); + button.textContent = "Confirm Order"; + div.append(p,h4,button); + ordersContainer.appendChild(div); } -function buttonAddRemove(button,img,name,cost){ - // const productContainer = document.querySelectorAll('div.product-container'); - - // const buttons = productContainer.querySelectorAll('buttons'); - - // buttons.forEach(button=>{ - button.innerHTML = ""; - button.classList.add('buttonAdd'); - // }) +function buttonAddRemove(button,name,cost){ + button.innerHTML = ""; + button.classList.add('buttonAdd'); // console.log(e.target) let amount = 1; const iconPlus = document.createElement('img'); iconPlus.addEventListener('click', e => getObjects(name,cost), console.log(amount+1)); + iconPlus.src = icons.incrementQuantity; + const iconMinus = document.createElement('img'); + iconMinus.addEventListener('click', takeOffProducts(name,cost)); iconMinus.src = icons.decrementQuantity; // button.innerHTML = `${iconMinus} ${amount} ${iconPlus}`; button.appendChild(iconMinus); button.innerHTML += amount; button.appendChild(iconPlus); - img.style.border = '3px solid red'; } -// function focusDiv(element){ - -// } -// function add(e,a){ -// a++ -// return a -// } - -// function createIcons(icon){ -// const img = document.createElement('img'); -// img.src = icon; -// } + +function suma(cost){ + const numero = parseFloat(cost); +}