An advanced client-side Health Analysis Dashboard that goes beyond basic BMI calculation by providing multi-metric insights, visualizations, and actionable health feedback — all running instantly in the browser.

⚡ No backend. No APIs. Pure HTML + CSS + JavaScript.

🚀 Try the hosted version here:
👉 Live Health Metrics Calculator

No installation needed — runs instantly in your browser.

Most calculators stop at:

👉 “Your BMI is 23”

This project goes further:

👉 Converts inputs → Calculates metrics → Visualizes results → Explains meaning → Suggests actions

So instead of just numbers, users get understanding + direction.

This project is an improved version of an earlier system:

Advanced BMI Calculator (Flask-based)

Health Metrics Calculator (Fully Client-Side, Deployed Online)

Supports real-world flexible inputs:

• cm
• meters
• millimeters
• inches
• feet + inches (dual input)

• kg
• grams
• lbs
• oz

👉 Internally normalized to cm + kg

BMI = weight (kg) / height² (m)

Male:   1.20 × BMI + 0.23 × Age − 16.2
Female: 1.20 × BMI + 0.23 × Age − 5.4

Male:   88.362 + 13.397W + 4.799H − 5.677A
Female: 447.593 + 9.247W + 3.098H − 4.330A

TDEE = BMR × Activity Level

This project focuses heavily on making data understandable visually.

• Semi-circular SVG meter
• Needle rotates based on BMI
• Color-coded health zones

• Shows:

  • Your current weight
  • Ideal weight range

• Includes:

  • Highlighted target zone
  • “YOU” marker

• Visual percentage scale
• Indicates lean → high fat levels

• BMR vs TDEE representation

• Calorie target marker for:

  • Gain / Maintain / Loss

This is the core logic layer of the project.

• Underweight
• Healthy
• Overweight
• Obese

• High BMI + low fat → possible muscular case
• Normal BMI + high fat → possible “skinny fat”

Example:

"You are 4.5 kg above your healthy range"

• Assumes safe rate:

  0.5 kg per week
  

• Estimates time to reach healthy range

Each category includes:

• Nutrition advice
• Activity guidance
• Lifestyle improvements

• Glassmorphism cards
• Animated gradient background
• Floating ambient orbs
• Smooth number animations
• Staggered result reveal
• Tooltip explanations
• Screen pulse feedback based on health status

health-metrics-calculator/assets/ui.png

health-metrics-calculator/assets/healthybmidemo.gif

health-metrics-calculator/assets/obesebmidemo.gif

health-metrics-calculator/assets/underweightbmidemo.gif

• HTML5
• Tailwind CSS
• Vanilla JavaScript
• SVG (for gauge)
• Font Awesome

Use the hosted version directly in your browser:

👉 Live Health Metrics Calculator

Open the file:

health-metrics-calculator/index2.html

cd advanced-bmi-calculator
pip install flask
python app.py

Then open:

http://127.0.0.1:5000

The folder:

advanced-bmi-calculator/

contains the earlier implementation which:

• Used Flask backend
• Focused mainly on BMI calculation
• Had a simpler UI and fewer insights

This version demonstrates the initial system design, while the new version shows refactoring into a faster, more interactive architecture.

• Strong JavaScript logic & DOM manipulation
• Real-world formula implementation
• Data → visualization mapping
• UI/UX thinking with interactive feedback
• Ability to refactor and improve an existing system

This tool is for educational purposes only.

BMI does not account for:

• Muscle mass
• Bone density
• Body composition differences

Consult a medical professional for accurate health advice.

Aayush Dattatray Kadam AI & ML Engineering Student

🔗 https://github.com/Aayushinit

• Save user history (local storage)
• Export report (PDF)
• More health metrics (e.g., waist ratio)
• Voice input
• Mobile app version