🏥 BMI Calculator - Health Meter

A responsive Body Mass Index (BMI) Calculator built with HTML, CSS, and JavaScript that validates inputs, calculates BMI, and displays results with a dynamic color-coded health meter.

📸 Screenshots :

✨ Features

• 📏 Input Validation - Validates height (cm) and weight (kg) inputs
• 🧮 Accurate BMI Calculation - Uses standard BMI formula with proper unit conversion
• 🎨 Visual Health Meter - Animated progress bar that changes color based on BMI category
• 📱 Responsive Design - Works seamlessly on desktop and mobile devices
• 🎯 Color-Coded Results - Different colors for Underweight, Normal, and Overweight categories
• ⚡ Real-time Feedback - Instant calculation and visual representation
• 🖥️ Clean UI - Modern design with smooth animations and hover effects

📋 BMI Categories

Category	BMI Range	Color	Meter Fill
Underweight	< 18.6	🟠 Orange	30%
Normal	18.6 - 24.9	🟢 Green	60%
Overweight	> 24.9	🔴 Red	90%

🛠️ Technologies Used

• HTML5 - Semantic markup and structure
• CSS3 - Styling, animations, and responsive design
• JavaScript (ES6+) - Logic, calculations, and DOM manipulation

📁 Project Structure

Health-Meter/
├── index.html          # Main HTML structure
├── style.css           # Styling and animations
├── script.js           # BMI calculation logic
└── README.md           # Project documentation

🔧 Installation & Usage

Option 1: Clone the Repository

git clone https://github.com/JwelSrivastava/Health-Meter.git
cd Health-Meter

Option 2: Download ZIP

1. Click the green "Code" button on GitHub
2. Select "Download ZIP"
3. Extract the files to your desired location

Run the Application

1. Open index.html in your web browser
2. Enter your height in centimeters
3. Enter your weight in kilograms
4. Click "Calculate" to see your BMI result and health meter

💡 How It Works

1. Input Collection - User enters height (cm) and weight (kg)
2. Validation - JavaScript validates inputs for positive numbers
3. BMI Calculation - Formula: BMI = weight(kg) / (height(m))²
4. Categorization - Result is categorized based on standard BMI ranges
5. Visual Display - Health meter animates to show BMI category with appropriate color

🎨 Key Features Breakdown

Input Validation

if (isNaN(height) || height <= 0) {
    results.innerHTML = `Please give a valid height!`;
}

BMI Calculation

const bmi = (weight / ((height * height) / 10000)).toFixed(2);

Dynamic Health Meter

• Animated width transition based on BMI category
• Color changes (Orange → Green → Red)
• Smooth CSS transitions for better UX

📱 Responsive Design

• Mobile-friendly layout
• Flexible container that adapts to screen size
• Touch-friendly button design
• Readable fonts and appropriate sizing

🤝 Contributing

Contributions are welcome! Here's how you can help:

1. Fork the repository
2. Create a feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

📝 Future Enhancements

• Imperial units support (feet/inches, pounds)
• BMI history tracking with local storage
• Additional health metrics (ideal weight range)
• Print/share BMI results
• Dark mode toggle
• Multiple language support

📄 License

This project is open source and available under the MIT License.

👨‍💻 Author

Jwel Srivastava

• GitHub: @JwelSrivastava
• Project: Health-Meter

🙏 Acknowledgments

• BMI calculation based on WHO standards
• Design inspired by modern health applications
• Icons and styling following current web design trends

---

⭐ Star this repository if you found it helpful!

📧 Made with ❤️ by Jwel Srivastava | Syntax Surfer.

---