Merge pull request #66 from MagisterUnivers/sokolchuk-fav-ingredients

added footer+default text fixes
MagisterUnivers · Apr 5, 2023 · ed22bda · ed22bda
2 parents 00d718f + 46df83b
commit ed22bda
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 23 deletions.
diff --git a/src/js/fav-ingredients.js → src/js/fav_ingredients.js b/src/js/fav-ingredients.js → src/js/fav_ingredients.js
@@ -1,17 +1,28 @@
-// import './add-remove-fav';
 import { LEARN_MORE_BTN, REMOVE_BTN } from './constants.js';
 import { getIngredientData, modalIngredients } from './modal-ingredients';
+import { Notify } from 'notiflix/build/notiflix-notify-aio';
+import 'notiflix/dist/notiflix-3.2.6.min.css';
 
 const favoritesList = document.querySelector('.fav-ingredients__list');
+const favorites = JSON.parse(localStorage.getItem('favIngredients')) || [];
+
+function defaultAppearance() {
+  const defaultSection = document.querySelector('.fav-ingredients__default');
+  if (favorites.length) {
+    defaultSection.style.display = 'none';
+  } else {
+    defaultSection.style.display = 'block';
+  }
+}
 
 function renderFavoritesList() {
-  const favorites = JSON.parse(localStorage.getItem('favIngredients')) || [];
   favoritesList.innerHTML = '';
   for (const favorite of favorites) {
+    const strType = favorite.strType || favorite.strIngredient;
     const li = document.createElement('li');
     li.classList.add('fav-ingredients__item');
     li.innerHTML = `<h3 class="fav-ingredient__name">${favorite.strIngredient}</h3>
-    <h4 class="fav-ingredient__type">${favorite.strType}</h4>
+    <h4 class="fav-ingredient__type">${strType}</h4>
     <div class="fav-ingredient__btn">
       ${LEARN_MORE_BTN}${REMOVE_BTN}
     </div>`;
@@ -29,33 +40,27 @@ function renderFavoritesList() {
         Notify.info(
           `${favorite.strIngredient} was removed from your favorites🙄!`
         );
-        checkFooter();
+        defaultAppearance();
+        handleWrapper();
       }
     });
     favoritesList.appendChild(li);
   }
 
-  // function checkFooter() {
-  //   const footer = document.querySelector('.footer');
-  //   const defaultText = document.querySelector('.fav-ingredients__default');
-  //   if (!favorites.length) {
-  //     footer.style.position = 'absolute';
-  //     footer.style.bottom = '0';
-  //     footer.style.width = '100%';
-  //     defaultText.style.display = 'block';
-  //   } else if (favorites.length < 4) {
-  //     footer.style.position = 'absolute';
-  //     footer.style.bottom = '0';
-  //     footer.style.width = '100%';
-  //   } else {
-  //     footer.style.position = 'static';
-  //     defaultText.style.display = 'none';
-  //   }
-  // }
+  defaultAppearance();
+}
 
-  // checkFooter();
+function handleWrapper() {
+  const wrapper = document.querySelector('.fav-ingredients__wrapper');
+  if (favorites.length > 3) {
+    wrapper.style.display = 'none';
+  } else {
+    wrapper.style.display = 'block';
+  }
 }
 
+handleWrapper();
+
 renderFavoritesList();
 
 window.addEventListener('storage', event => {

diff --git a/src/partials/fav_ingredients.html b/src/partials/fav_ingredients.html
@@ -7,7 +7,7 @@
     <title>Favorite ingredients</title>
     <link rel="icon" type="image/x-icon" href="/src/images/favicon.ico" />
     <link rel="stylesheet" href="/src/index.scss" />
-    <script src="/src/js/fav-ingredients.js" type="module"></script>
+    <script src="/src/js/fav_ingredients.js" type="module"></script>
   </head>
   <body>
     <main>
@@ -22,6 +22,7 @@ <h1 class="fav-ingredients__title">Favorite ingredients</h1>
         <div class="wrapper" id="rnd-cocktail">
           <ul class="fav-ingredients__list"></ul>
         </div>
+        <div class="fav-ingredients__wrapper"></div>
       </section>
     </main>
     <include src="./partials/footer.html"></include>

diff --git a/src/sass/components/_fav-ingredients.scss b/src/sass/components/_fav-ingredients.scss
@@ -92,6 +92,18 @@
   line-height: calc(24 / 14);
 }
 
+.fav-ingredients__wrapper {
+  height: 62px;
+
+  @include media-tablet-min(768px) {
+    height: 421px;
+  }
+
+  @include media-desktop-min(1280px) {
+    height: 343px;
+  }
+}
+
 @include media-tablet-min(768px) {
   .fav-ingredients__title {
     font-weight: 700;