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)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy