Skip to content

Commit 772b540

Browse files
sahandghavidelsahandghavidel
committed
update bmi project
1 parent 4389873 commit 772b540

File tree

3 files changed

+64
-81
lines changed

3 files changed

+64
-81
lines changed

‎projects/bmi-calculator/index.html‎

Lines changed: 18 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,40 +1,23 @@
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-
<title>BMI</title>
8-
<link rel="stylesheet" href="style.css" />
9-
</head>
10-
<body>
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+
<title>BMI Calculator</title>
8+
<link rel="stylesheet" href="style.css">
9+
</head>
10+
<body>
1111
<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>
12+
<h1 class="heading">Body Mass Index (BMI) Calculator</h1>
13+
Your Height (cm):
14+
<input type="number" class="input" id="height" value="180" placeholder="Enter your height in cm">
15+
Your Weight (kg):
16+
<input type="number" class="input" id="weight" value="80" placeholder="Enter your weight in kg">
17+
<button class="btn" id="btn">Compute BMI</button>
18+
<input disabled type="text" class="input" id="bmi-result">
19+
<h4 class="info-text">Weight Condition: <span id="weight-condition"></span></h4>
3720
</div>
3821
<script src="index.js"></script>
39-
</body>
40-
</html>
22+
</body>
23+
</html>

‎projects/bmi-calculator/index.js‎

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,14 @@
11
const btnEl = document.getElementById("btn");
2-
const BMIInputEl = document.getElementById("bmi");
2+
const bmiInputEl = document.getElementById("bmi-result");
33
const weightConditionEl = document.getElementById("weight-condition");
44

55
function calculateBMI() {
6-
const HeightValue = document.getElementById("height").value / 100;
7-
6+
const heightValue = document.getElementById("height").value / 100;
87
const weightValue = document.getElementById("weight").value;
9-
const bmiValue = weightValue / (HeightValue * HeightValue);
10-
BMIInputEl.value = bmiValue;
8+
9+
const bmiValue = weightValue / (heightValue * heightValue);
10+
11+
bmiInputEl.value = bmiValue;
1112

1213
if (bmiValue < 18.5) {
1314
weightConditionEl.innerText = "Under weight";

‎projects/bmi-calculator/style.css‎

Lines changed: 40 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,52 @@
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;
1+
body{
2+
margin: 0;
3+
background: linear-gradient(to left bottom, lightgreen, lightblue);
4+
display: flex;
5+
min-height: 100vh;
6+
justify-content: center;
7+
align-items: center;
8+
font-family: 'Courier New', Courier, monospace;
99
}
1010

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;
11+
.container{
12+
background: rgba(255,255,255, .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,.3);
18+
margin: 5px;
2019
}
2120

22-
.heading {
23-
font-size: 30px;
21+
.heading{
22+
font-size: 30px;
2423
}
2524

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;
25+
.input{
26+
padding: 10px 20px;
27+
font-size: 18px;
28+
background: rgba(255,255,255, .4);
29+
border-color: rgba(255,255,255, .5);
30+
margin: 10px;
3231
}
3332

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);
33+
.btn{
34+
background-color: lightgreen;
35+
border: none;
36+
padding: 10px 20px;
37+
border-radius: 5px;
38+
margin: 10px;
39+
font-size: 20px;
40+
box-shadow: 0 0 4px rgba(0,0,0,.3);
41+
cursor: pointer;
4342
}
4443

45-
.btn:hover {
46-
box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
47-
transition: all 300ms ease;
44+
.btn:hover{
45+
box-shadow: 0 0 8px rgba(0,0,0,.3);
46+
transition: all 300ms ease;
4847
}
4948

50-
.info-text {
51-
font-size: 20px;
52-
font-weight: 500;
53-
}
49+
.info-text{
50+
font-size: 20px;
51+
font-weight: 500;
52+
}

0 commit comments

Comments
 (0)