From a1baa37c92eb03cfeaef9666ca9ec131e0417d73 Mon Sep 17 00:00:00 2001 From: Andrew Motko Date: Mon, 18 Dec 2023 07:43:03 +0200 Subject: [PATCH] fix: block input symbols wasted! --- src/css/layout/02-hero.css | 101 --------------------------------- src/js/16-modal-bmi.js | 112 ++++++++++++++++++++++++------------- src/partials/02-hero.html | 37 ------------ 3 files changed, 74 insertions(+), 176 deletions(-) diff --git a/src/css/layout/02-hero.css b/src/css/layout/02-hero.css index 9c53053..8873f79 100644 --- a/src/css/layout/02-hero.css +++ b/src/css/layout/02-hero.css @@ -211,104 +211,3 @@ color: var(--color-white); opacity: 0.8; } - -/* BMI */ - -/* .hero__bmi-wrap { - padding-top: 20px; -} - -@media screen and (min-width: 768px) { - .hero__bmi-wrap { - padding-top: 16px; - } -} - -@media screen and (min-width: 1440px) { - .hero__bmi-wrap { - padding-top: 20px; - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - } -} - -.hero__bmi { - display: flex; - flex-direction: column; -} - -.hero__bmi-title { - font-size: 40px; - color: var(--color-black); - font-weight: 400; - letter-spacing: -0.88px; - line-height: 1.1em; - margin-bottom: 20px; -} - -.hero__bmi-title-part { - font-style: italic; -} - -.hero__label { - display: flex; - flex-direction: column; - font-size: 14px; - line-height: 1.29; - letter-spacing: -0.28px; -} - -.hero__input { - display: inline-flex; - padding: 12px 14px; - align-items: center; - gap: 10px; - border-radius: 30px; - border: 1px solid var(--color-black); - background-color: var(--color-white); - font-size: 18px; - margin: 10px; -} - -.hero__btn { - border-radius: 30px; - background: var(--color-white); - color: var(--color-black); - border: none; - padding: 10px 20px; - margin: 10px; - font-size: 20px; - box-shadow: 0 0 4px rgba(0, 0, 0, .3); - cursor: pointer; - transition: all var(--transition-dur-and-func); -} - -.hero__btn:hover, -.hero__btn:focus { - color: var(--color-white); - background-color: var(--color-black); - opacity: 0.8; -} - -.hero__info-text { - padding-top: 10px; - font-size: 20px; - font-weight: 500; -} - -.hero__bmi-pic { - display: none; -} - -@media screen and (min-width: 1440px) { - .hero__bmi-pic { - display: inline-flex; - top: 12px; - right: 0; - width: 444px; - height: 296px; - border-radius: 30px; - } -} */ diff --git a/src/js/16-modal-bmi.js b/src/js/16-modal-bmi.js index 74afede..1951063 100644 --- a/src/js/16-modal-bmi.js +++ b/src/js/16-modal-bmi.js @@ -1,53 +1,89 @@ -const teamLink = document.querySelector('.bmi__link'); -const teamBackdrop = document.querySelector('.bmi__backdrop'); -const teamCloseBtn = document.querySelector('.bmi__modal-close-btn'); +document.addEventListener('DOMContentLoaded', function () { + const teamLink = document.querySelector('.bmi__link'); + const teamBackdrop = document.querySelector('.bmi__backdrop'); + const teamCloseBtn = document.querySelector('.bmi__modal-close-btn'); + const asideImg = document.querySelector('.aside__img'); + const bmiInputEl = document.getElementById('bmi-result'); + const heightInput = document.getElementById('height'); + const weightInput = document.getElementById('weight'); + const btnEl = document.getElementById('btn'); + const weightConditionEl = document.getElementById('weight-condition'); -function onLinkClick(event) { - event.preventDefault(); - - teamBackdrop.classList.remove('is-hidden'); - document.body.classList.add('modal-open'); + function onLinkClick(event) { + event.preventDefault(); + resetInputs(); + openModal(); + } - addAllEventListeners(); -} + function onAsideImgClick() { + resetInputs(); + openModal(); + } -function onEscClick(event) { - event.preventDefault(); + function onEscClick(event) { + if (event.code === 'Escape') { + closingModalStaff(); + } + } - if (event.code !== 'Escape') { - return; + function onBackdropClick(event) { + if (!event.target.closest('.bmi__wrapper')) { + closingModalStaff(); + } } - closingModalStaff(); -} + function onCloseBtnClick(event) { + event.preventDefault(); + closingModalStaff(); + } -function onBackdropClick(event) { - if (event.target.closest('.bmi__wrapper')) { - return; + function addAllEventListeners() { + document.addEventListener('keydown', onEscClick); + teamBackdrop.addEventListener('click', onBackdropClick); + teamCloseBtn.addEventListener('click', onCloseBtnClick); + asideImg.addEventListener('click', onAsideImgClick); } - closingModalStaff(); -} + function closingModalStaff() { + document.removeEventListener('keydown', onEscClick); + teamBackdrop.removeEventListener('click', onBackdropClick); + teamCloseBtn.removeEventListener('click', onCloseBtnClick); + asideImg.removeEventListener('click', onAsideImgClick); -function onCloseBtnClick(event) { - event.preventDefault(); + teamBackdrop.classList.add('is-hidden'); + document.body.classList.remove('modal-open'); + } - closingModalStaff(); -} + function openModal() { + teamBackdrop.classList.remove('is-hidden'); + document.body.classList.add('modal-open'); + addAllEventListeners(); + } -function addAllEventListeners() { - document.addEventListener('keydown', onEscClick); - teamBackdrop.addEventListener('click', onBackdropClick); - teamCloseBtn.addEventListener('click', onCloseBtnClick); -} + function resetInputs() { + heightInput.value = '180'; + weightInput.value = '80'; + bmiInputEl.value = ''; + } -function closingModalStaff() { - document.removeEventListener('keydown', onEscClick); - teamBackdrop.removeEventListener('click', onBackdropClick); - teamCloseBtn.removeEventListener('click', onCloseBtnClick); + function calculateBMI() { + const heightValue = heightInput.value / 100; + const weightValue = weightInput.value; + const bmiValue = (weightValue / (heightValue * heightValue)).toFixed(1); - teamBackdrop.classList.add('is-hidden'); - document.body.classList.remove('modal-open'); -} + bmiInputEl.value = bmiValue; + + if (bmiValue < 18.5) { + weightConditionEl.innerText = 'Under weight!'; + } else if (bmiValue >= 18.5 && bmiValue <= 24.9) { + weightConditionEl.innerText = 'Normal weight!'; + } else if (bmiValue >= 25 && bmiValue <= 29.9) { + weightConditionEl.innerText = 'Overweight!'; + } else if (bmiValue >= 30) { + weightConditionEl.innerText = 'Obesity!'; + } + } -teamLink.addEventListener('click', onLinkClick); + btnEl.addEventListener('click', calculateBMI); + teamLink.addEventListener('click', onLinkClick); +}); diff --git a/src/partials/02-hero.html b/src/partials/02-hero.html index e8356d0..ccdf8c6 100644 --- a/src/partials/02-hero.html +++ b/src/partials/02-hero.html @@ -80,42 +80,5 @@

-