Skip to content

Commit b2a2a68

Browse files
Anujit1Anujit1
committed
added BMI calculator project
1 parent 40e3898 commit b2a2a68

File tree

3 files changed

+182
-0
lines changed

3 files changed

+182
-0
lines changed

‎BMI_Calculator/index.html‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>BMI Calculator</title>
8+
9+
<link rel="stylesheet" href="styles.css">
10+
</head>
11+
12+
<body>
13+
14+
<!-- navbar -->
15+
<div class="navbar">
16+
<nav>
17+
<h1>BMI Calculator</h1>
18+
</nav>
19+
</div>
20+
21+
<!-- canvas -->
22+
<div class="canvas">
23+
<form>
24+
<h3><label>Height in Cm: </label><input type="text" id="height"/></h3>
25+
<h3><label>Weight in Kg: </label><input type="text" id="weight"/></h3>
26+
27+
<button class="calculateBtn">Calculate</button>
28+
29+
<div id="results"><h4>Try your BMI.</h4></div>
30+
<div id="weight-guide">
31+
<h3>BMI Weight Guide</h3>
32+
<p>Under Weight = Less than 18.6</p>
33+
<p>Normal Range = 18.6 and 24.9</p>
34+
<p>Overweight = Greater than 24.9</p>
35+
</div>
36+
37+
</form>
38+
</div>
39+
40+
</body>
41+
42+
<script src="script.js"></script>
43+
44+
</html>

‎BMI_Calculator/script.js‎

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
const form = document.querySelector("form");
2+
3+
4+
5+
// click function
6+
form.addEventListener('submit', function(e){
7+
8+
e.preventDefault();
9+
10+
const height = parseInt(document.querySelector("#height").value);
11+
const weight = parseInt(document.querySelector("#weight").value);
12+
const resultsText = document.querySelector('#results h4')
13+
const results = document.querySelector('#results')
14+
15+
16+
17+
if((height === '' || height <= 0 || isNaN(height))){
18+
19+
resultsText.innerHTML = "Please give a valid Height and Weight";
20+
21+
}
22+
23+
else if((weight === '' || weight <= 0 || isNaN(weight))){
24+
25+
resultsText.innerHTML = "Please give a valid Height and Weight";
26+
27+
}
28+
29+
else{
30+
const bmi = (weight / ((height * height) / 10000)).toFixed(2);
31+
32+
if(bmi < 18.6){
33+
results.style.backgroundColor = "yellow";
34+
results.style.color = "black";
35+
resultsText.innerHTML = `You are under weight \n ${bmi}`;
36+
}
37+
38+
else if((bmi >= 18.6) && (bmi <= 24.9) ){
39+
results.style.backgroundColor = "green";
40+
results.style.color = "white";
41+
resultsText.innerHTML = `You are normal \n ${bmi}`;
42+
}
43+
44+
else if((bmi > 24.9) && (bmi <= 40) ){
45+
results.style.backgroundColor = "orange";
46+
results.style.color = "white";
47+
resultsText.innerHTML = `You are overweight \n ${bmi}`;
48+
}
49+
50+
else{
51+
52+
results.innerHTML = `<h4>Sorry, you are experiencing obesity \n ${bmi}</h4>`;
53+
results.style.color = "white";
54+
results.style.backgroundColor = "red";
55+
56+
}
57+
}
58+
59+
});
60+
61+
62+
63+
// reset code
64+
function resetResults() {
65+
results.innerHTML = "<h4>Try your BMI.</h4>";
66+
results.style.backgroundColor = "";
67+
}
68+
69+
height.addEventListener("input", resetResults);
70+
weight.addEventListener("input", resetResults);
71+

‎BMI_Calculator/styles.css‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
*{
2+
margin: 0;
3+
padding: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body{
8+
background-color: Wheat;
9+
font-family: 'Courier New', Courier, monospace;
10+
height: 100vh;
11+
}
12+
13+
.navbar{
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
background-color: rgb(25, 21, 21);
18+
color: white;
19+
height: 40px;
20+
}
21+
22+
.canvas{
23+
display: flex;
24+
justify-content: center;
25+
align-items: center;
26+
margin-top: 100px;
27+
text-align: center;
28+
}
29+
30+
form{
31+
display: flex;
32+
flex-direction: column;
33+
align-items: center;
34+
}
35+
36+
#height, #weight {
37+
width: 150px;
38+
height: 25px;
39+
padding: 5px 10px;
40+
margin: 10px auto;
41+
}
42+
43+
button {
44+
width: 180px;
45+
height: 40px;
46+
margin: 20px 0;
47+
background-color: #fff;
48+
border-radius: 8px;
49+
border: 2px solid #212121;
50+
font-size: 25px;
51+
cursor: pointer;
52+
}
53+
54+
#results {
55+
font-size: 20px;
56+
margin: 20px auto;
57+
color: black;
58+
border:2px solid black ;
59+
padding: 10px 10px;
60+
background-color: #ffffff;
61+
max-width: 300px;
62+
text-align: center;
63+
}
64+
65+
#weight-guide {
66+
margin: 10px;
67+
}

0 commit comments

Comments
 (0)