diff --git a/Domains/Frontend/MiniProjects/BMICalculator/index.html b/Domains/Frontend/MiniProjects/BMICalculator/index.html index 55bc08a7..98e11db0 100644 --- a/Domains/Frontend/MiniProjects/BMICalculator/index.html +++ b/Domains/Frontend/MiniProjects/BMICalculator/index.html @@ -1,45 +1,160 @@ - - - BMI Calculator - + + + BMI Calculator + + + + + + + + + + + + + + -
-
-

BMI Calculator

- -
- -
-
- - -
- -
- - -
- - - -
-

Your BMI: —

-

Category: —

-
-
- - -
- - + +
+
+
+ + +
+

+ BMI Calculator +

+

Track your body mass index to stay in good health.

+
+ +
+ +
+
+
+

Calculate Your BMI

+
+ +
+ +
+ + +
+
+ +
+ +
+ + +
+
+ + + + +
+
+
+
+ + +
+
+
+

Your Result

+

22.9

+

Normal

+
+
+
+
+ + +
+
+
+
+

What is BMI?

+
+ +
+

+ +

+
+
+ Being underweight may indicate malnutrition or other health issues. It's important to ensure you are getting enough nutrients. Consider consulting a healthcare provider to discuss a healthy diet. +
+
+
+ +
+

+ +

+
+
+ Congratulations! A BMI in this range suggests you are at a healthy weight for your height. Maintaining a balanced diet and regular physical activity is key to staying in this range. +
+
+
+ +
+

+ +

+
+
+ A BMI in this range may indicate a higher risk of developing certain health conditions. Small changes in diet and increasing physical activity can make a significant difference. +
+
+
+ +
+

+ +

