add fav and buy buttons to shop cards

HectorVilas · Apr 26, 2023 · a87ffc5 · a87ffc5
1 parent d783a60
commit a87ffc5
Showing 1 changed file with 17 additions and 4 deletions.
diff --git a/modules/pages/shop.js b/modules/pages/shop.js
@@ -56,8 +56,7 @@ function catalog() {
     dropdown.append(option);
   });
 
-  articles.forEach((item, i) => {
-    console.log(item);
+  articles.forEach((item) => {
     const newCard = shopCard(
       item.img,
       item.category,
@@ -87,26 +86,40 @@ function shopCard(imgUrl, category, name, price, amount = 0){
   const categoryPara = document.createElement('p');
   const namePara = document.createElement('p');
   const pricePara = document.createElement('p');
+  const favCheckbox = document.createElement('input');
   const btnDiv = document.createElement('div');
-
+  const btn = document.createElement('button');
+  const btnRemove = document.createElement('button');
+  const btnAdd = document.createElement('button');
 
   img.style.backgroundImage = `url(${imgUrl})`;
   imgHover.style.backgroundImage = `url(${imgUrl})`;
   categoryPara.textContent = category;
   namePara.textContent = name;
   pricePara.textContent = `$${parseFloat(price).toFixed(2)}`;
+  favCheckbox.setAttribute('type', 'checkbox');
+  btn.textContent = 'Add to Cart';
+  btnRemove.textContent = '-';
+  btnAdd.textContent = '+';
 
 
   card.classList.add('shop-card');
+  card.dataset.amount = amount;
+  card.dataset.favorite = false;
   img.classList.add('shop-card-image');
   imgHover.classList.add('shop-card-image-hover');
   categoryPara.classList.add('shop-card-category');
   namePara.classList.add('shop-card-name');
   pricePara.classList.add('shop-card-price');
+  favCheckbox.classList.add('shop-card-fav');
   btnDiv.classList.add('shop-card-button-div');
+  btn.classList.add('shop-card-buy');
+  btnAdd.classList.add('shop-card-add');
+  btnRemove.classList.add('shop-card-remove');
 
+  btnDiv.append(btn, btnRemove, btnAdd);
   img.append(imgHover);
-  card.append(img, categoryPara, namePara, pricePara, btnDiv);
+  card.append(img, categoryPara, namePara, pricePara, btnDiv, favCheckbox);
 
   return card;
 }