-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
204 lines (204 loc) · 8.14 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Calculate your Body Mass Index (BMI) with this simple online BMI Calculator. Get an estimate of your body fat based on weight, height, age, and gender.">
<meta name="keywords" content="BMI calculator, Body Mass Index, health assessment, weight management, body fat, health tool">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<title>BMI Calculator - By Daman mokha</title>
</head>
<body>
<div class="container mt-5">
<h1>BMI Calculator</h1>
<hr>
<form id="bmiForm">
<div class="row">
<div class="col-6">
<div class="form-group">
<label class="mt-2 mb-2" for="age">Age:</label>
<input type="number" class="form-control" id="age" required>
</div>
<div class="form-group">
<label class="mt-2 mb-2" for="gender">Gender:</label>
<select class="form-control" id="gender" required>
<option value="male">Male</option>
<option value="female">Female</option>
</select>
</div>
</div>
<div class="col-6">
<div class="form-group">
<label class="mt-2 mb-2" for="weight">Weight (kg):</label>
<input type="number" class="form-control" id="weight" required>
</div>
<div class="form-group">
<label class="mt-2 mb-2" for="height">Height (cm):</label>
<input type="number" class="form-control" id="height" required>
</div>
</div>
</div>
<button type="button" class="btn btn-primary mt-3" onclick="calculateBMI()">Calculate</button>
</form>
<div id="result" class="mt-3"></div>
</div>
</div>
<div class="container mt-5">
<div class="alert alert-info">
<p>
<strong>BMI Calculator</strong>
</p>
<p>The Body Mass Index (BMI) is a measure of body fat based on weight and height. It was developed in the 19th century by Adolphe Quetelet, a Belgian mathematician and sociologist. BMI is widely used in health assessment and weight management.</p>
<p>It is calculated by dividing a person's weight in kilograms by the square of their height in meters. The resulting number provides a rough estimate of body fatness and helps categorize individuals into different weight categories.</p>
<p>BMI is a simple and quick way to assess whether a person's weight is within a healthy range, though it does not directly measure body composition or distribution of fat and muscle.</p>
<p>Keep in mind that while BMI can be a useful tool, it has limitations. It doesn't take into account factors such as muscle mass, bone density, and overall body composition. Therefore, it's important to consider other health markers and consult with healthcare professionals for a comprehensive evaluation of your health.</p>
</div>
<div class="container mt-5">
<hr>
<h2>Reference BMI Ranges</h2>
<hr>
<div class="row">
<div class="col-6">
<h3>Male BMI Ranges</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Age</th>
<th>Height (cm)</th>
<th>Weight (kg)</th>
<th>BMI Range</th>
</tr>
</thead>
<tbody>
<tr>
<td>18-24</td>
<td>160-190</td>
<td>50-100</td>
<td>18.5-24.9</td>
</tr>
<tr>
<td>25-34</td>
<td>160-190</td>
<td>50-100</td>
<td>18.5-24.9</td>
</tr>
<tr>
<td>35-44</td>
<td>160-190</td>
<td>55-105</td>
<td>18.5-24.9</td>
</tr>
<tr>
<td>45-54</td>
<td>160-190</td>
<td>60-110</td>
<td>18.5-24.9</td>
</tr>
<tr>
<td>55-64</td>
<td>160-190</td>
<td>65-115</td>
<td>18.5-24.9</td>
</tr>
<tr>
<td>65+</td>
<td>160-190</td>
<td>70-120</td>
<td>18.5-24.9</td>
</tr>
</tbody>
</table>
</div>
<div class="col-6">
<h3>Female BMI Ranges</h3>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Age</th>
<th>Height (cm)</th>
<th>Weight (kg)</th>
<th>BMI Range</th>
</tr>
</thead>
<tbody>
<tr>
<td>18-24</td>
<td>150-180</td>
<td>40-85</td>
<td>18.5-24.9</td>
</tr>
<tr>
<td>25-34</td>
<td>150-180</td>
<td>40-85</td>
<td>18.5-24.9</td>
</tr>
<tr>
<td>35-44</td>
<td>150-180</td>
<td>45-90</td>
<td>18.5-24.9</td>
</tr>
<tr>
<td>45-54</td>
<td>150-180</td>
<td>50-95</td>
<td>18.5-24.9</td>
</tr>
<tr>
<td>55-64</td>
<td>150-180</td>
<td>55-100</td>
<td>18.5-24.9</td>
</tr>
<tr>
<td>65+</td>
<td>150-180</td>
<td>60-105</td>
<td>18.5-24.9</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script>
function calculateBMI() {
const age = parseInt(document.getElementById("age").value);
const gender = document.getElementById("gender").value;
const weight = parseFloat(document.getElementById("weight").value);
const height = parseFloat(document.getElementById("height").value) / 100; // Convert cm to meters
if (isNaN(age) || age <= 0 || isNaN(weight) || isNaN(height) || height === 0) {
const resultElement = document.getElementById("result");
resultElement.innerHTML = "Please enter valid age, weight, and height.";
resultElement.className = "mt-4 alert alert-danger";
return;
}
const bmi = weight / (height * height);
let category;
if (bmi < 18.5) {
category = "Underweight";
} else if (bmi < 24.9) {
category = "Normal weight";
} else if (bmi < 29.9) {
category = "Overweight";
} else {
category = "Obese";
}
const resultText = `Your BMI is ${bmi.toFixed(2)}. This is considered ${category}.`;
const resultElement = document.getElementById("result");
resultElement.textContent = resultText;
// Apply appropriate Bootstrap alert color class based on category
if (category === "Underweight") {
resultElement.className = "mt-4 alert alert-danger";
} else if (category === "Normal weight") {
resultElement.className = "mt-4 alert alert-success";
} else if (category === "Overweight") {
resultElement.className = "mt-4 alert alert-warning";
} else {
resultElement.className = "mt-4 alert alert-danger";
}
}
</script>
</body>
</html>