From eefffa2a3df4ae4489d6b417a68f67f3de93629f Mon Sep 17 00:00:00 2001 From: ArtanFS <132677965+ArtanFS@users.noreply.github.com> Date: Fri, 20 Oct 2023 22:57:16 +0300 Subject: [PATCH 1/5] fix css --- src/css/favourites.css | 6 ------ 1 file changed, 6 deletions(-) diff --git a/src/css/favourites.css b/src/css/favourites.css index 33b7434..a6d5bc5 100644 --- a/src/css/favourites.css +++ b/src/css/favourites.css @@ -1,12 +1,6 @@ body { background-color: var(--primary-white-color); } -/* img { - display: block; - max-width: 100%; - height: auto; -} */ - /* .visually-hidden { position: absolute; overflow: hidden; From ca378633b6577b803ec38b17bc515afcd841e818 Mon Sep 17 00:00:00 2001 From: ArtanFS <132677965+ArtanFS@users.noreply.github.com> Date: Sat, 21 Oct 2023 18:54:32 +0300 Subject: [PATCH 2/5] quote js --- src/css/favourites.css | 2 +- src/js/api-service/favourites-api.js | 29 ++++++++++++++++++++++++++++ src/js/favourites.js | 27 ++++++++++++++++++++++++++ src/partials/favourites.html | 11 +++-------- 4 files changed, 60 insertions(+), 9 deletions(-) diff --git a/src/css/favourites.css b/src/css/favourites.css index a6d5bc5..df82044 100644 --- a/src/css/favourites.css +++ b/src/css/favourites.css @@ -177,7 +177,7 @@ body { .favor-title { margin-bottom: 44px; } - .yyy { + .favor-quote { display: flex; gap: 32px; } diff --git a/src/js/api-service/favourites-api.js b/src/js/api-service/favourites-api.js index e69de29..af409c0 100644 --- a/src/js/api-service/favourites-api.js +++ b/src/js/api-service/favourites-api.js @@ -0,0 +1,29 @@ +import { API_PROPS } from '../api/api'; +import axios from 'axios'; + +const { BASE_URL, QUOTE_ENDPOINT } = API_PROPS; + +async function getQuote() { + const resp = await axios(`${BASE_URL}${QUOTE_ENDPOINT}`); + return resp.data; +} + +const save = (key, value) => { + try { + const serializedState = JSON.stringify(value); + localStorage.setItem(key, serializedState); + } catch (error) { + console.error('Set state error: ', error.message); + } +}; + +const load = key => { + try { + const serializedState = localStorage.getItem(key); + return serializedState === null ? undefined : JSON.parse(serializedState); + } catch (error) { + console.error('Get state error: ', error.message); + } +}; + +export { getQuote, save, load }; diff --git a/src/js/favourites.js b/src/js/favourites.js index e69de29..52d945f 100644 --- a/src/js/favourites.js +++ b/src/js/favourites.js @@ -0,0 +1,27 @@ +import { Notify } from 'notiflix/build/notiflix-notify-aio'; +// import { createMarkup } from './markup'; +import { getQuote, save, load } from './api-service/favourites-api'; + +const refs = { + quote: document.querySelector('.favor-quote-wrap p'), + quoteAuthor: document.querySelector('.favor-quote-wrap h4'), +}; + +async function getCurrentQuote() { + const quote = load('quote-current-day'); + const date = new Date().toDateString(); + if (quote && date === quote.quoteDate) { + console.log(date); + console.log(quote.quoteDate); + refs.quote.textContent = quote.quote; + refs.quoteAuthor.textContent = quote.author; + } else { + const currentQuote = await getQuote(); + currentQuote.quoteDate = date; + refs.quote.textContent = currentQuote.quote; + refs.quoteAuthor.textContent = currentQuote.author; + save('quote-current-day', currentQuote); + } +} + +getCurrentQuote(); diff --git a/src/partials/favourites.html b/src/partials/favourites.html index ca01444..ed61ce4 100644 --- a/src/partials/favourites.html +++ b/src/partials/favourites.html @@ -1,7 +1,7 @@

Favorites

-
+
@@ -11,13 +11,8 @@

Favorites

Quote of the day

-

- A lot of times I find that people who are blessed with the most - talent don't ever develop that attitude, and the ones who aren't - blessed in that way are the most competitive and have the biggest - heart. -

-

Tom Brady

+

+

From fa31097a12309bc7c316bbc5c1530484513698b6 Mon Sep 17 00:00:00 2001 From: ArtanFS <132677965+ArtanFS@users.noreply.github.com> Date: Sun, 22 Oct 2023 21:20:24 +0300 Subject: [PATCH 3/5] exercises js --- src/css/favourites.css | 172 ++++++++++++++++++++++++-- src/js/api-service/favourites-api.js | 17 ++- src/js/favourites.js | 113 ++++++++++++++--- src/js/templates/favourites-markup.js | 51 ++++++++ src/partials/favourites.html | 13 +- 5 files changed, 335 insertions(+), 31 deletions(-) diff --git a/src/css/favourites.css b/src/css/favourites.css index df82044..cf7f845 100644 --- a/src/css/favourites.css +++ b/src/css/favourites.css @@ -40,6 +40,7 @@ body { position: relative; background-color: rgba(244, 244, 244, 0.2); min-width: 32px; + width: 32px; height: 32px; border-radius: 50%; } @@ -74,7 +75,7 @@ body { /** dailynorm */ .favor-dailynorm { border-radius: 20px; - background: #fff; + background-color: #fff; padding: 20px; margin-bottom: 20px; } @@ -96,11 +97,109 @@ body { } /** exercises */ .noitems { - padding: 40px 8px 0 9px; + /* padding: 40px 8px 0 9px; */ } -.favor-exercises p { +.favor-exercises { + padding-top: 40px; +} +.favor-exercises-list { + display: flex; + flex-direction: column; + gap: 20px; +} +.favor-exercises-list p { text-align: center; } +/** exercises-card */ +.favor-exercises-card { + width: 335px; + height: 141px; + background-color: #fff; + border-radius: 20px; + padding: 16px; +} +.favor-exercises-head { + display: flex; + gap: 8px; + /* justify-content: center; */ + align-items: center; +} +.favor-exercises-head svg { + fill: var(--primary-black-color); +} +.favor-exercises-name { + display: flex; + gap: 16px; + align-items: center; + padding-top: 27px; + padding-bottom: 8px; +} +.favor-exercises-icon { + position: relative; + background-color: var(--primary-black-color); + min-width: 32px; + width: 32px; + height: 32px; + border-radius: 50%; +} +.favor-exercises-icon svg { + position: absolute; + transform: translate(-50%, -50%); + left: 50%; + top: 50%; + fill: var(--primary-white-color); +} +.favor-exercises-name h3 { + font-size: 24px; + font-weight: 400; + line-height: 1.33; + text-transform: capitalize; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.favor-exercises-info { + display: flex; + gap: 10px; +} +.favor-exercises-item { + font-size: 12px; + line-height: 1.5; + color: var(--primary-black-color); + letter-spacing: -0.03em; + text-transform: capitalize; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +.favor-exercises-item span { + color: rgba(36, 36, 36, 0.4); + margin-right: 2px; +} +.favor-exercises-calories { + max-width: 144px; +} +.favor-exercises-body { + max-width: 83px; +} +.favor-exercises-target { + width: 56px; +} +.favor-workout { + display: flex; + justify-content: center; + align-items: center; + width: 75px; + height: 24px; + border-radius: 15px; + border: 1px solid var(--primary-black-color); +} +.favor-workout p { + font-size: 12px; + font-weight: 500; + line-height: normal; + text-transform: uppercase; +} /** @media */ @media screen and (min-width: 768px) { .favor-container { @@ -162,11 +261,28 @@ body { } /** exercises */ .noitems { - padding: 132px 75px 0; + /* padding: 132px 75px 0; */ + } + .favor-exercises { + padding-top: 64px; + } + .favor-exercises-list { + flex-direction: row; + flex-wrap: wrap; + gap: 32px 16px; + } + .favor-exercises-card { + width: 344px; + } + .favor-exercises-body { + max-width: 88px; + } + .favor-exercises-target { + width: 60px; } .favor-exercises p { - font-size: 18px; - line-height: 1.33; + /* font-size: 18px; */ + /* line-height: 1.33; */ } } @media screen and (min-width: 1440px) { @@ -193,10 +309,50 @@ body { width: 239px; } .favor-exercises { - width: 850px; + min-width: 850px; height: 487px; + padding-top: 0; + overflow: auto; } .noitems { - padding: 102px 148px 0; + /* padding: 102px 148px 0; */ + } + /* .favor-exercises-list { + flex-direction: row; + flex-wrap: wrap; + gap: 32px 16px; + } */ + .favor-exercises-card { + width: 405px; + } + .favor-exercises-info { + gap: 16px; + } + .favor-exercises-body { + max-width: 123px; + } + .favor-exercises-target { + width: 74px; } } + +.pag-list { + display: flex; + gap: 8px; + padding-top: 32px; + justify-content: center; + align-items: center; +} +.pag-btn { + text-align: center; + cursor: pointer; + background-color: transparent; + color: #d4d4d4; +} +.pag-btn-active { + width: 32px; + height: 32px; + border-radius: 50%; + border: 1px solid var(--primary-black-color); + color: var(--primary-black-color); +} diff --git a/src/js/api-service/favourites-api.js b/src/js/api-service/favourites-api.js index af409c0..bf1f7bd 100644 --- a/src/js/api-service/favourites-api.js +++ b/src/js/api-service/favourites-api.js @@ -1,5 +1,6 @@ import { API_PROPS } from '../api/api'; import axios from 'axios'; +import { Notify } from 'notiflix/build/notiflix-notify-aio'; const { BASE_URL, QUOTE_ENDPOINT } = API_PROPS; @@ -13,7 +14,7 @@ const save = (key, value) => { const serializedState = JSON.stringify(value); localStorage.setItem(key, serializedState); } catch (error) { - console.error('Set state error: ', error.message); + Notify.failure('Save data error: ', error.message); } }; @@ -22,8 +23,18 @@ const load = key => { const serializedState = localStorage.getItem(key); return serializedState === null ? undefined : JSON.parse(serializedState); } catch (error) { - console.error('Get state error: ', error.message); + Notify.failure('Load data error: ', error.message); } }; -export { getQuote, save, load }; +// Test favor exercises +async function getExercises() { + const resp = await axios( + 'https://your-energy.b.goit.study/api/exercises?page=1&limit=36' + ); + return resp.data; +} + +// Test favor exercises + +export { getQuote, save, load, getExercises }; diff --git a/src/js/favourites.js b/src/js/favourites.js index 52d945f..4aed030 100644 --- a/src/js/favourites.js +++ b/src/js/favourites.js @@ -1,27 +1,110 @@ import { Notify } from 'notiflix/build/notiflix-notify-aio'; -// import { createMarkup } from './markup'; -import { getQuote, save, load } from './api-service/favourites-api'; +import { + createMarkupExercises, + createMarkupPagination, +} from './templates/favourites-markup'; +import { + getQuote, + save, + load, + getExercises, +} from './api-service/favourites-api'; const refs = { quote: document.querySelector('.favor-quote-wrap p'), quoteAuthor: document.querySelector('.favor-quote-wrap h4'), + exercises: document.querySelector('.favor-exercises-list'), + pagination: document.querySelector('.pag-list'), }; +let pagination; +let paginationPages = 1; +let currentPage = 0; +let page; + +window.addEventListener('load', takeScreenParams); +window.addEventListener('resize', takeScreenParams); + +function takeScreenParams() { + pagination = 8; + if (window.innerWidth >= 768 && window.innerWidth < 1440) { + pagination = 10; + } else if (window.innerWidth >= 1440) { + pagination = 0; + } + getFavorExercises(); +} + async function getCurrentQuote() { - const quote = load('quote-current-day'); - const date = new Date().toDateString(); - if (quote && date === quote.quoteDate) { - console.log(date); - console.log(quote.quoteDate); - refs.quote.textContent = quote.quote; - refs.quoteAuthor.textContent = quote.author; - } else { - const currentQuote = await getQuote(); - currentQuote.quoteDate = date; - refs.quote.textContent = currentQuote.quote; - refs.quoteAuthor.textContent = currentQuote.author; - save('quote-current-day', currentQuote); + try { + const quote = load('quote-current-day'); + const date = new Date().toDateString(); + if (quote && date === quote.quoteDate) { + refs.quote.textContent = quote.quote; + refs.quoteAuthor.textContent = quote.author; + } else { + const currentQuote = await getQuote(); + currentQuote.quoteDate = date; + refs.quote.textContent = currentQuote.quote; + refs.quoteAuthor.textContent = currentQuote.author; + save('quote-current-day', currentQuote); + } + } catch (err) { + Notify.failure(`Oops! Something went wrong! Try reloading the page!`); + } +} + +function getFavorExercises() { + try { + const favorExercises = load('favor-exercises'); + console.log(favorExercises); + if (favorExercises) { + const totalExercises = favorExercises.length; + if (pagination === 0 || totalExercises <= pagination) { + page = favorExercises; + refs.pagination.innerHTML = createMarkupPagination(''); + } else { + paginationPages = Math.ceil(totalExercises / pagination); + refs.pagination.innerHTML = createMarkupPagination(paginationPages); + setCurrentPage(currentPage); + page = favorExercises.slice( + 0 + currentPage * pagination, + pagination * (1 + currentPage) + ); + } + console.log(pagination); + console.log(page); + refs.exercises.innerHTML = createMarkupExercises(page); + console.log('Yahoo!'); + } else { + console.log('No data'); + } + } catch (err) { + Notify.failure(`Oops! Something went wrong! Try reloading the page!`); } } +function setCurrentPage(num) { + let currentPage = num + 1; + const activeBtn = document.getElementById(`p-${currentPage}`); + activeBtn.classList.add('pag-btn-active'); +} + getCurrentQuote(); + +// Test favor exercises +async function getManyExercises() { + const { results } = await getExercises(); + const dataExers = results.map( + ({ _id, name, burnedCalories, bodyPart, target }) => ({ + _id: `${_id}`, + name: `${name}`, + burnedCalories: `${burnedCalories}`, + bodyPart: `${bodyPart}`, + target: `${target}`, + }) + ); + save('favor-exercises', dataExers); +} +getManyExercises(); +// Test favor exercises diff --git a/src/js/templates/favourites-markup.js b/src/js/templates/favourites-markup.js index e69de29..10a14fd 100644 --- a/src/js/templates/favourites-markup.js +++ b/src/js/templates/favourites-markup.js @@ -0,0 +1,51 @@ +function createMarkupExercises(arr) { + return arr + .map( + ({ name, burnedCalories, bodyPart, target }) => + `
  • +
    +

    Workout

    + + +
    +
    +
    + + + +
    +

    ${name}

    +
    +
      +
    • + Burned calories:${burnedCalories} / 3 min +
      • +
    • Body part:${bodyPart}
      • +
    • Target:${target}
      • +
    +
    • ` + ) + .join(''); +} + +function createMarkupPagination(num) { + let markup = ''; + if (num === 1) { + markup = ''; + } else { + for (let i = 1; i <= num; i += 1) { + markup = + markup + + `
  • + +
    • `; + } + } + return markup; +} + +export { createMarkupExercises, createMarkupPagination }; diff --git a/src/partials/favourites.html b/src/partials/favourites.html index ed61ce4..c8c5094 100644 --- a/src/partials/favourites.html +++ b/src/partials/favourites.html @@ -59,12 +59,15 @@

    110 min

    -

    - 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. -

    +
      +

      + 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. +

      +
    +
      From 6ff87490c44f32f81bb2590b27278ee1b3d83d26 Mon Sep 17 00:00:00 2001 From: ArtanFS <132677965+ArtanFS@users.noreply.github.com> Date: Sun, 22 Oct 2023 21:50:25 +0300 Subject: [PATCH 4/5] exercises cards --- src/css/favourites.css | 41 ++++++++-------------------- src/js/api-service/favourites-api.js | 2 +- src/js/favourites.js | 9 +++--- src/partials/favourites.html | 4 +-- 4 files changed, 19 insertions(+), 37 deletions(-) diff --git a/src/css/favourites.css b/src/css/favourites.css index cf7f845..4b0fa2e 100644 --- a/src/css/favourites.css +++ b/src/css/favourites.css @@ -1,18 +1,6 @@ body { background-color: var(--primary-white-color); } -/* .visually-hidden { - position: absolute; - overflow: hidden; - clip: rect(0 0 0 0); - width: 1px; - height: 1px; - margin: -1px; - padding: 0; - border: 0; - white-space: nowrap; - clip-path: inset(100%); -} */ .favor-container { padding-top: 80px; padding-bottom: 80px; @@ -96,12 +84,12 @@ body { overflow: hidden; } /** exercises */ -.noitems { - /* padding: 40px 8px 0 9px; */ -} .favor-exercises { padding-top: 40px; } +.favor-exercises-noitems { + padding: 40px 8px 0 9px; +} .favor-exercises-list { display: flex; flex-direction: column; @@ -260,17 +248,21 @@ body { height: 141px; } /** exercises */ - .noitems { - /* padding: 132px 75px 0; */ - } .favor-exercises { padding-top: 64px; } + .favor-exercises-noitems { + padding: 132px 75px 0; + } .favor-exercises-list { flex-direction: row; flex-wrap: wrap; gap: 32px 16px; } + .favor-exercises-text { + font-size: 18px; + line-height: 1.33; + } .favor-exercises-card { width: 344px; } @@ -280,10 +272,6 @@ body { .favor-exercises-target { width: 60px; } - .favor-exercises p { - /* font-size: 18px; */ - /* line-height: 1.33; */ - } } @media screen and (min-width: 1440px) { .favor-container { @@ -314,14 +302,9 @@ body { padding-top: 0; overflow: auto; } - .noitems { - /* padding: 102px 148px 0; */ + .favor-exercises-noitems { + padding: 102px 148px 0; } - /* .favor-exercises-list { - flex-direction: row; - flex-wrap: wrap; - gap: 32px 16px; - } */ .favor-exercises-card { width: 405px; } diff --git a/src/js/api-service/favourites-api.js b/src/js/api-service/favourites-api.js index bf1f7bd..6ed80c4 100644 --- a/src/js/api-service/favourites-api.js +++ b/src/js/api-service/favourites-api.js @@ -30,7 +30,7 @@ const load = key => { // Test favor exercises async function getExercises() { const resp = await axios( - 'https://your-energy.b.goit.study/api/exercises?page=1&limit=36' + 'https://your-energy.b.goit.study/api/exercises?page=1&limit=6' ); return resp.data; } diff --git a/src/js/favourites.js b/src/js/favourites.js index 4aed030..6763737 100644 --- a/src/js/favourites.js +++ b/src/js/favourites.js @@ -14,6 +14,7 @@ const refs = { quote: document.querySelector('.favor-quote-wrap p'), quoteAuthor: document.querySelector('.favor-quote-wrap h4'), exercises: document.querySelector('.favor-exercises-list'), + noExercises: document.querySelector('.favor-exercises'), pagination: document.querySelector('.pag-list'), }; @@ -57,8 +58,8 @@ async function getCurrentQuote() { function getFavorExercises() { try { const favorExercises = load('favor-exercises'); - console.log(favorExercises); if (favorExercises) { + refs.noExercises.classList.remove('favor-exercises-noitems'); const totalExercises = favorExercises.length; if (pagination === 0 || totalExercises <= pagination) { page = favorExercises; @@ -72,12 +73,10 @@ function getFavorExercises() { pagination * (1 + currentPage) ); } - console.log(pagination); - console.log(page); refs.exercises.innerHTML = createMarkupExercises(page); - console.log('Yahoo!'); } else { - console.log('No data'); + refs.noExercises.classList.add('favor-exercises-noitems'); + // Notify.failure(`There are no exercises in your favorites`); } } catch (err) { Notify.failure(`Oops! Something went wrong! Try reloading the page!`); diff --git a/src/partials/favourites.html b/src/partials/favourites.html index c8c5094..6feb02f 100644 --- a/src/partials/favourites.html +++ b/src/partials/favourites.html @@ -58,9 +58,9 @@

      110 min

      -
      +