Merge pull request #10 from KristinaHranovska/modal-window

Modal window

src/css/exercises.css

@@ -64,6 +64,8 @@
     letter-spacing: 0px;
     text-align: center;
     color: var(--text-light);
+    text-transform: capitalize;
+    margin-bottom: 2px;
   }
 
   .filter {

src/css/modal-window.css

@@ -0,0 +1,229 @@
+.backdrop-thumb {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100;
+    background-color: rgba(46, 47, 66, 0.40);
+
+    opacity: 1;
+    transition: opacity 250ms cubic-bezier(0.4, 0, 0.2, 1), visibility 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.backdrop-thumb.is-open {
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: auto;
+}
+
+.modal-window {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 335px;
+    overflow-y: auto;
+
+    transform: translate(-50%, -50%) scale(1);
+
+    border-radius: 20px;
+    background-color: var(--text-light);
+    box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.14), 0px 1px 3px rgba(0, 0, 0, 0.12), 0px 2px 1px rgba(0, 0, 0, 0.2);
+
+    transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+
+    padding: 40px 20px;
+}
+
+.modal-button-close {
+    position: absolute;
+    top: 14px;
+    right: 14px;
+    width: 15px;
+    height: 15px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    background-color: transparent;
+    border-radius: 50%;
+    border: none;
+
+    padding: 0;
+
+    transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), border 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.close-btn-icon {
+    stroke: var(--text-dark);
+
+    transition: fill 250ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.img-modal {
+    margin-bottom: 20px;
+}
+
+.modal-exer-thumb {
+    margin-bottom: 40px;
+}
+
+.modal-title {
+    font-weight: 500;
+    font-size: 20px;
+    line-height: 1;
+    color: var(--text-dark);
+
+    margin-bottom: 10px;
+}
+
+.raiting {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+
+    margin-bottom: 20px;
+}
+
+.raiting-number {
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--text-dark);
+}
+
+.raiting-item {
+    display: flex;
+    align-items: center;
+}
+
+.icon-star {
+    fill: var(--star);
+}
+
+.icon-star.non-activ {
+    fill: var(--not-color-star);
+}
+
+.exer-item {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+
+    border-top: 1px solid var(--not-color-star);
+    border-bottom: 1px solid var(--not-color-star);
+
+    margin-bottom: 20px;
+    padding: 10px 0;
+}
+
+.title-exer {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--border-color);
+}
+
+.paragraf-exer {
+    color: var(--text-dark);
+    font-weight: 500;
+    line-height: 1.28;
+    font-size: 14px;
+}
+
+.main-parag {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 1.29;
+    color: var(--text);
+}
+
+.buttons-modal {
+    display: flex;
+    flex-direction: column;
+    gap: 9px;
+}
+
+.hidden-btn {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    border: 0;
+    padding: 0;
+
+    white-space: nowrap;
+    clip-path: inset(100%);
+    clip: rect(0 0 0 0);
+    overflow: hidden;
+}
+
+.add-to-favorities {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+
+    border-radius: 30px;
+    background-color: var(--accent);
+    color: var(--text-light);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.28;
+    border: none;
+
+    padding: 12px 80px;
+}
+
+.heart-btn-icon {
+    fill: none;
+    stroke: var(--text-light);
+}
+
+.heart-btn-icon.active-favorites {
+    fill: var(--star);
+    stroke: var(--star);
+}
+
+@media screen and (min-width: 768px) {
+    .modal-window {
+        width: 716px;
+    }
+
+    .exer-thumb {
+        display: flex;
+        align-items: flex-start;
+        gap: 40px;
+    }
+
+    .modal-button-close {
+        top: 16px;
+        right: 16px;
+    }
+
+    .img-modal {
+        width: 270px;
+        margin-bottom: 0;
+    }
+
+    .modal-title {
+        font-size: 24px;
+        line-height: 1.33;
+    }
+
+    .add-to-favorities {
+        font-size: 16px;
+    }
+
+    .heart-btn-icon {
+        width: 20px;
+        height: 20px;
+    }
+}
+
+@media screen and (min-width: 1440px) {
+    .modal-window {
+        width: 732px;
+    }
+}