+
+
+ This range is associated with a higher risk of serious health conditions like heart disease and diabetes. It's recommended to consult with a healthcare professional for guidance on a safe and effective health plan. +
+
+
+
+
+
+
+
+ +
+
+
+ + + + + + diff --git a/Domains/Frontend/MiniProjects/BMICalculator/script.js b/Domains/Frontend/MiniProjects/BMICalculator/script.js index 3ab3788b..8f559c1e 100644 --- a/Domains/Frontend/MiniProjects/BMICalculator/script.js +++ b/Domains/Frontend/MiniProjects/BMICalculator/script.js @@ -1,58 +1,74 @@ -// script.js - -const weightInput = document.getElementById("weight"); -const heightInput = document.getElementById("height"); -const calculateBtn = document.getElementById("calculateBtn"); -const bmiValue = document.getElementById("bmiValue"); -const bmiCategory = document.getElementById("bmiCategory"); -const resultDiv = document.getElementById("result"); -const themeToggle = document.getElementById("themeToggle"); - -// Dark/Light mode -function initTheme() { - const saved = localStorage.getItem("bmi_theme"); - if(saved==="dark") document.body.classList.add("dark"), themeToggle.checked=true; -} -initTheme(); - -themeToggle.addEventListener("change", () => { - if(themeToggle.checked){ - document.body.classList.add("dark"); - localStorage.setItem("bmi_theme","dark"); - }else{ - document.body.classList.remove("dark"); - localStorage.setItem("bmi_theme","light"); - } +// Wait for the DOM to be fully loaded +document.addEventListener("DOMContentLoaded", () => { + + // Get all necessary elements from the DOM + const bmiForm = document.getElementById("bmi-form"); + const weightInput = document.getElementById("weight"); + const heightInput = document.getElementById("height"); + const errorMessage = document.getElementById("error-message"); + + const resultCard = document.getElementById("result-card"); + const bmiValueEl = document.getElementById("bmi-value"); + const bmiCategoryEl = document.getElementById("bmi-category"); + + // Listen for the form submission + bmiForm.addEventListener("submit", (event) => { + // Prevent the form from actually submitting (which reloads the page) + event.preventDefault(); + + // Get and parse the values + const weight = parseFloat(weightInput.value); + const height = parseFloat(heightInput.value); + + // --- Input Validation --- + // Check if values are not numbers, or are less than or equal to zero + if (isNaN(weight) || isNaN(height) || weight <= 0 || height <= 0) { + // Show the error message + errorMessage.textContent = "Please enter valid positive numbers for weight and height."; + errorMessage.classList.remove("d-none"); + + // Hide the result card + resultCard.classList.add("d-none"); + return; // Stop the function + } + + // If validation passes, hide the error message + errorMessage.classList.add("d-none"); + + // --- BMI Calculation --- + const heightInMeters = height / 100; + const bmi = weight / (heightInMeters * heightInMeters); + const roundedBMI = bmi.toFixed(1); // Round to one decimal place + + // --- Determine Category --- + let category = ""; + let categoryClass = ""; + + if (bmi < 18.5) { + category = "Underweight"; + categoryClass = "text-underweight"; // Custom class from styles.css + } else if (bmi < 25) { + category = "Normal"; + categoryClass = "text-normal"; + } else if (bmi < 30) { + category = "Overweight"; + categoryClass = "text-overweight"; + } else { + category = "Obese"; + categoryClass = "text-obese"; + } + + // --- Display Results --- + bmiValueEl.textContent = roundedBMI; + bmiCategoryEl.textContent = category; + + // Update the category element's classes + // We reset the class list and add the new ones + bmiCategoryEl.className = "h4"; // Base class + bmiCategoryEl.classList.add(categoryClass); + + // Show the result card + resultCard.classList.remove("d-none"); + }); }); -// BMI Calculation -function calculateBMI(){ - const weight = parseFloat(weightInput.value); - const heightCm = parseFloat(heightInput.value); - if(!weight || !heightCm){ - alert("Please enter valid weight and height"); - return; - } - - const heightM = heightCm / 100; - const bmi = weight / (heightM * heightM); - const roundedBMI = bmi.toFixed(1); - bmiValue.textContent = roundedBMI; - - let category = ""; - let color = ""; - - if(bmi<18.5){category="Underweight"; color="#ffd86b";} - else if(bmi<25){category="Normal"; color="#7cf59b";} - else if(bmi<30){category="Overweight"; color="#ffb86b";} - else{category="Obese"; color="#ff5f5f";} - - bmiCategory.textContent = category; - resultDiv.style.color = color; - - // Simple animation - resultDiv.style.transform="scale(1.1)"; - setTimeout(()=>resultDiv.style.transform="scale(1)",300); -} - -calculateBtn.addEventListener("click", calculateBMI); diff --git a/Domains/Frontend/MiniProjects/BMICalculator/styles.css b/Domains/Frontend/MiniProjects/BMICalculator/styles.css index f016b119..91f77a1a 100644 --- a/Domains/Frontend/MiniProjects/BMICalculator/styles.css +++ b/Domains/Frontend/MiniProjects/BMICalculator/styles.css @@ -1,109 +1,82 @@ +/* Import Google Font */ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap'); + +/* --- Custom Variables & Base --- */ :root { - --bg: #f4f7fb; - --card: #ffffff; - --text: #17202a; - --muted: #536170; - --accent: #0066ff; - --radius: 12px; - --danger: #e64c65; - --success: #3ae374; + /* Customizing Bootstrap's theme colors for a "healthy" feel */ + --bs-primary: #198754; /* A nice, healthy green */ + --bs-primary-rgb: 25, 135, 84; + --bs-body-font-family: 'Inter', sans-serif; + --bs-body-bg: #f4f9f4; /* A very light, fresh green background */ + --bs-card-border-radius: 1rem; /* Softer, rounded cards */ + --bs-card-border-width: 0; } -*{box-sizing:border-box;} -body{ - margin:0; - font-family:Inter, sans-serif; - background: var(--bg); - color: var(--text); - display:flex; - justify-content:center; - align-items:flex-start; - min-height:100vh; - padding:20px; - transition: background 0.3s, color 0.3s; +body { + font-family: var(--bs-body-font-family); + background-color: var(--bs-body-bg); + color: #333; } -.container{ - max-width: 400px; - width:100%; +/* --- Card Styling --- */ +.card { + border-radius: var(--bs-card-border-radius); + transition: transform 0.3s ease, box-shadow 0.3s ease; } -.header{ - display:flex; - justify-content:space-between; - align-items:center; - margin-bottom:16px; +.card:hover { + transform: translateY(-5px); + box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.08) !important; } -.header h1{margin:0;font-size:1.6rem;} -.theme-toggle{display:flex;align-items:center;gap:8px;font-size:0.9rem;} -.theme-toggle input{width:18px;height:18px;} - -.card{ - background: var(--card); - padding:20px; - border-radius:var(--radius); - box-shadow:0 6px 18px rgba(23,32,42,0.06); +/* --- Input Group Styling --- */ +.input-group-text { + background-color: #e9ecef; + border: 1px solid #ced4da; + color: var(--bs-primary); } -.input-group{ - display:flex; - flex-direction:column; - margin-bottom:12px; +.form-control:focus { + border-color: var(--bs-primary); + box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25); } -.input-group label{ - font-size:0.9rem; - margin-bottom:4px; +/* --- Result Category Colors --- */ +/* We use Bootstrap's built-in text color classes */ +.text-underweight { + color: var(--bs-warning-dark) !important; } -.input-group input{ - padding:10px; - font-size:1rem; - border-radius:8px; - border:1px solid #e6eef7; +.text-normal { + color: var(--bs-success-dark) !important; } -.btn{ - width:100%; - padding:10px; - border:0; - border-radius:8px; - cursor:pointer; - font-weight:600; - margin-top:8px; +.text-overweight { + color: var(--bs-warning-dark) !important; } -.btn.primary{ - background: linear-gradient(90deg, var(--accent), #3aa1ff); - color:white; +.text-obese { + color: var(--bs-danger-dark) !important; } -.result{ - margin-top:16px; - text-align:center; - font-weight:600; - font-size:1rem; - transition: transform 0.3s, color 0.3s; +/* --- Accordion Styling --- */ +.accordion-button { + font-weight: 600; } -.footer{ - text-align:center; - margin-top:12px; - color: var(--muted); - font-size:0.85rem; +.accordion-button:not(.collapsed) { + color: var(--bs-primary); + background-color: #e8f3ee; } -/* Dark mode */ -body.dark{ - --bg:#0f1720; - --card:#0b1220; - --text:#e6eef8; - --muted:#a8b3c3; +.accordion-item { + border: 1px solid #dee2e6; + border-radius: 0.5rem; + margin-bottom: 0.5rem; + overflow: hidden; /* For border-radius */ } -body.dark .input-group input{ - background:#071427; - color:var(--text); - border:1px solid #0f2436; +.accordion-item:first-of-type, +.accordion-item:last-of-type { + border-radius: 0.5rem; }