Skip to content

Commit 80a7c12

Browse files
Prashant33pixelPrashant33pixel
authored
Create MyBmi
0 parents  commit 80a7c12

File tree

1 file changed

+306
-0
lines changed

1 file changed

+306
-0
lines changed

‎MyBmi‎

Lines changed: 306 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,306 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>BMI Calculator</title>
7+
<style>
8+
body {
9+
font-family: Arial, sans-serif;
10+
margin: 0;
11+
padding: 0;
12+
background: linear-gradient(to right, #f4f4f9, #e8f6f8);
13+
color: #333;
14+
}
15+
.container {
16+
max-width: 800px;
17+
margin: 30px auto;
18+
padding: 30px;
19+
background: white;
20+
border-radius: 10px;
21+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
22+
}
23+
h1, h2, h3 {
24+
text-align: center;
25+
color: #007bff;
26+
}
27+
p {
28+
font-size: 16px;
29+
line-height: 1.6;
30+
margin-bottom: 20px;
31+
}
32+
label {
33+
font-weight: bold;
34+
font-size: 18px;
35+
display: block;
36+
margin: 10px 0 5px;
37+
}
38+
input, select {
39+
width: 100%;
40+
padding: 15px;
41+
margin-bottom: 20px;
42+
font-size: 16px;
43+
border: 1px solid #ccc;
44+
border-radius: 8px;
45+
}
46+
button {
47+
width: 100%;
48+
padding: 15px;
49+
background-color: #007bff;
50+
color: white;
51+
border: none;
52+
border-radius: 8px;
53+
font-size: 18px;
54+
cursor: pointer;
55+
}
56+
button:hover {
57+
background-color: #0056b3;
58+
}
59+
.result, .guidance, .diet-plan {
60+
margin-top: 20px;
61+
padding: 15px;
62+
border-radius: 8px;
63+
}
64+
.result {
65+
background-color: #f0f8ff;
66+
font-size: 20px;
67+
font-weight: bold;
68+
text-align: center;
69+
}
70+
.guidance {
71+
background-color: #f9f1f0;
72+
color: #333;
73+
font-size: 18px;
74+
}
75+
.guidance.underweight {
76+
border-left: 5px solid #ffa500;
77+
}
78+
.guidance.overweight, .guidance.obesity {
79+
border-left: 5px solid #ff4500;
80+
}
81+
.guidance.normal {
82+
border-left: 5px solid #28a745;
83+
}
84+
.diet-plan {
85+
background-color: #e7f5ed;
86+
color: #333;
87+
font-size: 18px;
88+
}
89+
.diet-plan h3 {
90+
margin-bottom: 10px;
91+
color: #28a745;
92+
font-weight: bold;
93+
}
94+
.diet-plan ul {
95+
padding-left: 20px;
96+
}
97+
.diet-plan ul li {
98+
margin-bottom: 10px;
99+
}
100+
.diet-plan ul li span {
101+
font-weight: bold;
102+
color: #007bff;
103+
}
104+
.instructions {
105+
margin: 15px 0;
106+
padding: 15px;
107+
background: #f4f4f9;
108+
border-radius: 8px;
109+
}
110+
.instructions ol {
111+
padding-left: 20px;
112+
}
113+
.instructions ol li {
114+
margin-bottom: 10px;
115+
line-height: 1.8;
116+
}
117+
.welcome {
118+
text-align: center;
119+
font-size: 24px;
120+
color: #007bff;
121+
margin-bottom: 20px;
122+
}
123+
.intro {
124+
text-align: center;
125+
font-size: 18px;
126+
margin-bottom: 30px;
127+
color: #555;
128+
}
129+
.bmi-categories {
130+
margin-top: 20px;
131+
font-size: 16px;
132+
background-color: #f0f8ff;
133+
padding: 15px;
134+
border-radius: 8px;
135+
text-align: center;
136+
}
137+
.bmi-categories ul {
138+
list-style-type: none;
139+
padding-left: 0;
140+
}
141+
.bmi-categories ul li {
142+
margin-bottom: 10px;
143+
}
144+
.bmi-categories h3 {
145+
color: #007bff;
146+
margin-bottom: 10px;
147+
}
148+
</style>
149+
</head>
150+
<body>
151+
<div class="container">
152+
<!-- Welcome Section -->
153+
<div class="welcome">
154+
<p>Welcome to the BMI Calculator!</p>
155+
</div>
156+
157+
<!-- Intro Section -->
158+
<div class="intro">
159+
<p>Body Mass Index (BMI) is a useful tool to determine whether your weight is healthy in relation to your height. Calculate your BMI and get a personalized health plan.</p>
160+
</div>
161+
162+
<div class="instructions">
163+
<h2>Instructions</h2>
164+
<ol>
165+
<li>Select your **Measurement System** from the dropdown.</li>
166+
<li>Enter your **Weight**, **Height**, **Age**, and **Gender** in the fields provided.</li>
167+
<li>Click the **"Calculate BMI"** button to get your results.</li>
168+
</ol>
169+
</div>
170+
171+
<!-- BMI Categories Section -->
172+
<div class="bmi-categories">
173+
<h3>BMI Categories:</h3>
174+
<ul>
175+
<li><strong>Underweight:</strong> BMI less than 18.5</li>
176+
<li><strong>Normal weight:</strong> BMI between 18.5 and 24.9</li>
177+
<li><strong>Overweight:</strong> BMI between 25 and 29.9</li>
178+
<li><strong>Obesity:</strong> BMI 30 or more</li>
179+
</ul>
180+
</div>
181+
182+
<label for="system">Select Measurement System:</label>
183+
<select id="system" onchange="toggleInputs()">
184+
<option value="metric">Metric (kg, cm)</option>
185+
<option value="imperial">Imperial (lbs, inches)</option>
186+
</select>
187+
188+
<label for="height">Height:</label>
189+
<input type="number" id="height" placeholder="Enter height">
190+
191+
<label for="weight">Weight:</label>
192+
<input type="number" id="weight" placeholder="Enter weight">
193+
194+
<!-- Age and Gender Fields -->
195+
<label for="age">Age:</label>
196+
<input type="number" id="age" placeholder="Enter your age">
197+
198+
<label for="gender">Gender:</label>
199+
<select id="gender">
200+
<option value="male">Male</option>
201+
<option value="female">Female</option>
202+
<option value="other">Other</option>
203+
</select>
204+
205+
<button onclick="calculateBMI()">Calculate BMI</button>
206+
207+
<div class="result" id="result"></div>
208+
<div class="guidance" id="guidance"></div>
209+
<div class="diet-plan" id="dietPlan"></div>
210+
</div>
211+
212+
<script>
213+
function toggleInputs() {
214+
const system = document.getElementById("system").value;
215+
const weightInput = document.getElementById("weight");
216+
const heightInput = document.getElementById("height");
217+
218+
if (system === "metric") {
219+
weightInput.placeholder = "Enter weight in kg";
220+
heightInput.placeholder = "Enter height in cm";
221+
} else {
222+
weightInput.placeholder = "Enter weight in lbs";
223+
heightInput.placeholder = "Enter height in inches";
224+
}
225+
}
226+
227+
function calculateBMI() {
228+
const system = document.getElementById("system").value;
229+
const weight = parseFloat(document.getElementById("weight").value);
230+
const height = parseFloat(document.getElementById("height").value);
231+
const age = parseInt(document.getElementById("age").value);
232+
const gender = document.getElementById("gender").value;
233+
234+
if (!weight || !height || weight <= 0 || height <= 0 || !age || age <= 0) {
235+
document.getElementById("result").textContent = "Please enter valid values.";
236+
document.getElementById("guidance").textContent = "";
237+
document.getElementById("dietPlan").textContent = "";
238+
return;
239+
}
240+
241+
let bmi;
242+
if (system === "metric") {
243+
const heightM = height / 100; // Convert height to meters
244+
bmi = weight / (heightM * heightM);
245+
} else {
246+
bmi = (weight / (height * height)) * 703; // Formula for imperial system
247+
}
248+
249+
bmi = bmi.toFixed(2);
250+
let category = "";
251+
let guidance = "";
252+
let dietPlan = "";
253+
254+
if (bmi < 18.5) {
255+
category = "Underweight";
256+
guidance = "You are underweight. Aim to gain weight in a healthy way.";
257+
dietPlan = `
258+
<h3>Diet Plan:</h3>
259+
<ul>
260+
<li><span>Increase calorie intake:</span> Include high-calorie, nutritious foods like avocados, nuts, and whole grains.</li>
261+
<li><span>Protein-rich foods:</span> Add chicken, fish, tofu, and lentils to your meals.</li>
262+
<li><span>Healthy fats:</span> Include olive oil, butter, and nuts in your diet.</li>
263+
</ul>`;
264+
document.getElementById("guidance").className = "guidance underweight";
265+
} else if (bmi >= 18.5 && bmi < 24.9) {
266+
category = "Normal weight";
267+
guidance = "You have a normal weight. Keep up the good work!";
268+
dietPlan = `
269+
<h3>Diet Plan:</h3>
270+
<ul>
271+
<li><span>Eat a variety of fruits and vegetables:</span> Ensure your meals are balanced and nutrient-rich.</li>
272+
<li><span>Stay hydrated:</span> Drink plenty of water and avoid sugary beverages.</li>
273+
<li><span>Exercise regularly:</span> Include both cardio and strength training in your routine.</li>
274+
</ul>`;
275+
document.getElementById("guidance").className = "guidance normal";
276+
} else if (bmi >= 25 && bmi < 29.9) {
277+
category = "Overweight";
278+
guidance = "You are overweight. Focus on portion control and regular physical activity.";
279+
dietPlan = `
280+
<h3>Diet Plan:</h3>
281+
<ul>
282+
<li><span>Limit calorie intake:</span> Choose lean proteins and smaller portions.</li>
283+
<li><span>Increase fiber intake:</span> Add whole grains, beans, and vegetables.</li>
284+
<li><span>Be active:</span> Aim for at least 30 minutes of exercise most days of the week.</li>
285+
</ul>`;
286+
document.getElementById("guidance").className = "guidance overweight";
287+
} else {
288+
category = "Obesity";
289+
guidance = "You are in the obesity range. It is essential to start a weight-loss program with professional guidance.";
290+
dietPlan = `
291+
<h3>Diet Plan:</h3>
292+
<ul>
293+
<li><span>Focus on vegetables:</span> Choose low-calorie, nutrient-dense foods like leafy greens and cruciferous vegetables.</li>
294+
<li><span>Limit processed foods:</span> Avoid sugary snacks, fried foods, and sugary drinks.</li>
295+
<li><span>Increase physical activity:</span> Include at least 150 minutes of moderate-intensity exercise each week.</li>
296+
</ul>`;
297+
document.getElementById("guidance").className = "guidance obesity";
298+
}
299+
300+
document.getElementById("result").textContent = `Your BMI is ${bmi} (${category})`;
301+
document.getElementById("guidance").innerHTML = guidance;
302+
document.getElementById("dietPlan").innerHTML = dietPlan;
303+
}
304+
</script>
305+
</body>
306+
</html>

0 commit comments

Comments
 (0)