Skip to content

Commit 8067b61

Browse files
tajulafreentajulafreen
authored
Merge pull request #22 from tajulafreen/BMI_Calculator
50Projects-HTML-CSS-JavaScript : BMI calculator
2 parents ed3d8fd + 92953e6 commit 8067b61

File tree

4 files changed

+181
-0
lines changed

4 files changed

+181
-0
lines changed

‎README.md

+11
Original file line numberDiff line numberDiff line change
@@ -221,6 +221,17 @@ In order to run this project you need:
221221
</details>
222222
</li>
223223

224+
<li>
225+
<details>
226+
<summary>BMI Calculator</summary>
227+
<p>The BMI Calculator is a simple web application built using HTML, CSS, and JavaScript. It allows users to easily calculate their Body Mass Index (BMI) by entering their height and weight. The application then computes the BMI and displays the result, helping users understand their body mass relative to their height and weight. This project is beginner-friendly and provides a practical example of using basic web development skills to create a functional tool.</p>
228+
<ul>
229+
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/BMICalculator/">Live Demo</a></li>
230+
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/BMICalculator">Source</a></li>
231+
</ul>
232+
</details>
233+
</li>
234+
224235
</ol>
225236

226237
<p align="right">(<a href="#readme-top">back to top</a>)</p>

‎Source-Code/BMICalculator/index.html

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>BMI Calculator</title>
7+
<link rel="stylesheet" type="text/css" href="style.css" />
8+
<!-- link to CSS stylesheet -->
9+
</head>
10+
<body>
11+
<div class="container">
12+
<div class="bmi">
13+
<h2>Body Mass Index Calculator</h2>
14+
<p class="text">Height in cm</p>
15+
<input type="text" id="height" />
16+
<p class="text">Weight in kg</p>
17+
<input type="text" id="weight" />
18+
<p id="result"></p>
19+
<button id="btn">Calculate</button>
20+
</div>
21+
<div class="chart">
22+
<table>
23+
<thead>
24+
<tr>
25+
<th>BMI</th>
26+
<th>Category</th>
27+
</tr>
28+
</thead>
29+
<tbody>
30+
<tr>
31+
<td data-column="bmi">less than 18.5</td>
32+
<td data-column="category">Underweight</td>
33+
</tr>
34+
<tr>
35+
<td data-column="bmi">between 18.5 and 24.9</td>
36+
<td data-column="category">Ideal</td>
37+
</tr>
38+
<tr>
39+
<td data-column="bmi">between 25 and 29.9</td>
40+
<td data-column="category">Overweight</td>
41+
</tr>
42+
<tr>
43+
<td data-column="bmi">over 30</td>
44+
<td data-column="category">Obesity</td>
45+
</tr>
46+
</tbody>
47+
</table>
48+
</div>
49+
</div>
50+
<script src="script.js"></script>
51+
</body>
52+
</html>

‎Source-Code/BMICalculator/script.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
document.getElementById('btn').addEventListener('click', () => {
2+
const height = parseFloat(document.getElementById('height').value);
3+
const weight = parseFloat(document.getElementById('weight').value);
4+
5+
if (
6+
Number.isNaN(height)
7+
|| Number.isNaN(weight)
8+
|| height <= 0
9+
|| weight <= 0
10+
) {
11+
document.getElementById('result').innerHTML = 'Please enter valid positive numbers for height and weight.';
12+
return;
13+
}
14+
15+
const heightInMeters = height / 100;
16+
const bmi = weight / (heightInMeters * heightInMeters);
17+
const bmio = bmi.toFixed(2);
18+
19+
document.getElementById('result').innerHTML = `Your BMI is ${bmio}`;
20+
});

‎Source-Code/BMICalculator/style.css

+98
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
body {
2+
text-align: center;
3+
font-family: 'Courier New', Courier, monospace;
4+
background: linear-gradient(rgb(63, 217, 220) 0%, rgb(238, 248, 248) 100%);
5+
min-height: 100vh;
6+
}
7+
8+
.container {
9+
margin: 20px;
10+
display: flex;
11+
flex-direction: column;
12+
align-items: center;
13+
}
14+
15+
.bmi {
16+
width: 350px;
17+
background-color: #fff;
18+
padding: 20px;
19+
border-radius: 10px;
20+
margin: auto;
21+
}
22+
23+
h2 {
24+
font-size: 30px;
25+
font-weight: 600;
26+
}
27+
28+
.text {
29+
text-align: center;
30+
}
31+
32+
#weight,
33+
#height {
34+
color: #222f3e;
35+
text-align: left;
36+
font-size: 20px;
37+
font-weight: 200;
38+
outline: none;
39+
border: 1px solid black;
40+
border-radius: 7px;
41+
width: 200px;
42+
height: 35px;
43+
}
44+
45+
#weight:focus,
46+
#height:focus {
47+
width: 250px;
48+
transition: 0.5s;
49+
}
50+
51+
#result {
52+
color: #971f1f;
53+
font-size: large;
54+
font-weight: 400;
55+
}
56+
57+
#btn {
58+
font-size: medium;
59+
font-family: inherit;
60+
margin-top: 10px;
61+
border: none;
62+
background: lightblue;
63+
width: 150px;
64+
padding: 10px;
65+
border-radius: 30px;
66+
outline: none;
67+
cursor: pointer;
68+
transition: 0.5s;
69+
}
70+
71+
#btn:hover {
72+
transform: scale(1.1);
73+
transition: 0.5s;
74+
}
75+
76+
table {
77+
width: 400px;
78+
border-collapse: collapse;
79+
margin: 20px auto;
80+
}
81+
82+
tr {
83+
background: lightblue;
84+
}
85+
86+
th {
87+
background: #fff;
88+
color: #000;
89+
font-weight: bold;
90+
}
91+
92+
td,
93+
th {
94+
padding: 10px;
95+
border: 1px solid #000;
96+
text-align: center;
97+
font-size: 18px;
98+
}

0 commit comments

Comments
 (0)