Merge branch 'main' into Nastya

konstantin-it-lysenko · Oct 23, 2023 · 48dbb26 · 48dbb26
2 parents e3addbf + b6b8d95
commit 48dbb26
Show file tree

Hide file tree

Showing 8 changed files with 124 additions and 92 deletions.
diff --git a/src/css/modal-team.css b/src/css/modal-team.css
@@ -120,11 +120,11 @@
   background-color: rgb(8, 8, 8);
 } */
 .active-devel {
-  background-color: rgba(115, 160, 173, 0.8);
+  background-color: rgba(4, 4, 4, 0.4);
 }
 .team-soc-list {
   display: flex;
-  margin-top: 12px;
+  margin-top: 16px;
   gap: 10px;
   justify-content: center;
 }
@@ -138,7 +138,7 @@
   align-items: center;
   width: 44px;
   height: 44px;
-  padding: 8px;
+  /* padding: 8px; */
 }
 .team-icon {
   fill: var(--primary-white-color);

diff --git a/src/css/quote.css b/src/css/quote.css
@@ -69,15 +69,6 @@
   height: 20px;
   fill: var(--primary-white-color);
 }
-#refreshQuoteButton {
-  position: relative;
-  bottom: 16px;
-  left: 270px;
-  fill: var(--primary-white-color);
-  background-color: transparent;
-  transition: transform 250ms linear;
-  rotate: 0;
-}
 .sidebar-photo {
   border-radius: 20px;
   overflow: hidden;
@@ -117,7 +108,7 @@
   padding: 10px 0;
   color: var(--primary-black-color);
   font-family: var(--primary-fontfont-family);
-  font-size: 14.3px;
+  font-size: 14px;
   font-weight: 400;
   line-height: 1.286;
   letter-spacing: 0.0001em;
@@ -152,11 +143,14 @@
   .sidebar-quoteitem {
     margin-right: -40px;
   }
+  .sidebar-quote h2 {
+    font-size: 14px;
+  }
   .sidebar-quote p {
-    width: 190px;
+    width: 150px;
   }
   .sidebar-info p {
-    width: 180px;
+    width: 150px;
     padding: 5px 0;
     font-size: 13px;
   }
@@ -208,7 +202,7 @@
   .sidebar-info p {
     width: 270px;
     height: 97px;
-    font-size: 13.5px;
+    font-size: 13.9px;
   }
 }
 @media screen and (min-width: 1440px) {
@@ -235,8 +229,7 @@
   .sidebar-info p {
     width: 314px;
     height: 163px;
-    font-size: 13.5px;
-    font-size: 13px;
+    font-size: 14px;
     padding: 0;
   }
 }
diff --git a/src/js/additional.js b/src/js/additional.js
@@ -8,11 +8,11 @@ function truncateText() {
   if (window.innerWidth >= 1440) {
     maxCharacters = 560;
   } else if (window.innerWidth >= 768 && window.innerWidth < 1440) {
-    maxCharacters = 258;
+    maxCharacters = 260;
   } else if (window.innerWidth >= 375 && window.innerWidth < 768) {
-    maxCharacters = 211;
+    maxCharacters = 216;
   } else {
-    maxCharacters = 205;
+    maxCharacters = 170;
   }
   const originalText = sidebarText.textContent;
   if (originalText.length > maxCharacters) {

diff --git a/src/js/categories.js b/src/js/categories.js
@@ -37,7 +37,7 @@ fetchCategories()
   })
   .catch(err => console.log(err));
 
-function catFilterBtnHandler(e) {
+async function catFilterBtnHandler(e) {
   if (e.target.nodeName !== 'BUTTON') {
     return;
   }
@@ -65,21 +65,30 @@ function catFilterBtnHandler(e) {
       catsList.innerHTML = createCategoryMarkup(categoryByName);
     })
     .catch(err => console.log(err));
+  try {
+    const resp = await fetchCategories(categoryName);
+    const categoryByName = resp.filter(({ filter }) => filter === categoryName);
+    exercisesTitleSpan.innerHTML = '';
+    catFilterInput.hidden = true;
+    catsList.innerHTML = createCategoryMarkup(categoryByName);
+  } catch {
+    err => console.log(err);
+  }
 }
 
