Movatterモバイル変換

[0]ホーム
URL:

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

Commit772b540

Browse files
update bmi project
1 parent4389873 commit772b540

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
<htmllang="en">
3-
<head>
4-
<metacharset="UTF-8"/>
5-
<metahttp-equiv="X-UA-Compatible"content="IE=edge"/>
6-
<metaname="viewport"content="width=device-width, initial-scale=1.0"/>
7-
<title>BMI</title>
8-
<linkrel="stylesheet"href="style.css"/>
9-
</head>
10-
<body>
3+
<head>
4+
<metacharset="UTF-8">
5+
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
6+
<metaname="viewport"content="width=device-width, initial-scale=1.0">
7+
<title>BMI Calculator</title>
8+
<linkrel="stylesheet"href="style.css">
9+
</head>
10+
<body>
1111
<divclass="container">
12-
<h2class="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-
<buttonclass="btn"id="btn">Compute BMI</button>
32-
Your BMI:
33-
<inputclass="input"type="text"id="bmi"disabled/>
34-
<h4class="info-text">
35-
Weight Condition:<spanid="weight-condition"></span>
36-
</h4>
12+
<h1class="heading">Body Mass Index (BMI) Calculator</h1>
13+
Your Height (cm):
14+
<inputtype="number"class="input"id="height"value="180"placeholder="Enter your height in cm">
15+
Your Weight (kg):
16+
<inputtype="number"class="input"id="weight"value="80"placeholder="Enter your weight in kg">
17+
<buttonclass="btn"id="btn">Compute BMI</button>
18+
<inputdisabledtype="text"class="input"id="bmi-result">
19+
<h4class="info-text">Weight Condition:<spanid="weight-condition"></span></h4>
3720
</div>
3821
<scriptsrc="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
constbtnEl=document.getElementById("btn");
2-
constBMIInputEl=document.getElementById("bmi");
2+
constbmiInputEl=document.getElementById("bmi-result");
33
constweightConditionEl=document.getElementById("weight-condition");
44

55
functioncalculateBMI(){
6-
constHeightValue=document.getElementById("height").value/100;
7-
6+
constheightValue=document.getElementById("height").value/100;
87
constweightValue=document.getElementById("weight").value;
9-
constbmiValue=weightValue/(HeightValue*HeightValue);
10-
BMIInputEl.value=bmiValue;
8+
9+
constbmiValue=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:010px10pxrgba(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:010px10pxrgba(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:10px20px;
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:10px20px;
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:10px20px;
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:10px20px;
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:008pxrgba(0,0,0,0.3);
47-
transition: all300ms ease;
44+
.btn:hover{
45+
box-shadow:008pxrgba(0,0,0,.3);
46+
transition: all300ms 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)
[8]ページ先頭
©2009-2025 Movatter.jp