Skip to content

Commit 1de5067

Browse files
reetiraj123reetiraj123
authored
Update index.html
1 parent ef87943 commit 1de5067

File tree

1 file changed

+99
-38
lines changed

1 file changed

+99
-38
lines changed

‎index.html‎

Lines changed: 99 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -4,91 +4,152 @@
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1" />
66
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7-
<title>BMI Calculator</title>
7+
<title>BMI Calculator & Diet Planner</title>
88
<style>
9-
/* Simple styles for the form and container */
9+
body {
10+
margin: 0;
11+
padding: 0;
12+
font-family: Arial, sans-serif;
13+
background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
14+
height: 100vh;
15+
display: flex;
16+
justify-content: center;
17+
align-items: center;
18+
}
1019
.container {
20+
background: rgba(255, 255, 255, 0.9);
21+
border-radius: 12px;
22+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
1123
max-width: 400px;
12-
margin: 50px auto;
13-
padding: 20px;
14-
font-family: Arial, sans-serif;
15-
border: 1px solid #ccc;
16-
border-radius: 8px;
24+
width: 90%;
25+
padding: 30px 35px;
26+
text-align: center;
1727
}
18-
input[type="text"] {
28+
input[type="text"], select {
1929
width: 100%;
20-
padding: 8px;
21-
margin-top: 5px;
22-
margin-bottom: 15px;
23-
box-sizing: border-box;
24-
border-radius: 4px;
30+
padding: 10px;
31+
margin: 10px 0 20px 0;
2532
border: 1px solid #ccc;
33+
border-radius: 6px;
34+
font-size: 16px;
35+
box-sizing: border-box;
36+
transition: all 0.3s ease;
37+
}
38+
input[type="text"]:focus, select:focus {
39+
border-color: #ff6f91;
40+
outline: none;
41+
box-shadow: 0 0 8px rgba(255, 111, 145, 0.6);
2642
}
2743
button {
28-
padding: 10px 15px;
29-
border-radius: 4px;
44+
background-color: #ff6f91;
3045
border: none;
31-
background-color: #007bff;
46+
padding: 12px 25px;
3247
color: white;
48+
font-size: 18px;
49+
border-radius: 8px;
3350
cursor: pointer;
34-
font-size: 16px;
51+
transition: background-color 0.3s ease;
52+
margin-top: 10px;
53+
width: 100%;
3554
}
3655
button:hover {
37-
background-color: #0056b3;
56+
background-color: #ff4a70;
57+
}
58+
h1 {
59+
margin-bottom: 20px;
60+
color: #333;
61+
font-weight: 700;
3862
}
3963
#results {
4064
margin-top: 20px;
41-
font-weight: bold;
42-
color: #333;
65+
font-weight: 600;
66+
font-size: 18px;
67+
color: #444;
68+
min-height: 70px;
69+
}
70+
#weight-guide {
71+
margin-top: 25px;
72+
background-color: #ffe7f0;
73+
border-radius: 8px;
74+
padding: 15px;
75+
color: #a63c53;
76+
text-align: left;
77+
font-weight: 600;
78+
box-shadow: inset 0 0 10px #ffafb8;
4379
}
4480
#weight-guide h3 {
45-
margin-bottom: 6px;
81+
margin-bottom: 8px;
82+
color: #ff6f91;
4683
}
4784
</style>
4885
</head>
4986
<body>
5087
<div class="container">
51-
<h1>BMI Calculator</h1>
88+
<h1>BMI Calculator & Diet Planner</h1>
5289
<form id="bmi-form">
53-
<label><b>Height (cm):</b></label>
5490
<input type="text" id="height" placeholder="Enter height in cm" />
55-
<label><b>Weight (kg):</b></label>
5691
<input type="text" id="weight" placeholder="Enter weight in kg" />
57-
<button type="submit">Calculate</button>
92+
<select id="activity-level">
93+
<option value="sedentary">Sedentary</option>
94+
<option value="light">Lightly Active</option>
95+
<option value="moderate">Moderate</option>
96+
<option value="active">Active</option>
97+
</select>
98+
<button type="submit">Get Recommendation</button>
5899
<div id="results"></div>
59100
<div id="weight-guide">
60101
<h3>BMI Weight Guide</h3>
61-
<p>Under Weight = Less than 18.6</p>
62-
<p>Normal Range = 18.6 and 24.9</p>
63-
<p>Overweight = Greater than 24.9</p>
102+
<p>Underweight: Less than 18.6</p>
103+
<p>Normal: 18.6 to 24.9</p>
104+
<p>Overweight: Greater than 24.9</p>
64105
</div>
65106
</form>
66107
</div>
67108

68109
<script>
69-
document.getElementById('bmi-form').addEventListener('submit', function (event) {
110+
document.getElementById('bmi-form').addEventListener('submit', function(event) {
70111
event.preventDefault();
71112

72113
const heightInput = document.getElementById('height').value.trim();
73114
const weightInput = document.getElementById('weight').value.trim();
115+
const activity = document.getElementById('activity-level').value;
74116
const resultsDiv = document.getElementById('results');
75117

76118
const height = parseFloat(heightInput);
77119
const weight = parseFloat(weightInput);
78120

79-
if (
80-
isNaN(height) ||
81-
isNaN(weight) ||
82-
height <= 0 ||
83-
weight <= 0
84-
) {
121+
if(isNaN(height) || isNaN(weight) || height <= 0 || weight <= 0) {
85122
resultsDiv.textContent = 'Please enter valid positive numbers for height and weight.';
86123
return;
87124
}
88125

89-
const heightInMeters = height / 100;
90-
const bmi = weight / (heightInMeters * heightInMeters);
91-
resultsDiv.textContent = `Your BMI is ${bmi.toFixed(2)}`;
126+
const heightM = height / 100;
127+
const bmi = weight / (heightM * heightM);
128+
const bmiFixed = bmi.toFixed(2);
129+
130+
let category = '';
131+
let mealPlan = '';
132+
133+
if(bmi < 18.6) {
134+
category = 'Underweight';
135+
mealPlan = 'Include nutrient-rich foods such as whole grains, dairy, nuts, eggs, and lean meats. Eat small, frequent meals.';
136+
} else if(bmi < 25) {
137+
category = 'Normal weight';
138+
mealPlan = 'Maintain a balanced diet: mix of fruits, vegetables, whole grains, lean protein, and healthy fats. Practice portion control.';
139+
} else {
140+
category = 'Overweight';
141+
mealPlan = 'Prioritize vegetables, fruits, and whole grains. Limit processed foods, sugars, and saturated fats. Watch your meal portions.';
142+
}
143+
144+
if(category === 'Underweight' && activity === 'active') {
145+
mealPlan += ' You may consider adding muscle-building snacks like peanut butter smoothies.';
146+
} else if(category === 'Overweight' && (activity === 'sedentary' || activity === 'light')) {
147+
mealPlan += ' Increasing your daily activity can further promote health and weight control.';
148+
}
149+
150+
resultsDiv.innerHTML = `<strong>Your BMI:</strong> ${bmiFixed}<br>
151+
<strong>Status:</strong> ${category}<br>
152+
<strong>Meal Recommendation:</strong> ${mealPlan}`;
92153
});
93154
</script>
94155
</body>

0 commit comments

Comments
 (0)