-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
67 lines (66 loc) · 2.49 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
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>BMI Calculator</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>BMI Calculator</h1>
<label class="labels" for="height">Height(cm)</label><input class="inputs" type="number" id="height">
<label class="labels" for="weight">Weight(Kg)</label><input class="inputs" type="number" id="weight">
<button class="button" type="button" id="button">Calculate BMI</button>
<p class="bmi" id="BMI"></p>
<p id="Suggestion"></p>
</div>
<script type="text/javascript">
let underweight=`<h2>You are Under Weight</h2>
<ul>
<li>Add Healthy Calories and Focus On your Diet</li>
<li>Don't Eat Too Much Junk Food</li>
<li>Focus on Your Eating Behaviour</li>
</ul>
<h2>Stay Healthy, Stay Fit</h2>
`;
let good=`<h2>You are Normal</h2>
<ul>
<li>Maintain Your Diet as You are Doing So</li>
<li>Excercise Daily to maintain your Healthy Body</li>
<li>Don't get into habbit of Eating Junk Food</li>
</ul>
<h2>Stay Healthy, Stay Fit</h2>
`;
let obese=`<h2>You are Obese</h2>
<ul>
<li>Try to Reduce calories in Your Diet</li>
<li>Excercise at least 1 Hour daily</li>
<li>Focus on Your Eating Behaviour</li>
</ul>
<h2>Stay Healthy, Stay Fit</h2>
`;
let button=document.querySelector("#button");
button.addEventListener("click",()=>{
const height=document.querySelector("#height").value;
const weight=document.querySelector("#weight").value;
const result=document.querySelector("#BMI");
if(height==='' || height<0 || isNaN(height))
result.innerText="Please Provide Valid Height";
else if(weight==='' || weight<0 || isNaN(weight)){
result.innerText="Please Provide Valid Weight";
Suggestion.innerHTML=``;
}
else {
const bmi=(weight/((height*height)/10000)).toFixed(2);
result.innerText= `BMI : ${bmi}`;
if(bmi<18.6)
Suggestion.innerHTML=underweight;
else if(bmi>24.9)
Suggestion.innerHTML=obese;
else
Suggestion.innerHTML=good;
}
})
</script>
</body>
</html>