Skip to content

Enhanced BMI Calculator #156

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Tejas-Santosh-Nalawade merged 1 commit into from
Oct 23, 2025
Merged

Enhanced BMI Calculator #156

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
191 changes: 153 additions & 38 deletions Domains/Frontend/MiniProjects/BMICalculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,160 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI Calculator</title>
<link rel="stylesheet" href="styles.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI Calculator</title>

<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" xintegrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">

<!-- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">

<!-- Custom Google Font -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700&display=swap" rel="stylesheet">

<!-- Custom CSS -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<main class="container">
<header class="header">
<h1>BMI Calculator</h1>
<label class="theme-toggle">
<input type="checkbox" id="themeToggle">
<span>Dark Mode</span>
</label>
</header>

<section class="calculator card">
<div class="input-group">
<label for="weight">Weight (kg)</label>
<input type="number" id="weight" placeholder="e.g., 70">
</div>

<div class="input-group">
<label for="height">Height (cm)</label>
<input type="number" id="height" placeholder="e.g., 170">
</div>

<button id="calculateBtn" class="btn primary">Calculate BMI</button>

<div id="result" class="result">
<p>Your BMI: <span id="bmiValue">—</span></p>
<p>Category: <span id="bmiCategory">—</span></p>
</div>
</section>

<footer class="footer">
<small>Built with ❤️ • HTML • CSS • JavaScript</small>
</footer>
</main>

<script src="script.js" defer></script>

<div class="container my-5">
<div class="row justify-content-center">
<div class="col-lg-10">

<!-- Title -->
<header class="text-center mb-4">
<h1 class="display-5 fw-bold text-primary">
<i class="bi bi-heart-pulse-fill"></i> BMI Calculator
</h1>
<p class="lead text-muted">Track your body mass index to stay in good health.</p>
</header>

<div class="row">
<!-- Calculator Card -->
<div class="col-md-6 mb-4">
<div class="card h-100 shadow-sm border-0">
<div class="card-body p-4">
<h2 class="h4 card-title fw-semibold mb-3">Calculate Your BMI</h2>
<form id="bmi-form">
<!-- Weight Input -->
<div class="mb-3">
<label for="weight" class="form-label">Weight (kg)</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-speedometer2"></i></span>
<input type="number" class="form-control" id="weight" placeholder="e.g., 70" step="0.1" required>
</div>
</div>
<!-- Height Input -->
<div class="mb-3">
<label for="height" class="form-label">Height (cm)</label>
<div class="input-group">
<span class="input-group-text"><i class="bi bi-rulers"></i></span>
<input type="number" class="form-control" id="height" placeholder="e.g., 175" step="0.1" required>
</div>
</div>
<!-- Error Message -->
<div class="alert alert-danger d-none" id="error-message" role="alert">
Please enter a valid positive weight and height.
</div>
<!-- Submit Button -->
<button type="submit" class="btn btn-primary w-100 btn-lg">
Calculate
<i class="bi bi-calculator-fill ms-1"></i>
</button>
</form>
</div>
</div>
</div>

<!-- Result Card (Initially Hidden) -->
<div class="col-md-6 mb-4">
<div class="card h-100 shadow-sm border-0 d-none" id="result-card">
<div class="card-body p-4 d-flex flex-column justify-content-center text-center">
<h2 class="h4 card-title fw-semibold mb-3">Your Result</h2>
<h1 class="display-2 fw-bold" id="bmi-value">22.9</h1>
<p class="h4" id="bmi-category">Normal</p>
</div>
</div>
</div>
</div>

<!-- BMI Information Section -->
<div class="row mt-4">
<div class="col-12">
<div class="card shadow-sm border-0">
<div class="card-body p-4">
<h2 class="h4 card-title fw-semibold text-center mb-4">What is BMI?</h2>
<div class="accordion" id="bmi-info-accordion">
<!-- Item 1 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<strong>Underweight (BMI < 18.5)</strong>
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#bmi-info-accordion">
<div class="accordion-body">
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.
</div>
</div>
</div>
<!-- Item 2 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<strong>Normal (BMI 18.5 - 24.9)</strong>
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse show" aria-labelledby="headingTwo" data-bs-parent="#bmi-info-accordion">
<div class="accordion-body">
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.
</div>
</div>
</div>
<!-- Item 3 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<strong>Overweight (BMI 25 - 29.9)</strong>
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#bmi-info-accordion">
<div class="accordion-body">
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.
</div>
</div>
</div>
<!-- Item 4 -->
<div class="accordion-item">
<h2 class="accordion-header" id="headingFour">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
<strong>Obese (BMI ≥ 30)</strong>
</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" aria-labelledby="headingFour" data-bs-parent="#bmi-info-accordion">
<div class="accordion-body">
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.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

</div>
</div>
</div>

<!-- Bootstrap JS Bundle -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" xintegrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<!-- Custom JS -->
<script src="script.js" defer></script>
</body>
</html>

128 changes: 72 additions & 56 deletions Domains/Frontend/MiniProjects/BMICalculator/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Loading
Loading