src/css/styles.css

@@ -1,13 +1,12 @@
 @import url('./components/reset');
 @import url('./components/variables.css');
 @import url('./components/components.css');
-
 @import url('./header.css');
 @import url('./hero.css');
 @import url('./quote.css');
 @import url('./exercises.css');
 @import url('./static.css');
 @import url('./footer.css');
-
 @import url('./quote-favorities.css');
-@import url('./favorities-exercise.css');
+@import url('./favorities-exercise.css');
+@import url('./modal-window.css');

src/js/body-parts.js

@@ -60,7 +60,7 @@ function renderExercises(data) {
           </span>
         </span>
         <a class="ex-item-start" href="#" data-id="${i._id}">
-          <span>Start</span>
+          <span class="js-start">Start</span>
           <svg class="ex-arrow-icon" width="14" height="14"><use href="${icons}#arrow"></use></svg>
         </a>
       </div>

src/js/helper/get-access.js

@@ -11,13 +11,14 @@ export { getAccess, postAccess }
  * @param {string} options.typeFilter - Тип фільтра, який використовується у URL.
  * @returns {Promise} Об'єкт Promise, який розрішується у відповідь від сервера.
  */
-async function getAccess({ filter, page = 1, limit = 12, typeFilter }) {
+async function getAccess({ filter, page = 1, limit = 12, typeFilter, id }) {
     try {
-        const response = await axios.get(`https://energyflow.b.goit.study/api/${typeFilter}`, {
+        const response = await axios.get(`https://energyflow.b.goit.study/api/${typeFilter}/${id}`, {
             params: {
                 filter,
                 page,
                 limit,
+                id,
             },
         })
         return response;

src/js/modal-window.js

@@ -0,0 +1,62 @@
+import { getAccess } from "./helper/get-access";
+
+
+const backdrop = document.querySelector('.backdrop-thumb');
+const closeIcon = document.querySelector('.js-modal-window');
+const galleryWindow = document.querySelector('.exercises-card');
+
+galleryWindow.addEventListener('click', openModal);
+
+// Відкриття модалки
+function openModal(e) {
+    if (e.target.classList.contains('ex-arrow-icon') || e.target.classList.contains('js-start')) {
+        backdrop.classList.remove('is-open');
+        document.body.style.overflow = 'hidden';
+
+        const liElement = e.target.closest('.exercise-item');
+
+        if (liElement) {
+            const id = liElement.dataset.id;
+            getExercisesObject(id);
+        }
+    }
+}
+
+
+// Закриття модального вікна
+closeIcon.addEventListener('click', closeModal)
+
+function closeModal() {
+    backdrop.classList.add('is-open');
+    document.body.style.overflow = '';
+}
+
+function getExercisesObject(id) {
+    getAccess({ typeFilter: 'exercises', id: id })
+        .then(({ data }) => {
+            const { name, rating, target, bodyPart, equipment, popularity, burnedCalories, description, gifUrl, _id } = data
+
+            const refs = {
+                img: document.querySelector(".js-img"),
+                title: document.querySelector('.js-title'),
+                raiting: document.querySelector('.js-raiting'),
+                targetValue: document.querySelector('.js-target'),
+                bodyPartValue: document.querySelector('.js-body-part'),
+                equipmentValue: document.querySelector('.js-equipment'),
+                popularValue: document.querySelector('.js-popular'),
+                caloriesValue: document.querySelector('.js-calories'),
+                descriptionValue: document.querySelector('.js-description'),
+            }
+
+            refs.img.setAttribute('src', gifUrl);
+            refs.title.textContent = name;
+            refs.raiting.textContent = rating;
+            refs.targetValue.textContent = target;
+            refs.bodyPartValue.textContent = bodyPart;
+            refs.equipmentValue.textContent = equipment;
+            refs.popularValue.textContent = popularity;
+            refs.caloriesValue.textContent = burnedCalories;
+            refs.descriptionValue.textContent = description;
+        })
+        .catch((err) => console.error(err));
+}