Skip to content

Commit 4389873

Browse files
sahandghavidelsahandghavidel
committed
update bmi calculator project
1 parent ea83e76 commit 4389873

File tree

4 files changed

+111
-53
lines changed

4 files changed

+111
-53
lines changed

‎projects/bmi-calculator/index.html‎

Lines changed: 35 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,40 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
87
<title>BMI</title>
9-
<style>
10-
*{
11-
padding: 10px;
12-
margin: 10px;
13-
}
14-
p{
15-
font-weight: bold;
16-
}
17-
</style>
18-
</head>
19-
<body>
20-
<div class="container d-block text-center">
21-
<h2 class="p-2">Body Mass Index Calculator using Metric Units</h2>
22-
Your Height: <input class="p-2 m-2" type="number" name="cm" id="cm" placeholder="centimeters">
23-
<br/>
24-
Your Weight: <input class="p-2 m-2" type="number" name="weight" id="weight" placeholder="kilograms">
25-
<br/>
26-
<button class="btn btn-primary p-2 m-2" onclick="fun()">Compute BMI</button><br/>
27-
Your BMI: <input class="p-2 m-2" type="text" name="bmi" id="bmi" disabled>
28-
<h4 class="p-2 m-2"></h4>
8+
<link rel="stylesheet" href="style.css" />
9+
</head>
10+
<body>
11+
<div class="container">
12+
<h2 class="heading">Body Mass Index (BMI) Calculator</h2>
13+
Your Height (cm):
14+
<input
15+
class="input"
16+
type="number"
17+
name="cm"
18+
id="height"
19+
value="180"
20+
placeholder="Enter your height in cm"
21+
/>
22+
Your Weight (kg):
23+
<input
24+
class="input"
25+
type="number"
26+
name="weight"
27+
id="weight"
28+
value="80"
29+
placeholder="Enter your weight in kg"
30+
/>
31+
<button class="btn" id="btn">Compute BMI</button>
32+
Your BMI:
33+
<input class="input" type="text" id="bmi" disabled />
34+
<h4 class="info-text">
35+
Weight Condition: <span id="weight-condition"></span>
36+
</h4>
2937
</div>
30-
31-
</body>
38+
<script src="index.js"></script>
39+
</body>
3240
</html>
33-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" ></script>
34-
<script src="./script.js"></script>

‎projects/bmi-calculator/index.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const btnEl = document.getElementById("btn");
2+
const BMIInputEl = document.getElementById("bmi");
3+
const weightConditionEl = document.getElementById("weight-condition");
4+
5+
function calculateBMI() {
6+
const HeightValue = document.getElementById("height").value / 100;
7+
8+
const weightValue = document.getElementById("weight").value;
9+
const bmiValue = weightValue / (HeightValue * HeightValue);
10+
BMIInputEl.value = bmiValue;
11+
12+
if (bmiValue < 18.5) {
13+
weightConditionEl.innerText = "Under weight";
14+
} else if (bmiValue >= 18.5 && bmiValue <= 24.9) {
15+
weightConditionEl.innerText = "Normal weight";
16+
} else if (bmiValue >= 25 && bmiValue <= 29.9) {
17+
weightConditionEl.innerText = "Overweight";
18+
} else if (bmiValue >= 30) {
19+
weightConditionEl.innerText = "Obesity";
20+
}
21+
}
22+
23+
btnEl.addEventListener("click", calculateBMI);

‎projects/bmi-calculator/script.js‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎projects/bmi-calculator/style.css‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
body {
2+
margin: 0;
3+
display: flex;
4+
min-height: 100vh;
5+
justify-content: center;
6+
align-items: center;
7+
background: linear-gradient(to left bottom, lightgreen, lightblue);
8+
font-family: "Courier New", Courier, monospace;
9+
}
10+
11+
.container {
12+
background: rgba(255, 255, 255, 0.3);
13+
padding: 20px;
14+
display: flex;
15+
flex-direction: column;
16+
border-radius: 5px;
17+
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.3);
18+
text-align: start;
19+
margin: 5px;
20+
}
21+
22+
.heading {
23+
font-size: 30px;
24+
}
25+
26+
.input {
27+
padding: 10px 20px;
28+
font-size: 18px;
29+
background: rgba(255, 255, 255, 0.4);
30+
border-color: rgba(255, 255, 255, 0.5);
31+
margin: 10px;
32+
}
33+
34+
.btn {
35+
background-color: lightgreen;
36+
border: none;
37+
padding: 10px 20px;
38+
border-radius: 5px;
39+
margin: 10px;
40+
font-size: 20px;
41+
cursor: pointer;
42+
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
43+
}
44+
45+
.btn:hover {
46+
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
47+
transition: all 300ms ease;
48+
}
49+
50+
.info-text {
51+
font-size: 20px;
52+
font-weight: 500;
53+
}

0 commit comments

Comments
 (0)