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)
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