add function to favorite button

HectorVilas · Apr 27, 2023 · 0da4063 · 0da4063
1 parent ef867a3
commit 0da4063
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 1 deletion.
diff --git a/modules/functions.js b/modules/functions.js
@@ -27,3 +27,19 @@ export function addToCart() {
     thisCardMainBtn.setAttribute('disabled', true);
   }
 }
+
+export function toggleFavorite() {
+  const favIcon = document.querySelector('.nav-favorites');
+  const favCount = document.querySelector('.nav-favorites-count');
+  const addSubstract = this.checked ? 1 : -1;
+
+  favCount.textContent = parseInt(favCount.textContent) + addSubstract;
+
+  if (parseInt(favCount.textContent) === 0) {
+    favCount.style.backgroundColor = '#201E1F';
+    favIcon.style.backgroundImage = 'url(./media/images/icons/favorites.png)';
+  } else {
+    favCount.style.backgroundColor = '#1F604A';
+    favIcon.style.backgroundImage = 'url(./media/images/icons/favorites-active.png)';
+  };
+}
diff --git a/modules/shopCard.js b/modules/shopCard.js
@@ -1,4 +1,4 @@
-import { addToCart } from "./functions.js";
+import { addToCart, toggleFavorite } from "./functions.js";
 
 export default function shopCard(id, imgUrl, category, name, price, amount = 0){
   const card = document.createElement('div');
@@ -45,6 +45,7 @@ export default function shopCard(id, imgUrl, category, name, price, amount = 0){
   [btn, btnAdd, btnRemove].forEach((button) => {
     button.addEventListener('click', addToCart);
   });
+  favCheckbox.addEventListener('click', toggleFavorite);
 
   btnDiv.append(btn, btnRemove, btnAdd);
   img.append(imgHover);