BMI calculator

BMI Calculator Tool | TechCraft
BMI Calculator Demo

BMI Calculator Tool Kaise Banayein? (Full HTML + JavaScript Tutorial)

Aaj ke is post mein hum seekhenge ki kaise aap bina kisi backend ya database ke ek simple aur powerful BMI (Body Mass Index) Calculator bana sakte hain sirf HTML, CSS aur JavaScript ke madhyam se. Yeh tool health blogs, fitness websites aur educational platforms ke liye kaafi upyogi hai.

BMI Kya Hota Hai?

BMI ek aisa measure hai jisse pata chalta hai ki kisi vyakti ka weight unki height ke hisaab se sahi hai ya nahi. Iska formula hota hai: 

BMI = Weight (kg) / (Height (m) * Height (m))

Tool Ki Features:

  • Height & Weight input se instant result
  • BMI result ke sath category bhi dikhata hai
  • Fully responsive aur light-weight
  • No external library required
  • Offline bhi kaam karta hai

💻 Full HTML + CSS + JavaScript Code 👇

<!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>
  <style>
    body {
      font-family: sans-serif;
      background: #fce4ec;
      padding: 20px;
    }
    .container {
      max-width: 400px;
      margin: auto;
      background: #ffffff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    input, button {
      width: 100%;
      padding: 10px;
      margin-top: 10px;
      font-size: 16px;
    }
    .result {
      margin-top: 20px;
      font-weight: bold;
      color: #d81b60;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>BMI Calculator</h2>
    <input type="number" id="height" placeholder="Height in cm">
    <input type="number" id="weight" placeholder="Weight in kg">
    <button onclick="calculateBMI()">Calculate BMI</button>
    <div class="result" id="output"></div>
  </div>

Is Code Ko Kaise Use Karein?

  1. Upar diya gaya code copy karein
  2. Notepad ya VS Code mein paste karein
  3. File ko bmi.html naam se save karein
  4. Browser mein open karke tool use karein

Is Tutorial Se Kya Seekha?

  • JavaScript ke basic logic se BMI calculate karna
  • User input handle karna
  • Responsive design banana
  • Health-related tools banana blogging ke liye

AdSense Friendly Content

Yeh tutorial educational aur interactive content provide karta hai, jo AdSense policies ke bilkul anukool hai. Health aur utility tools ka combination blogs ke liye kaafi profitable hota hai.

Extra Tips:

  • Tool mein BMI History save karne ka option add kar sakte hain
  • Mobile App banane ke liye PWA convert karein
  • Tool ko Blogger ya WordPress mein embed karein

Conclusion

To dosto, is tutorial mein aapne jaana ki kaise ek basic HTML, CSS aur JavaScript ka use karke aap ek powerful BMI Calculator tool bana sakte hain. Yeh aapke blog ke liye ek engaging aur useful addon ho sakta hai.

Agar yeh post pasand aayi ho to comment karein, apne doston ke sath share karein, aur naye web development tools ke liye hamare blog ko follow karein. 🙏