A simple and interactive BMI (Body Mass Index) calculator built with HTML, CSS, and JavaScript. This project demonstrates basic web development concepts including DOM manipulation, event handling, and responsive design.
- Real-time Calculation: Instantly calculates BMI as you input height and weight
- BMI Categories: Displays health categories (Underweight, Normal, Overweight, Obese)
- Responsive Design: Works seamlessly on desktop and mobile devices
- Clean UI: Modern, user-friendly interface with smooth animations
- Input Validation: Ensures valid numeric inputs for accurate calculations
- HTML5: Semantic markup and structure
- CSS3: Styling with Flexbox, animations, and responsive design
- JavaScript (ES6+): DOM manipulation, event handling, and BMI logic
- Enter your height in centimeters (cm)
- Enter your weight in kilograms (kg)
- View your BMI result and health category instantly
BMI = weight (kg) / [height (m)]²
- Underweight: BMI < 18.5
- Normal Weight: BMI 18.5 - 24.9
- Overweight: BMI 25 - 29.9
- Obese: BMI ≥ 30
-
Clone the repository:
git clone https://github.com/ChaudhariSwati/bmi-calculator.git
-
Navigate to the project directory:
cd bmi-calculator -
Open
index.htmlin your web browser or use a local server.
bmi-calculator/
├── index.html # Main HTML file
├── styles.css # CSS styling
├── script.js # JavaScript functionality
└── README.md # Project documentation
This project covers fundamental web development concepts:
- HTML form elements and input handling
- CSS responsive design and animations
- JavaScript functions, event listeners, and DOM manipulation
- Basic mathematical calculations in JavaScript
- User input validation and error handling
- Add metric/imperial unit conversion
- Include BMI history tracking
- Add health tips based on BMI category
- Implement chart visualization for BMI trends
Feel free to fork this project and submit pull requests with improvements!
This project is open source and available under the MIT License.
Built with ❤️ during computer science coursework