Merge pull request #44 from ViktorSvertoka/modal-bmi

Modal bmi

src/css/layout/11-modal-bmi.css

@@ -0,0 +1,83 @@
+.bmi__backdrop {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  z-index: 990;
+  padding: 15px;
+  background-color: rgba(0, 0, 0, 0.7);
+  visibility: visible;
+  opacity: 1;
+}
+
+.is-hidden {
+  visibility: hidden;
+  pointer-events: none;
+  opacity: 0;
+}
+
+.is-hidden .bmi__wrapper {
+  visibility: hidden;
+  pointer-events: none;
+  opacity: 0.3;
+  transform: translate(-75%, -90%) scale(3);
+}
+
+.bmi__wrapper {
+  position: relative;
+  z-index: 999;
+  width: 320px;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 25px 15px 20px;
+  visibility: visible;
+  opacity: 1;
+  background-color: var(--color-black);
+  border-radius: 10px;
+  box-shadow: 0 28px 42px rgba(0, 0, 0, 0.38), 0 20px 20px rgba(0, 0, 0, 0.33);
+}
+
+@media screen and (min-width: 768px) {
+  .bmi__wrapper {
+    width: 580px;
+  }
+}
+
+@media screen and (min-width: 1280px) {
+  .bmi__wrapper {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(1);
+    width: 1200px;
+    padding: 30px;
+  }
+}
+
+.bmi__modal-close-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  padding: 0px;
+  border: none;
+  background-color: transparent;
+  border-radius: 50%;
+  cursor: pointer;
+  stroke: var(--color-white);
+}
+
+@media screen and (min-width: 768px) {
+  .bmi__modal-close-btn {
+    top: 20px;
+    right: 20px;
+  }
+}
+
+.bmi__modal-close-icon {
+  fill: currentColor;
+}

src/css/styles.css

@@ -18,3 +18,4 @@
 @import url('./layout/08-scroll-up.css');
 @import url('./layout/09-loader.css');
 @import url('./layout/10-favorites.css');
+@import url('./layout/11-modal-bmi.css');

src/index.html

@@ -23,6 +23,7 @@
     <main>
       <load ="partials/02-hero.html" />
       <load ="partials/03-exercises.html" />
+      <load ="partials/11-modal-bmi.html" />
     </main>
 
     <footer>

src/js/16-modal-bmi.js

@@ -0,0 +1,53 @@
+const teamLink = document.querySelector('.bmi__link');
+const teamBackdrop = document.querySelector('.bmi__backdrop');
+const teamCloseBtn = document.querySelector('.bmi__modal-close-btn');
+
+function onLinkClick(event) {
+  event.preventDefault();
+
+  teamBackdrop.classList.remove('is-hidden');
+  document.body.classList.add('modal-open');
+
+  addAllEventListeners();
+}
+
+function onEscClick(event) {
+  event.preventDefault();
+
+  if (event.code !== 'Escape') {
+    return;
+  }
+
+  closingModalStaff();
+}
+
+function onBackdropClick(event) {
+  if (event.target.closest('.bmi__wrapper')) {
+    return;
+  }
+
+  closingModalStaff();
+}
+
+function onCloseBtnClick(event) {
+  event.preventDefault();
+
+  closingModalStaff();
+}
+
+function addAllEventListeners() {
+  document.addEventListener('keydown', onEscClick);
+  teamBackdrop.addEventListener('click', onBackdropClick);
+  teamCloseBtn.addEventListener('click', onCloseBtnClick);
+}
+
+function closingModalStaff() {
+  document.removeEventListener('keydown', onEscClick);
+  teamBackdrop.removeEventListener('click', onBackdropClick);
+  teamCloseBtn.removeEventListener('click', onCloseBtnClick);
+
+  teamBackdrop.classList.add('is-hidden');
+  document.body.classList.remove('modal-open');
+}
+
+teamLink.addEventListener('click', onLinkClick);

src/main.js

@@ -5,10 +5,11 @@ import './js/03-filters';
 import './js/04-search-form';
 import './js/05-modal-exercises';
 // import './js/06-modal-rating';
-// import './js/07-modal-team';
+import './js/07-modal-team';
 import './js/08-scroll-up';
 import './js/09-loader';
 import './js/10-favorites';
 import './js/11-subscribe';
 import './js/12-exercises';
 import './js/13-hero';
+import './js/16-modal-bmi';

src/partials/03-exercises.html

@@ -40,6 +40,7 @@ <h3 class="quote__title">Quote of the day</h3>
         </li>
         <li>
           <div class="aside__img"></div>
+          <a href="./11-modal-bmi.html" class="bmi__link">BMI</a>
         </li>
         <li>
           <div class="aside__white-card">

src/partials/04-footer.html

@@ -96,8 +96,10 @@ <h3 class="subscribe__form-title">
           ><span>Terms of Service</span>
         </p>
         <p class="footer__text">©2023</p>
+        <a href="./07-modal-team.html" class="footer__link footer__text"
+          >Our team</a
+        >
       </div>
     </div>
   </div>
-  <a href="./07-modal-team.html" class="footer__link footer__text">Our team</a>
 </div>

src/partials/11-modal-bmi.html

@@ -0,0 +1,10 @@
+<div class="bmi__backdrop is-hidden">
+  <div class="bmi__wrapper">
+    <button class="bmi__modal-close-btn" type="button">
+      <svg class="bmi__modal-close-icon" width="20" height="20">
+        <use href="./sprite.svg#icon-cross-closed"></use>
+      </svg>
+    </button>
+    <h1>HELLO</h1>
+  </div>
+</div>