diff --git a/Domains/Frontend/MiniProjects/BMICalculator/._index.html b/Domains/Frontend/MiniProjects/BMICalculator/._index.html new file mode 100644 index 00000000..0bc0501a Binary files /dev/null and b/Domains/Frontend/MiniProjects/BMICalculator/._index.html differ 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