Merge pull request #124 from konstantin-it-lysenko/Add-Timer

Timer-Favourites-Anatolii
konstantin-it-lysenko · Oct 27, 2023 · f45bd8e · f45bd8e
2 parents 03213aa + eb37e56
commit f45bd8e
Show file tree

Hide file tree

Showing 6 changed files with 192 additions and 118 deletions.
diff --git a/src/css/favourites.css b/src/css/favourites.css
@@ -67,6 +67,7 @@ body {
 }
 /**                          dailynorm */
 .favor-dailynorm {
+  position: relative;
   border-radius: 20px;
   background-color: #fff;
   padding: 20px;
@@ -83,6 +84,36 @@ body {
 .favor-dailynorm p {
   color: rgba(36, 36, 36, 0.6);
 }
+/**                          timer */
+.favor-dailynorm::before {
+  content: 'Want to start training?';
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: var(--primary-black-color);
+  font-size: 14px;
+  color: var(--primary-white-color);
+  padding-left: 10px;
+  font-size: 16px;
+  opacity: 0;
+  transition: opacity var(--transition);
+  border-top-left-radius: 20px;
+}
+.favor-dailynorm[data-active='true']::before {
+  content: 'The training has begun!';
+}
+.favor-dailynorm:hover::before,
+.favor-dailynorm:focus::before {
+  opacity: 1;
+}
+.favor-dailynorm svg {
+  transition: transform var(--transition);
+}
+
+.favor-dailynorm:hover svg,
+.favor-dailynorm:focus svg {
+  transform: scale(1.5);
+}
 /**                          img */
 .favor-img-wrap {
   border-radius: 20px;
@@ -103,6 +134,37 @@ body {
 .favor-exercises-list p {
   text-align: center;
 }
+/**                          pagination */
+.pag-list {
+  display: flex;
+  padding-top: 32px;
+  justify-content: center;
+  align-items: center;
+}
+.pag-btn {
+  width: 22px;
+  height: 32px;
+  text-align: center;
+  background-color: transparent;
+  color: #d4d4d4;
+  transition: color var(--transition);
+}
+.pag-btn-active {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  border: 1px solid var(--primary-black-color);
+  color: var(--primary-black-color);
+  margin: 0 4px;
+}
+.pag-btn:hover,
+.pag-btn:focus {
+  color: var(--primary-black-color);
+}
+.favor-exercises-delbtn:hover svg,
+.favor-exercises-delbtn:focus svg {
+  transform: scale(1.2);
+}
 /**                          exercises-card */
 .favor-exercises-card {
   width: 335px;
@@ -268,6 +330,7 @@ body {
     width: 344px;
     height: 141px;
     margin-bottom: 0;
+    border-radius: 15px;
   }
   .favor-dailynorm h3 {
     font-size: 24px;
@@ -361,36 +424,3 @@ body {
     max-width: 123px;
   }
 }
-
-.pag-list {
-  display: flex;
-  padding-top: 32px;
-  justify-content: center;
-  align-items: center;
-}
-.pag-page {
-}
-.pag-btn {
-  width: 22px;
-  height: 32px;
-  text-align: center;
-  background-color: transparent;
-  color: #d4d4d4;
-  transition: color var(--transition);
-}
-.pag-btn-active {
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  border: 1px solid var(--primary-black-color);
-  color: var(--primary-black-color);
-  margin: 0 4px;
-}
-.pag-btn:hover,
-.pag-btn:focus {
-  color: var(--primary-black-color);
-}
-.favor-exercises-delbtn:hover svg,
-.favor-exercises-delbtn:focus svg {
-  transform: scale(1.2);
-}
diff --git a/src/favorite.js b/src/favorite.js
@@ -5,6 +5,7 @@ import './js/burger-menu';
 // import './js/categories';
 // import './js/footer';
 import './js/favourites';
+import './js/favorites-timer';
 import './js/modal-exercise';
 import './js/modal-form';
 // import './js/modal-team';

diff --git a/src/js/favorites-timer.js b/src/js/favorites-timer.js
@@ -0,0 +1,44 @@
+document.addEventListener('DOMContentLoaded', function () {
+  const timerValue = document.getElementById('timerValue');
+  const startListItem = document.getElementById('startTimerListItem');
+  const timerStart = document.querySelector('.favor-dailynorm-icon');
+  let timerInterval;
+  let timerActive = false;
+
+  function startTimer(duration, display) {
+    if (timerActive) {
+      return;
+    }
+
+    timerActive = true;
+    display.style.display = 'block';
+
+    startListItem.setAttribute('data-active', 'true');
+
+    let timer = duration,
+      minutes,
+      seconds;
+    display.textContent = '110:00';
+
+    timerInterval = setInterval(function () {
+      minutes = parseInt(timer / 60, 10);
+      seconds = parseInt(timer % 60, 10);
+
+      minutes = minutes < 10 ? '0' + minutes : minutes;
+      seconds = seconds < 10 ? '0' + seconds : seconds;
+
+      timerValue.textContent = minutes + ':' + seconds;
+
+      if (--timer < 0) {
+        clearInterval(timerInterval);
+        timerValue.textContent = '00:00';
+        timerActive = false;
+        startListItem.setAttribute('data-active', 'false');
+      }
+    }, 1000);
+  }
+
+  startListItem.addEventListener('click', function () {
+    startTimer(6600, timerValue);
+  });
+});
diff --git a/src/js/favourites.js b/src/js/favourites.js
@@ -1,4 +1,3 @@
-import { Notify } from 'notiflix/build/notiflix-notify-aio';
 import {
   createMarkupExercises,
   createMarkupPagination,
@@ -19,14 +18,15 @@ const refs = {
 const { quote, quoteAuthor, exercises, noExercises, paginationMarkup } = refs;
 const LS_FAVORITES_ID = 'favorite-exercises-list';
 const LS_QUOTE = 'quoteData';
+let favoriteExercises = [];
 let pagination;
 let paginationPages = 1;
 let currentPage = 0;
-let page;
+let onePageExercises;
 let pagBtnId = 0;
 
 window.addEventListener('load', takeScreenParams);
-window.addEventListener('resize', debounce(takeScreenParams, 300));
+window.addEventListener('resize', debounce(takeScreenParams, 100));
 
 function takeScreenParams() {
   pagination = 8;
@@ -54,25 +54,23 @@ async function getCurrentQuote() {
     }
   } catch (err) {
     // console.log('Favourites page', err);
-    // Notify.failure(`Oops! Something went wrong! Try reloading the page!`);
   }
 }
 
 export function getFavoriteExercises() {
   try {
-    const favoriteExercises = load(LS_FAVORITES_ID);
+    favoriteExercises = load(LS_FAVORITES_ID);
     if (favoriteExercises) {
       noExercises.classList.remove('favor-exercises-noitems');
-      const totalExercises = favoriteExercises.length;
-      if (pagination === 0 || totalExercises <= pagination) {
-        page = favoriteExercises;
+      if (pagination === 0 || favoriteExercises.length <= pagination) {
+        onePageExercises = favoriteExercises;
         paginationMarkup.innerHTML = createMarkupPagination('');
       } else {
         reloadMarkupPagination(favoriteExercises);
-        setExercisesToReload(favoriteExercises);
         setCurrentPage(currentPage);
+        setExercisesToReload(favoriteExercises);
       }
-      reloadMarkupExercises(page, favoriteExercises);
+      reloadMarkupExercises(onePageExercises);
     } else {
       noExercises.classList.add('favor-exercises-noitems');
       exercises.innerHTML = createMurkupNoitems();
@@ -82,22 +80,65 @@ export function getFavoriteExercises() {
   }
 }
 
+function reloadMarkupExercises(pageArr) {
+  exercises.innerHTML = createMarkupExercises(pageArr);
+  const exericesOpenBtns = document.querySelectorAll(
+    '[data-modal-exercise="open"]'
+  );
+  const exericesRemoveBtns = document.querySelectorAll(
+    '.favor-exercises-delbtn'
+  );
+  exericesOpenBtns.forEach(btn => {
+    btn.addEventListener('click', event => {
+      const exerciseId = event.currentTarget.closest('.favor-exercises-card')
+        .dataset.id;
+      handleOpenModalClick(event, exerciseId);
+    });
+  });
+  exericesRemoveBtns.forEach(btn => {
+    btn.addEventListener('click', event => {
+      const exerciseId = event.currentTarget.closest('.favor-exercises-card')
+        .dataset.id;
+      removeFavoriteExerciseFromLS(exerciseId);
+      getFavoriteExercises();
+    });
+  });
+}
+
 function reloadMarkupPagination(arr) {
   paginationPages = Math.ceil(arr.length / pagination);
+  if (paginationPages === pagBtnId) {
+    pagBtnId -= 1;
+    currentPage -= 1;
+  }
   paginationMarkup.innerHTML = createMarkupPagination(
     paginationPages,
     pagBtnId
   );
+
   const paginationBtns = document.querySelectorAll('.pag-btn');
   paginationBtns.forEach(btn => {
     btn.addEventListener('click', event => {
       pagBtnId = Number(event.currentTarget.closest('.pag-btn').dataset.id);
-      reloadCurrentPage(pagBtnId, arr);
-      // smoothScrollUp();
+      reloadMarkupPagination(arr);
+      setCurrentPage(pagBtnId);
+      setExercisesToReload(arr);
+      reloadMarkupExercises(onePageExercises);
+      smoothScrollDown();
     });
   });
 }
 
+function setExercisesToReload(arr) {
+  Math.ceil(arr.length / pagination) < currentPage + 1
+    ? (currentPage -= 1)
+    : currentPage;
+  onePageExercises = arr.slice(
+    currentPage * pagination,
+    pagination * (1 + currentPage)
+  );
+}
+
 function setCurrentPage(num) {
   currentPage = num;
   const inActiveBtns = document.querySelectorAll('.pag-btn');
@@ -108,75 +149,21 @@ function setCurrentPage(num) {
   activeBtn.classList.add('pag-btn-active');
 }
 
-function setExercisesToReload(arr) {
-  Math.ceil(arr.length / pagination) < currentPage + 1
-    ? (currentPage -= 1)
-    : currentPage;
-  page = arr.slice(currentPage * pagination, pagination * (1 + currentPage));
-  reloadMarkupExercises(page, arr);
+function removeFavoriteExerciseFromLS(id) {
+  const removerObj = favoriteExercises.find(exercise => exercise._id === id);
+  const favoriteExerciseIndex = favoriteExercises.indexOf(removerObj);
+  favoriteExercises.splice(favoriteExerciseIndex, 1);
+  save(LS_FAVORITES_ID, favoriteExercises);
+  !favoriteExercises.length && localStorage.removeItem(LS_FAVORITES_ID);
 }
 
-function reloadMarkupExercises(page, arr) {
-  exercises.innerHTML = createMarkupExercises(page);
-  const exericesOpenBtns = document.querySelectorAll(
-    '[data-modal-exercise="open"]'
-  );
-  const exericesRemoveBtns = document.querySelectorAll(
-    '.favor-exercises-delbtn'
-  );
-  exericesOpenBtns.forEach(btn => {
-    btn.addEventListener('click', event => {
-      const exerciseId = event.currentTarget.closest('.favor-exercises-card')
-        .dataset.id;
-      handleOpenModalClick(event, exerciseId);
-    });
+function smoothScrollDown() {
+  window.scrollBy({
+    top: 1 * window.innerHeight,
+    behavior: 'smooth',
   });
-  exericesRemoveBtns.forEach(btn => {
-    btn.addEventListener('click', event => {
-      const exerciseId = event.currentTarget.closest('.favor-exercises-card')
-        .dataset.id;
-      removeFavoriteExerciseFromLS(exerciseId, arr);
-      getFavoriteExercises();
-    });
-  });
-}
-
-function removeFavoriteExerciseFromLS(id, arr) {
-  const removerObj = arr.find(exercise => exercise._id === id);
-  const favoriteExerciseIndex = arr.indexOf(removerObj);
-  arr.splice(favoriteExerciseIndex, 1);
-  save(LS_FAVORITES_ID, arr);
-  !arr.length && localStorage.removeItem(LS_FAVORITES_ID);
 }
 
-function reloadCurrentPage(num, arr) {
-  reloadMarkupPagination(arr);
-  setCurrentPage(num);
-  setExercisesToReload(arr);
-}
-
-// function smoothScrollUp() {
-//   window.scrollBy({
-//     top: -1 * window.innerHeight,
-//     behavior: 'smooth',
-//   });
-// }
-
-getCurrentQuote();
-
-// Test favor exercises
-// async function getManyExercises() {
-//   const { results } = await getExercises();
-//   const dataExercises = results.map(
-//     ({ _id, name, burnedCalories, bodyPart, target }) => ({
-//       _id: `${_id}`,
-//       name: `${name}`,
-//       burnedCalories: `${burnedCalories}`,
-//       bodyPart: `${bodyPart}`,
-//       target: `${target}`,
-//     })
-//   );
-//   save('favor-exercises', dataExercises);
-// }
-// getManyExercises();
-// Test favor exercises
+document.addEventListener('DOMContentLoaded', function () {
+  getCurrentQuote();
+});