Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 772b540

Browse files
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:004pxrgba(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:004pxrgba(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)

AltStyle によって変換されたページ (->オリジナル) /