Skip to content

Commit ed009ca

Browse files
nirajxdevnirajxdev
committed
first commit
0 parents  commit ed009ca

File tree

3 files changed

+116
-0
lines changed

3 files changed

+116
-0
lines changed

‎index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div id="container">
11+
<h2 id="heading">BMI Calculator</h2>
12+
13+
<form action="" id="input_form">
14+
<p id="weight_field">
15+
<label for="weight">Weight (in kg)</label>
16+
17+
<input type="number" id="weight" placeholder="Enter weight">
18+
</p>
19+
20+
<p id="height_field">
21+
<label for="height">Height (in cm)</label>
22+
23+
<input type="number" id="height" placeholder="Enter height">
24+
</p>
25+
26+
27+
<button id="calculate">Calculate</button>
28+
<button id="reset">Reset</button>
29+
30+
<div id="result"></div>
31+
32+
</form>
33+
</div>
34+
<script src="script.js"></script>
35+
</body>
36+
</html>

‎script.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const form = document.querySelector('form');
2+
// const result = document.querySelector('#result');
3+
4+
form.addEventListener('submit', function(e){
5+
e.preventDefault();
6+
7+
const height = parseFloat(document.querySelector('#height').value);
8+
const weight = parseFloat(document.querySelector('#weight').value);
9+
const result = document.querySelector('#result');
10+
11+
if (height <= 0 || isNaN(height)) {
12+
result.innerHTML = `Invalid height provided!`;
13+
} else if (weight <= 0 || isNaN(weight)) {
14+
result.innerHTML = `Invalid weight provided!`;
15+
} else {
16+
const bmi = (weight / ((height * height) / 10000)).toFixed(2);
17+
18+
let category = "";
19+
if (bmi < 18.5) category = "Underweight";
20+
else if (bmi < 24.9) category = "Normal weight";
21+
else if (bmi < 29.9) category = "Over weight";
22+
else category = "Obese";
23+
24+
result.innerHTML = `<span>BMI is ${bmi} (${category})</span>` ;
25+
}
26+
});
27+
28+
document.querySelector('#reset').addEventListener('click', function(e){
29+
e.preventDefault();
30+
document.querySelector('#height').value = '';
31+
document.querySelector('#weight').value = '';
32+
result.innerHTML = '';
33+
});

‎style.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
/* align-items: center; */
5+
/* background-color: #1e1e2f; */
6+
color: #f0f0f0;
7+
}
8+
#container {
9+
margin-top: 10rem;
10+
border: 2px solid white;
11+
border-radius: 10px;
12+
box-shadow: 0 5px 8px rgba(166, 127, 127, 0.7);
13+
padding: 50px;
14+
background-color: #1e1e2f;
15+
}
16+
#heading {
17+
text-align: center;
18+
font-size: 3em;
19+
}
20+
21+
label {
22+
font-size: 30px;
23+
}
24+
input {
25+
height: 30px;
26+
width: 170px;
27+
}
28+
button {
29+
display: grid;
30+
grid-template-rows: none;
31+
margin-top: 30px;
32+
margin-left: 25%;
33+
align-items: center;
34+
/* text-align: center; */
35+
font-size: larger;
36+
height: 2rem;
37+
width: 10rem;
38+
border-radius: 50px;
39+
}
40+
#result {
41+
text-align: center;
42+
margin-top: 40px;
43+
font-size: 2rem;
44+
background-color: #fff;
45+
color: #111111;
46+
47+
}

0 commit comments

Comments
 (0)