🧮 BMI Calculator

A sleek, secure, and responsive BMI (Body Mass Index) calculator built with Flask and JavaScript, offering instant BMI results, modern UI/UX, and robust security protections.

---

✨ Highlights

⚡ Instant Calculation

• Real-time BMI calculation using JavaScript — no page reloads!
• Smoother and faster user interaction.

🧩 Smarter Validation

• Inline error handling for invalid or empty inputs.
• Both client-side (JS) and server-side (Flask) validations.
• Prevents incorrect results and improves reliability.

🔒 Security Reinforcements

• CSRF Protection: Added via Flask-WTF + CSRFProtect(app).
• Secure HTTP Headers: Enforced using Flask-Talisman with:
  • Strict-Transport-Security
  • Content-Security-Policy
  • X-Frame-Options
  • X-Content-Type-Options
  • Referrer-Policy
• Safeguards against XSS, clickjacking, and data leaks.

🎨 Refreshed UI/UX

• Clean, mobile-friendly interface.
• Instant response display with modern styling.
• Improved accessibility and layout consistency.

---

🧠 How It Works

1. Enter your Weight (kg) and Height (cm).
2. Hit Calculate BMI.
3. Instantly view your BMI and corresponding health category:

BMI Range	Category
< 18.5	Underweight
18.5 – 24.9	Normal weight
25 – 29.9	Overweight
≥ 30	Obese

---

🛠️ Tech Stack

Layer	Technology
Frontend	HTML5, CSS3, JavaScript
Backend	Flask (Python)
Security	Flask-WTF, Flask-Talisman
Styling	Custom CSS
Deployment	Any Flask-supported host

---

⚙️ Installation & Setup

# Clone the repository
git clone https://github.com/Tejaaa14/bmi-calculator.git
cd bmi-calculator

# Create a virtual environment
python -m venv venv
source venv/bin/activate   # On Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Run the app
python app.py

Then visit http://127.0.0.1:5000/ in your browser 🚀

---

🧩 Before & After Enhancements

Category	Before	After
BMI Calculation	Page reload required	Instant JavaScript-based calculation
Input Validation	Minimal or missing	Full client & server-side validation
CSRF Protection	None	Implemented with Flask-WTF
HTTP Headers	Not configured	Secured using Flask-Talisman
UI/UX	Basic design	Responsive, accessible, and interactive interface

---

🧑‍💻 Contributors

Name	Role	GitHub
Tejaaa14	Project Owner	@Tejaaa14
Ruthvik Sharma	Developer — Security & UI/UX Enhancements	@ruthviksharma-d

---

🛡️ Security Summary

Issue	Fix Implemented
CSRF Protection	Integrated Flask-WTF’s CSRFProtect
Input Sanitization	Client-side + server-side validation
Secure Headers	Added via Flask-Talisman
XSS & Clickjacking	Mitigated with strong Content-Security-Policy
Form Integrity	Protected through tokenized submissions

---

📜 License

This project is licensed under the MIT License.
You are free to use, modify, and distribute this project as long as attribution is provided.

---

💬 Feedback & Contributions

💡 Got ideas for improvements?
Pull requests and suggestions are always welcome!

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

Reach out or connect via GitHub:

• @ruthviksharma-d
• @Tejaaa14

---

⭐ If you like this project, give it a star! ⭐
Your support motivates continued improvements and new features!

---