-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #57 from ViktorSvertoka/bmifix
- Loading branch information
Showing
3 changed files
with
75 additions
and
230 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,106 +1,89 @@ | ||
| 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'); | ||
|
|
||
| function onLinkClick(event) { | ||
| event.preventDefault(); | ||
|
|
||
| heightInput.value = '180'; | ||
| weightInput.value = '80'; | ||
| bmiInputEl.value = ''; | ||
|
|
||
| teamBackdrop.classList.remove('is-hidden'); | ||
| document.body.classList.add('modal-open'); | ||
|
|
||
| addAllEventListeners(); | ||
| } | ||
|
|
||
| function onAsideImgClick() { | ||
|
|
||
| heightInput.value = '180'; | ||
| weightInput.value = '80'; | ||
| bmiInputEl.value = ''; | ||
|
|
||
| teamBackdrop.classList.remove('is-hidden'); | ||
| document.body.classList.add('modal-open'); | ||
|
|
||
| addAllEventListeners(); | ||
| } | ||
|
|
||
| function onEscClick(event) { | ||
| event.preventDefault(); | ||
|
|
||
| if (event.code !== 'Escape') { | ||
| return; | ||
| 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(); | ||
| resetInputs(); | ||
| openModal(); | ||
| } | ||
|
|
||
| closingModalStaff(); | ||
| } | ||
|
|
||
| function onBackdropClick(event) { | ||
| if (event.target.closest('.bmi__wrapper')) { | ||
| return; | ||
| function onAsideImgClick() { | ||
| resetInputs(); | ||
| openModal(); | ||
| } | ||
|
|
||
| closingModalStaff(); | ||
| } | ||
|
|
||
| function onCloseBtnClick(event) { | ||
| event.preventDefault(); | ||
|
|
||
| closingModalStaff(); | ||
| } | ||
|
|
||
| function addAllEventListeners() { | ||
| document.addEventListener('keydown', onEscClick); | ||
| teamBackdrop.addEventListener('click', onBackdropClick); | ||
| teamCloseBtn.addEventListener('click', onCloseBtnClick); | ||
| asideImg.addEventListener('click', onAsideImgClick); | ||
| } | ||
|
|
||
| function closingModalStaff() { | ||
| document.removeEventListener('keydown', onEscClick); | ||
| teamBackdrop.removeEventListener('click', onBackdropClick); | ||
| teamCloseBtn.removeEventListener('click', onCloseBtnClick); | ||
| asideImg.removeEventListener('click', onAsideImgClick); | ||
|
|
||
| teamBackdrop.classList.add('is-hidden'); | ||
| document.body.classList.remove('modal-open'); | ||
| function onEscClick(event) { | ||
| if (event.code === 'Escape') { | ||
| closingModalStaff(); | ||
| } | ||
| } | ||
|
|
||
| addAllEventListeners(); | ||
| } | ||
| function onBackdropClick(event) { | ||
| if (!event.target.closest('.bmi__wrapper')) { | ||
| closingModalStaff(); | ||
| } | ||
| } | ||
|
|
||
| document.addEventListener('DOMContentLoaded', function () { | ||
| addAllEventListeners(); | ||
| }); | ||
| function onCloseBtnClick(event) { | ||
| event.preventDefault(); | ||
| closingModalStaff(); | ||
| } | ||
|
|
||
| teamLink.addEventListener('click', onLinkClick); | ||
| function addAllEventListeners() { | ||
| document.addEventListener('keydown', onEscClick); | ||
| teamBackdrop.addEventListener('click', onBackdropClick); | ||
| teamCloseBtn.addEventListener('click', onCloseBtnClick); | ||
| asideImg.addEventListener('click', onAsideImgClick); | ||
| } | ||
|
|
||
| const btnEl = document.getElementById('btn'); | ||
| const weightConditionEl = document.getElementById('weight-condition'); | ||
| function closingModalStaff() { | ||
| document.removeEventListener('keydown', onEscClick); | ||
| teamBackdrop.removeEventListener('click', onBackdropClick); | ||
| teamCloseBtn.removeEventListener('click', onCloseBtnClick); | ||
| asideImg.removeEventListener('click', onAsideImgClick); | ||
|
|
||
| function calculateBMI() { | ||
| const heightValue = document.getElementById('height').value / 100; | ||
| const weightValue = document.getElementById('weight').value; | ||
| teamBackdrop.classList.add('is-hidden'); | ||
| document.body.classList.remove('modal-open'); | ||
| } | ||
|
|
||
| const bmiValue = (weightValue / (heightValue * heightValue)).toFixed(1); | ||
| function openModal() { | ||
| teamBackdrop.classList.remove('is-hidden'); | ||
| document.body.classList.add('modal-open'); | ||
| addAllEventListeners(); | ||
| } | ||
|
|
||
| bmiInputEl.value = bmiValue; | ||
| function resetInputs() { | ||
| heightInput.value = '180'; | ||
| weightInput.value = '80'; | ||
| bmiInputEl.value = ''; | ||
| } | ||
|
|
||
| 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!'; | ||
| function calculateBMI() { | ||
| const heightValue = heightInput.value / 100; | ||
| const weightValue = weightInput.value; | ||
| const bmiValue = (weightValue / (heightValue * heightValue)).toFixed(1); | ||
|
|
||
| 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!'; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| btnEl.addEventListener('click', calculateBMI); | ||
| btnEl.addEventListener('click', calculateBMI); | ||
| teamLink.addEventListener('click', onLinkClick); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -80,42 +80,5 @@ <h1 class="hero__title"> | |
| </li> | ||
| </ul> | ||
| </div> | ||
| <!-- <div class="hero__bmi-wrap"> | ||
| <img | ||
| class="hero__bmi-pic" | ||
| src="./img/hero-image-bmi.jpg" | ||
| srcset="./img/[email protected] 2x" | ||
| alt="young woman working out alone outdoors" | ||
| /> | ||
| <div class="hero__bmi"> | ||
| <h2 class="hero__bmi-title"> | ||
| <span class="hero__bmi-title-part">Body</span> Mass Index (BMI) | ||
| Calculator | ||
| </h2> | ||
| <label class="hero__label"> | ||
| Your Height (cm): | ||
| <input | ||
| type="number" | ||
| class="hero__input" | ||
| id="height" | ||
| value="180" | ||
| placeholder="Enter your height in cm" | ||
| /></label> | ||
| <label class="hero__label" | ||
| >Your Weight (kg): | ||
| <input | ||
| type="number" | ||
| class="hero__input" | ||
| id="weight" | ||
| value="80" | ||
| placeholder="Enter your weight in kg" | ||
| /></label> | ||
| <button class="hero__btn" id="btn">Compute BMI</button> | ||
| <input disabled type="text" class="hero__input" id="bmi-result" /> | ||
| <h3 class="hero__info-text"> | ||
| Weight Condition: <span id="weight-condition"></span> | ||
| </h3> | ||
| </div> | ||
| </div> --> | ||
| </div> | ||
| </section> | ||