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

Commit4389873

Browse files
update bmi calculator project
1 parentea83e76 commit4389873

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
<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-
<linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"rel="stylesheet">
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"/>
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-
<divclass="container d-block text-center">
21-
<h2class="p-2">Body Mass Index Calculator using Metric Units</h2>
22-
Your Height:<inputclass="p-2 m-2"type="number"name="cm"id="cm"placeholder="centimeters">
23-
<br/>
24-
Your Weight:<inputclass="p-2 m-2"type="number"name="weight"id="weight"placeholder="kilograms">
25-
<br/>
26-
<buttonclass="btn btn-primary p-2 m-2"onclick="fun()">Compute BMI</button><br/>
27-
Your BMI:<inputclass="p-2 m-2"type="text"name="bmi"id="bmi"disabled>
28-
<h4class="p-2 m-2"></h4>
8+
<linkrel="stylesheet"href="style.css"/>
9+
</head>
10+
<body>
11+
<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>
2937
</div>
30-
31-
</body>
38+
<scriptsrc="index.js"></script>
39+
</body>
3240
</html>
33-
<scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
34-
<scriptsrc="./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+
constbtnEl=document.getElementById("btn");
2+
constBMIInputEl=document.getElementById("bmi");
3+
constweightConditionEl=document.getElementById("weight-condition");
4+
5+
functioncalculateBMI(){
6+
constHeightValue=document.getElementById("height").value/100;
7+
8+
constweightValue=document.getElementById("weight").value;
9+
constbmiValue=weightValue/(HeightValue*HeightValue);
10+
BMIInputEl.value=bmiValue;
11+
12+
if(bmiValue<18.5){
13+
weightConditionEl.innerText="Under weight";
14+
}elseif(bmiValue>=18.5&&bmiValue<=24.9){
15+
weightConditionEl.innerText="Normal weight";
16+
}elseif(bmiValue>=25&&bmiValue<=29.9){
17+
weightConditionEl.innerText="Overweight";
18+
}elseif(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:010px10pxrgba(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: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;
32+
}
33+
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);
43+
}
44+
45+
.btn:hover {
46+
box-shadow:008pxrgba(0,0,0,0.3);
47+
transition: all300ms ease;
48+
}
49+
50+
.info-text {
51+
font-size:20px;
52+
font-weight:500;
53+
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp