add or remove class instead of hardcoded styles

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

Hide file tree

Showing 2 changed files with 21 additions and 12 deletions.
diff --git a/modules/functions.js b/modules/functions.js
@@ -13,11 +13,9 @@ export function addToCart() {
   cartCount.textContent = parseInt(cartCount.textContent) + addSubstract;
 
   if (cartCount.textContent === '0') {
-    cart.style.backgroundImage = 'url(./media/images/icons/cart.png)';
-    cartCount.style.backgroundColor = '#201E1F';
+    cart.classList.remove('has-content');
   } else {
-    cart.style.backgroundImage = 'url(./media/images/icons/cart-active.png)';
-    cartCount.style.backgroundColor = '#1F604A';
+    cart.classList.add('has-content');
   };
   if (newAmount === 0) {
     thisCardMainBtn.textContent = 'Add to Cart';
@@ -36,10 +34,8 @@ export function toggleFavorite() {
   favCount.textContent = parseInt(favCount.textContent) + addSubstract;
 
   if (parseInt(favCount.textContent) === 0) {
-    favCount.style.backgroundColor = '#201E1F';
-    favIcon.style.backgroundImage = 'url(./media/images/icons/favorites.png)';
+    favIcon.classList.remove('has-content');
   } else {
-    favCount.style.backgroundColor = '#1F604A';
-    favIcon.style.backgroundImage = 'url(./media/images/icons/favorites-active.png)';
+    favIcon.classList.add('has-content');
   };
 }
diff --git a/styles/header.css b/styles/header.css
@@ -105,18 +105,31 @@ header {
 
 .nav-favorites-count,
 .nav-cart-count {
+  box-sizing: border-box;
   --size: 16px;
   position: absolute;
   top: -3px;
   right: -4px;
   margin: 0;
+  min-width: var(--size);
+  height: var(--size);
+  padding: 0 2px;
   color: white;
   text-align: center;
   vertical-align: middle;
+  line-height: var(--size);
   font-size: 13px;
-  min-width: var(--size);
-  height: var(--size);
   border-radius: var(--size);
   background-color: var(--color-5);
-  z-index: 10;
-}
+}
+
+.nav-cart.has-content {
+  background-image: url(../media/images/icons/cart-active.png);
+}
+.nav-favorites.has-content {
+  background-image: url(../media/images/icons/favorites-active.png);
+}
+.nav-cart.has-content .nav-cart-count,
+.nav-favorites.has-content .nav-favorites-count {
+  background-color: var(--color-4);
+}