diff --git a/src/css/modal-window.css b/src/css/modal-window.css index 9033c75..2cbd458 100644 --- a/src/css/modal-window.css +++ b/src/css/modal-window.css @@ -226,4 +226,8 @@ .modal-window { width: 732px; } + + .exer-item { + gap: 30px; + } } \ No newline at end of file diff --git a/src/js/modal-window.js b/src/js/modal-window.js index 9c205cf..b4d6604 100644 --- a/src/js/modal-window.js +++ b/src/js/modal-window.js @@ -27,6 +27,8 @@ closeIcon.addEventListener('click', closeModal) function closeModal() { backdrop.classList.add('is-open'); document.body.style.overflow = ''; + + clearModalContent(); } // Завантаження сторінки @@ -73,4 +75,37 @@ function getExercisesObject(id) { }) .catch((err) => console.error(err)); +} + +// Очіщюємо вміст модалки після закриття + +function clearModalContent() { + 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', ''); + refs.title.textContent = ''; + refs.raiting.textContent = ''; + refs.targetValue.textContent = ''; + refs.bodyPartValue.textContent = ''; + refs.equipmentValue.textContent = ''; + refs.popularValue.textContent = ''; + refs.caloriesValue.textContent = ''; + refs.descriptionValue.textContent = ''; + + // Очищаємо класи зірок рейтингу + const stars = document.querySelectorAll('.raiting-item .icon-star'); + stars.forEach(star => { + star.classList.add('non-activ'); + }); } \ No newline at end of file