Feat(JS) Added local storage

src/favorites.html

@@ -30,6 +30,8 @@
       <load ="partials/09-loader.html" />
     </footer>
 
-    <script type="module" src="./main.js"></script>
+    <script type="module" src="./js/10-favorites.js"></script>
+    <script type="module" src="./js/14-added-local.js"></script>
+    <script type="module" src="./js/15-remove-local.js"></script>
   </body>
 </html>

src/js/05-modal-exercises.js

@@ -161,7 +161,7 @@ function createMarkup({
         </div>
 
       <div class="modal-exercises__btn-container">
-        <button class="modal-exercises__btn-favorites modal-exercises__btn">
+        <button class="modal-exercises__btn-favorites modal-exercises__btn" data-id="${_id}">
             Add to favorites
             <svg class="btn-favorites__icon">
               <use href="./img/sprite.svg#icon-favorites"></use>

src/js/10-favorites.js

@@ -1 +1,34 @@
+import APIService from './00-api';
+const apiService = new APIService();
 
+const modalExercises = document.querySelector('.modal-exercises');
+
+modalExercises.addEventListener('click', onExercisesCardClick);
+
+let array = [];
+
+async function onExercisesCardClick(event) {
+  if (!event.target.closest('.modal-exercises__btn-favorites')) {
+    return;
+  }
+
+  try {
+    const exerciseID = event.target
+      .closest('.modal-exercises__btn-favorites')
+      .getAttribute('data-id');
+
+    const exerciseData = await apiService.getExercisesById(exerciseID);
+
+    const local = JSON.parse(localStorage.getItem('exerciseData'));
+
+    if (local?.some(item => item._id === exerciseData._id)) {
+      return;
+    } else {
+      array.push(exerciseData);
+    }
+
+    localStorage.setItem('exerciseData', JSON.stringify(array));
+  } catch (error) {
+    console.log(error);
+  }
+}

src/js/12-exercises.js

@@ -10,7 +10,6 @@ async function onCardClick(event) {
     return;
   }
   const item = event.target.closest('.filters__item');
-  console.log(item.lastElementChild);
 
   let filter = item.lastElementChild.children[0].innerText
     .toLowerCase()

src/js/14-added-local.js

@@ -0,0 +1,51 @@
+import icons from '../img/sprite.svg';
+
+const localFavorite = document.querySelector('.favorites__list');
+const buttonFavorite = document.getElementById('favoritesButton');
+
+buttonFavorite.addEventListener('click', renderFavorite());
+
+function renderFavorite() {
+  const local = JSON.parse(localStorage.getItem('exerciseData'));
+  if (local === null) {
+    return;
+  } else {
+    localFavorite.innerHTML = '';
+
+    const markup = local
+      .map(({ _id, name, burnedCalories, bodyPart, target }) => {
+        return `
+      <li class="filters__item-card">
+        <div class="card__wrap">
+          <div class="card__block-btn">
+              <p class="card__badge">Workout</p>
+              <button class="card__btn js-remove-btn" data-id="${_id}" type="button">Remove
+                <svg class="card__btn-arrow" width="16" height="16">
+                  <use href="${icons}#icon-arrow-menu-mobile"></use>
+                </svg>
+              </button>
+              <button class="card__btn" data-id="${_id}" type="button">Start
+                <svg class="card__btn-arrow" width="16" height="16">
+                  <use href="${icons}#icon-arrow-menu-mobile"></use>
+                </svg>
+              </button>
+            </div>
+              <div class="card__wrap-title">
+                <svg class="card__title-svg" width="24" height="24">
+                  <use href="${icons}#icon-running-stick-figure"></use>
+                </svg>
+                <h2 class="card__title">${name}</h2>
+              </div>
+              <div class="card__block-info">
+                <p class="card__text-info"><span>Burned calories:</span>${burnedCalories}</p>
+                <p class="card__text-info"><span>Body part:</span>${bodyPart}</p>
+                <p class="card__text-info"><span>Target:</span>${target}</p>
+              </div>
+        </div>
+      </li>`;
+      })
+      .join('');
+
+    localFavorite.insertAdjacentHTML('beforeend', markup);
+  }
+}

src/js/15-remove-local.js

@@ -0,0 +1,65 @@
+const localFavorite = document.querySelector('.favorites__list');
+
+localFavorite.addEventListener('click', removeElement);
+
+function removeElement(event) {
+  if (!event.target.closest('.js-remove-btn')) {
+    return;
+  }
+
+  const exerciseId = event.target
+    .closest('.js-remove-btn')
+    .getAttribute('data-id');
+
+  const local = JSON.parse(localStorage.getItem('exerciseData'));
+
+  const newLocal = local.filter(item => item._id !== exerciseId);
+
+  localStorage.setItem('exerciseData', JSON.stringify(newLocal));
+
+  createMarkup(newLocal);
+}
+
+function createMarkup(newLocal) {
+  if (newLocal.length === 0) {
+    return;
+  } else {
+    localFavorite.innerHTML = '';
+
+    const markup = newLocal
+      .map(({ _id, name, burnedCalories, bodyPart, target }) => {
+        return `
+      <li class="filters__item-card">
+        <div class="card__wrap">
+          <div class="card__block-btn">
+              <p class="card__badge">Workout</p>
+              <button class="card__btn" id="remove" data-id="${_id}" type="button">Remove
+                <svg class="card__btn-arrow" width="16" height="16">
+                  <use href="${icons}#icon-arrow-menu-mobile"></use>
+                </svg>
+              </button>
+              <button class="card__btn" data-id="${_id}" type="button">Start
+                <svg class="card__btn-arrow" width="16" height="16">
+                  <use href="${icons}#icon-arrow-menu-mobile"></use>
+                </svg>
+              </button>
+            </div>
+              <div class="card__wrap-title">
+                <svg class="card__title-svg" width="24" height="24">
+                  <use href="${icons}#icon-running-stick-figure"></use>
+                </svg>
+                <h2 class="card__title">${name}</h2>
+              </div>
+              <div class="card__block-info">
+                <p class="card__text-info"><span>Burned calories:</span>${burnedCalories}</p>
+                <p class="card__text-info"><span>Body part:</span>${bodyPart}</p>
+                <p class="card__text-info"><span>Target:</span>${target}</p>
+              </div>
+        </div>
+      </li>`;
+      })
+      .join('');
+
+    localFavorite.insertAdjacentHTML('beforeend', markup);
+  }
+}

src/main.js

@@ -11,4 +11,4 @@ import './js/09-loader';
 import './js/10-favorites';
 import './js/11-subscribe';
 import './js/12-exercises';
-import './js/13-hero';
+import './js/13-hero';

src/partials/10-favorites.html

@@ -32,12 +32,13 @@ <h3 class="white-card__headline">10 mins</h3>
       </div>
 
       <div class="favorites__container">
-        <p class="favorites__empty">
-          It appears that you haven't added any exercises to your favorites yet.
-          To get started, you can add exercises that you like to your favorites
-          for easier access in the future.
-        </p>
-        <ul class="favorites__list"></ul>
+        <ul class="favorites__list">
+          <li class="favorites__empty">
+            It appears that you haven't added any exercises to your favorites
+            yet. To get started, you can add exercises that you like to your
+            favorites for easier access in the future.
+          </li>
+        </ul>
       </div>
     </div>
   </div>