From 106e6e05c30edcc6a0121f58e94873867b73a986 Mon Sep 17 00:00:00 2001 From: Aaditya Kharat Date: Mon, 20 Oct 2025 12:07:23 +0530 Subject: [PATCH 1/2] Add: Frontend - BMI Calculator --- .../MiniProjects/BMICalculator/README.md | 13 ++++ .../MiniProjects/BMICalculator/index.html | 26 +++++++ .../MiniProjects/BMICalculator/script.js | 34 ++++++++++ .../MiniProjects/BMICalculator/style.css | 68 +++++++++++++++++++ 4 files changed, 141 insertions(+) create mode 100644 Domains/Frontend/MiniProjects/BMICalculator/README.md create mode 100644 Domains/Frontend/MiniProjects/BMICalculator/index.html create mode 100644 Domains/Frontend/MiniProjects/BMICalculator/script.js create mode 100644 Domains/Frontend/MiniProjects/BMICalculator/style.css diff --git a/Domains/Frontend/MiniProjects/BMICalculator/README.md b/Domains/Frontend/MiniProjects/BMICalculator/README.md new file mode 100644 index 00000000..c40bef11 --- /dev/null +++ b/Domains/Frontend/MiniProjects/BMICalculator/README.md @@ -0,0 +1,13 @@ +# BMI Calculator +**Contributor:** Aaditya-2407 + +## Description +A web app that calculates a user's Body Mass Index (BMI) based on their height (cm) and weight (kg). + +## Tech Stack +- HTML +- CSS +- JavaScript (Vanilla) + +## How to Run +1. Open the `index.html` file in your web browser. \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/BMICalculator/index.html b/Domains/Frontend/MiniProjects/BMICalculator/index.html new file mode 100644 index 00000000..9c7017ca --- /dev/null +++ b/Domains/Frontend/MiniProjects/BMICalculator/index.html @@ -0,0 +1,26 @@ + + + + + + BMI Calculator + + + +
+

BMI Calculator

+
+ + +
+
+ + +
+ +
+
+
+ + + \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/BMICalculator/script.js b/Domains/Frontend/MiniProjects/BMICalculator/script.js new file mode 100644 index 00000000..f27faf44 --- /dev/null +++ b/Domains/Frontend/MiniProjects/BMICalculator/script.js @@ -0,0 +1,34 @@ +const heightInput = document.getElementById('height'); +const weightInput = document.getElementById('weight'); +const calculateBtn = document.getElementById('calculate-btn'); +const resultContainer = document.getElementById('result-container'); + +function calculateBMI() { + const height = parseFloat(heightInput.value); + const weight = parseFloat(weightInput.value); + + if (isNaN(height) || isNaN(weight) || height <= 0 || weight <= 0) { + resultContainer.innerHTML = 'Please enter valid height and weight.'; + return; + } + + // BMI Calculation: weight (kg) / (height (m))^2 + const heightInMeters = height / 100; + const bmi = weight / (heightInMeters * heightInMeters); + const bmiFormatted = bmi.toFixed(2); + + let category = ''; + if (bmi < 18.5) { + category = 'Underweight'; + } else if (bmi < 24.9) { + category = 'Normal weight'; + } else if (bmi < 29.9) { + category = 'Overweight'; + } else { + category = 'Obesity'; + } + + resultContainer.innerHTML = `Your BMI is: ${bmiFormatted}
Category: ${category}`; +} + +calculateBtn.addEventListener('click', calculateBMI); \ No newline at end of file diff --git a/Domains/Frontend/MiniProjects/BMICalculator/style.css b/Domains/Frontend/MiniProjects/BMICalculator/style.css new file mode 100644 index 00000000..82696793 --- /dev/null +++ b/Domains/Frontend/MiniProjects/BMICalculator/style.css @@ -0,0 +1,68 @@ +body { + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + background-color: #f0f2f5; + margin: 0; +} + +.bmi-container { + width: 90%; + max-width: 400px; + padding: 2rem; + background-color: #ffffff; + border-radius: 16px; + box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); + text-align: center; +} + +h1 { + color: #333; + margin-bottom: 1.5rem; +} + +.input-group { + margin-bottom: 1rem; + text-align: left; +} + +.input-group label { + display: block; + margin-bottom: 0.5rem; + color: #555; + font-weight: 500; +} + +.input-group input { + width: 100%; + padding: 0.75rem; + border: 1px solid #ddd; + border-radius: 8px; + box-sizing: border-box; /* Important for padding to work correctly */ +} + +button { + font-size: 1rem; + font-weight: 600; + color: #ffffff; + background-color: #007aff; + border: none; + padding: 0.75rem 1.5rem; + border-radius: 8px; + cursor: pointer; + transition: background-color 0.2s ease; + width: 100%; + margin-top: 0.5rem; +} + +button:hover { + background-color: #0056b3; +} + +.result { + margin-top: 1.5rem; + font-size: 1.1rem; + line-height: 1.6; +} \ No newline at end of file From 8e3a37010e4e2adb0bd76abcc791b2e7b9cc95f6 Mon Sep 17 00:00:00 2001 From: Aaditya Kharat Date: Mon, 20 Oct 2025 12:11:32 +0530 Subject: [PATCH 2/2] Add: Frontend - BMI Calculator --- .../MiniProjects/BMICalculator/._index.html | Bin 0 -> 4096 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 Domains/Frontend/MiniProjects/BMICalculator/._index.html diff --git a/Domains/Frontend/MiniProjects/BMICalculator/._index.html b/Domains/Frontend/MiniProjects/BMICalculator/._index.html new file mode 100644 index 0000000000000000000000000000000000000000..0bc0501a877351d2bddbab0f83df14f26cb5a2bf GIT binary patch literal 4096 zcmZQz6=P>$Vqox1Ojhs@R)|o50+1L3ClDJkFz{^v(m+1nBL)UWIUt(=a103vf+zv$ zU|0ae0uVl&WCXGn05MQpDmgz_FR`E?Csi*evACqPI5j0Du_RSFAQ+^2-;J*sAbK@d zixr3-1*0J_8UmvsFd71*Aut*OqaiRF0;3@?8UmvsFd71*A%H6cK%Gqx1_QZ}jLc$% zqSWI2(xT*4g|z&lY=z9clGMDC%>2B>oSaI9oYb@ug`}Lsylh}!7^-VXQ>gxjdqsvp H?*D%Pi!~}` literal 0 HcmV?d00001