-function paginationBtnHandler(e) {
+async function paginationBtnHandler(e) {
   const currentPage = e.target.dataset.id;
-
-  fetchCategories(categoryName, currentPage)
-    .then(resp => {
-      const removeExtraCategories = resp.filter(
-        ({ filter }) => filter === categoryName
-      );
-
-      catsList.innerHTML = createCategoryMarkup(removeExtraCategories);
-    })
-    .catch(err => console.log(err));
+  try {
+    const resp = await fetchCategories(categoryName, currentPage);
+    const removeExtraCategories = resp.filter(
+      ({ filter }) => filter === categoryName
+    );
+    catsList.innerHTML = createCategoryMarkup(removeExtraCategories);
+  } catch {
+    err => console.log(err);
+  }
 }
+
 async function catsListBtnHandler(e) {
   try {
     catFilterInput.hidden = false;

diff --git a/src/js/modal-team.js b/src/js/modal-team.js
@@ -1,5 +1,5 @@
-// import { createDevMarkup } from './templates/modal-team-markup';
-// import { developers } from '../js/templates/team-array.js';
+import { createDevMarkup } from './templates/modal-team-markup';
+import { developers } from '../js/templates/team-array.js';
 
 const teamModalOpenBtn = document.querySelector('.team-btn-open');
 const teamModalCloseBtn = document.querySelector('.team-btn-close');
@@ -11,7 +11,7 @@ teamModalCloseBtn.addEventListener('click', onCloseClick);
 teamList.addEventListener('click', onDevClick);
 backdrop.addEventListener('click', onBackdropClick);
 
-// teamList.insertAdjacentHTML('beforeend', createDevMarkup(developers));
+teamList.insertAdjacentHTML('beforeend', createDevMarkup(developers));
 const devSocials = [...teamList.children];
 
 // ! функції відкриття-закриття модалки і скидання стилів девів
@@ -59,12 +59,12 @@ function onBackdropClick(e) {
 //   const devSocClick = devClick.querySelector('.team-soc-list');
 // const moreIcon = devClick.querySelector('.more-icon');
 
-//   const currentActiveDevSoc = document.querySelector('.active-devel');
-//   if (currentActiveDevSoc) {
-//     currentActiveDevSoc.classList.remove('active-devel');
+// const currentActiveDevSoc = document.querySelector('.active-devel');
+// if (currentActiveDevSoc) {
+//   currentActiveDevSoc.classList.remove('active-devel');
 
-//     devSocClick.classList.add('active-devel');
-//   }
+//   devSocClick.classList.add('active-devel');
+// }
 
 // const currentMoreArrow = document.querySelector('.arrow-up');
 // if (currentMoreArrow) {
@@ -82,14 +82,20 @@ function onDevClick(e) {
     return;
   }
 
+  const activeSoc = devClick.lastElementChild;
   const moreIcon = devClick.querySelector('.more-icon');
   const currentMoreArrow = document.querySelector('.arrow-up');
+  const currentActiveDeveloper = document.querySelector('.active-devel');
+
+  if (currentActiveDeveloper) {
+    currentActiveDeveloper.classList.remove('active-devel');
+    // devClick.classList.add('active-devel');
+  }
 
   moreIcon.classList.add('arrow-up');
 
   devClick.classList.add('active-devel');
   // console.log(devClick);
-  const activeSoc = devClick.lastElementChild;
   if (activeSoc.style.maxHeight) {
     activeSoc.style.maxHeight = null;
     currentMoreArrow.classList.remove('arrow-up');

diff --git a/src/js/quote.js b/src/js/quote.js
@@ -6,15 +6,25 @@ const { BASE_URL, QUOTE_ENDPOINT } = API_PROPS;
 
 async function fetchAndDisplayQuote() {
   try {
+    localStorage.removeItem('quoteData');
+    localStorage.removeItem('quoteDate');
+
     const response = await axios.get(`${BASE_URL}${QUOTE_ENDPOINT}`);
     const data = response.data;
+
     if (data && data.quote && data.author) {
       const today = new Date();
-      localStorage.setItem('quote', data.quote);
-      localStorage.setItem('author', data.author);
-      localStorage.setItem('quoteDate', today);
+      const quoteAndAuthor = {
+        quote: data.quote,
+        author: data.author,
+        quoteDate: today,
+      };
+
+      localStorage.setItem('quoteData', JSON.stringify(quoteAndAuthor));
+
       const quoteElement = document.querySelector('.quote');
       const authorElement = document.querySelector('.author');
+
       quoteElement.textContent = data.quote;
       authorElement.textContent = data.author;
     } else {

diff --git a/src/js/templates/modal-team-markup.js b/src/js/templates/modal-team-markup.js
@@ -1,30 +1,44 @@
+import svgSprite from '../../img/sport-sprite.svg';
+
 export function createDevMarkup(developers) {
   return developers
     .map(developer => {
       const { name, linkedin, github } = developer;
-      return `<li class="team-item">
-              <svg class="more-icon" width="20" height="20">
-                  <use href="./img/sport-sprite.svg#icon-more"></use>
-              </svg>
-        <h3 class="team-name">${name}</h3>
-        <ul class="team-soc-list">
-          <li class="team-soc-item"> 
-            <a href="${linkedin}"
-              class="team-link" target="_blank" rel="noopener noreferrer" >
-              <svg class="team-icon" width="28" height="28">
-                <use href="./img/sport-sprite.svg#icon-linkedin"></use>
-              </svg>
-            </a>
-          </li>
-          <li class="team-soc-item">
-            <a href="${github}" class="team-link" target="_blank" rel="noopener noreferrer" >
-              <svg class="team-icon" width="28" height="28">
-                <use href="./img/sport-sprite.svg#icon-github"></use>
-              </svg>
-            </a>
-          </li>
-        </ul>
-      </li>`;
+      return ` <li class="team-item">
+          <svg class="more-icon" width="20" height="20">
+            <use href="${svgSprite}#icon-more"></use>
+          </svg>
+          <h3 class="team-name">${name}</h3>
+          <div class="hidden-content">
+            <ul class="team-soc-list">
+              <li class="team-soc-item">
+                <a
+                  href="${linkedin}"
+                  class="team-link"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <svg class="team-icon" width="28" height="28">
+                    <use href="${svgSprite}#icon-linkedin"></use>
+                  </svg>
+                </a>
+              </li>
+              <li class="team-soc-item">
+                <a
+                  href="${github}"
+                  class="team-link"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  <svg class="team-icon" width="28" height="28">
+                    <use href="${svgSprite}#icon-github"></use>
+                  </svg>
+                </a>
+              </li>
+            </ul>
+          </div>
+        </li>
+`;
     })
     .join('');
 }