भूमिका
आज के समय में स्वास्थ्य और फिटनेस को बनाए रखना सभी की प्राथमिकता बन गई है। शरीर का सही वजन और फिटनेस को जानने के लिए BMI (Body Mass Index) एक महत्वपूर्ण पैमाना है। इस पोस्ट में हम जानेंगे कि BMI Calculator kg क्या है, इसका क्या उपयोग है और इसे HTML, CSS और JavaScript की मदद से कैसे बनाया जा सकता है।
BMI Calculator kg क्या है?
BMI Calculator kg एक ऐसा टूल है जो व्यक्ति की ऊंचाई और वजन के आधार पर उसका बॉडी मास इंडेक्स (BMI) निकालता है। BMI यह बताता है कि व्यक्ति का वजन उसकी ऊंचाई के अनुसार सामान्य, कम, ज्यादा या मोटापे की श्रेणी में आता है या नहीं।
BMI की गणना का फार्मूला
BMI = वजन (किलोग्राम) / (ऊंचाई (मीटर) ^ 2)
उदाहरण के लिए, यदि आपका वजन 70 किलोग्राम और ऊंचाई 1.75 मीटर है:
BMI = 70 / (1.75 * 1.75) = 22.86
यह BMI सामान्य वजन श्रेणी में आता है।
BMI श्रेणियां (WHO मानक)
BMI मान | श्रेणी |
---|---|
< 18.5 | कम वजन |
18.5-24.9 | सामान्य वजन |
25-29.9 | अधिक वजन |
30-34.9 | मोटापा (श्रेणी 1) |
35-39.9 | मोटापा (श्रेणी 2) |
≥ 40 | गंभीर मोटापा |
BMI Calculator kg का उपयोग
- स्वास्थ्य स्थिति जानना: यह आपके वजन को समझने में मदद करता है।
- वजन प्रबंधन: वजन कम, बढ़ाने या संतुलित रखने में सहायक।
- स्वास्थ्य जोखिम आकलन: अधिक वजन या मोटापे के स्वास्थ्य जोखिमों को जानने में मदद करता है।
HTML, CSS और JavaScript से BMI Calculator कैसे बनाएं?
अब हम एक साधारण BMI Calculator बनाएंगे जो किलोग्राम में वजन और सेंटीमीटर में ऊंचाई को इनपुट लेकर BMI की गणना करेगा।
1. HTML कोड (index.html)
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI Calculator kg</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="bmi-container">
<h1>BMI Calculator (kg)</h1>
<div class="input-group">
<label for="weight">वजन (किलोग्राम):</label>
<input type="number" id="weight" placeholder="किलोग्राम में वजन डालें">
</div>
<div class="input-group">
<label for="height">ऊंचाई (सेंटीमीटर):</label>
<input type="number" id="height" placeholder="सेंटीमीटर में ऊंचाई डालें">
</div>
<button onclick="calculateBMI()">BMI गणना करें</button>
<div id="result"></div>
</div>
<script src="script.js"></script>
</body>
</html>
2. CSS कोड (style.css)
body {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto', sans-serif;
background-color: #f3f4f6;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.bmi-container {
background-color: #fff;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
width: 100%;
max-width: 400px;
text-align: center;
}
h1 {
color: #333;
margin-bottom: 20px;
}
.input-group {
margin: 15px 0;
text-align: left;
}
label {
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
button {
margin-top: 20px;
padding: 12px 20px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
transition: background-color 0.3s;
}
button:hover {
background-color: #0056b3;
}
#result {
margin-top: 20px;
font-size: 18px;
color: #222;
font-weight: bold;
}
3. JavaScript कोड (script.js)
function calculateBMI() {
const weight = parseFloat(document.getElementById('weight').value);
const height = parseFloat(document.getElementById('height').value) / 100;
if (isNaN(weight) || isNaN(height) || height <= 0 || weight <= 0) {
document.getElementById('result').innerHTML = 'कृपया सही इनपुट दर्ज करें।';
return;
}
const bmi = (weight / (height * height)).toFixed(2);
let category = '';
if (bmi < 18.5) {
category = 'कम वजन';
} else if (bmi >= 18.5 && bmi <= 24.9) {
category = 'सामान्य वजन';
} else if (bmi >= 25 && bmi <= 29.9) {
category = 'अधिक वजन';
} else if (bmi >= 30 && bmi <= 34.9) {
category = 'मोटापा (श्रेणी 1)';
} else if (bmi >= 35 && bmi <= 39.9) {
category = 'मोटापा (श्रेणी 2)';
} else {
category = 'गंभीर मोटापा';
}
document.getElementById('result').innerHTML = `आपका BMI: ${bmi}<br> श्रेणी: ${category}`;
}
कोड कैसे उपयोग करें?
- तीनों फाइलें (index.html, style.css, script.js) एक ही फोल्डर में सेव करें।
- अपने सर्वर पर अपलोड करें।
- index.html फाइल को ब्राउज़र में खोलें और BMI कैलकुलेटर का आनंद लें।
Also Read:- HTML, CSS और JavaScript: वेब डेवलपर्स के लिए संपूर्ण गाइड
BMI Calculator kg एक आसान और उपयोगी टूल है जो आपके वजन और स्वास्थ्य की स्थिति को समझने में आपकी मदद करता है। ऊपर दिए गए HTML, CSS और JavaScript कोड का उपयोग करके आप आसानी से एक साधारण BMI कैलकुलेटर बना सकते हैं और अपनी वेबसाइट पर जोड़ सकते हैं।