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 4389873

Browse files
update bmi calculator project
1 parent ea83e76 commit 4389873

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

0 commit comments

Comments
(0)

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