adding products to cart

Lescano713 · Aug 13, 2024 · b22a31e · b22a31e
1 parent a8e3044
commit b22a31e
Showing 1 changed file with 63 additions and 8 deletions.
diff --git 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