Skip to content

50Projects-HTML-CSS-JavaScript : BMI calculator #22

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Jul 22, 2024
+181 −0
Merged

50Projects-HTML-CSS-JavaScript : BMI calculator #22

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b2e1cd6
Create a boiler plate for project
tajulafreen Jul 22, 2024
d3741b3
Add table and calculator container
tajulafreen Jul 22, 2024
ccb4426
Add funtionalites
tajulafreen Jul 22, 2024
a524593
Add Styles for table and form
tajulafreen Jul 22, 2024
92953e6
Add project description
tajulafreen Jul 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -221,6 +221,17 @@ In order to run this project you need:
</details>
</li>

<li>
<details>
<summary>BMI Calculator</summary>
<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>
<ul>
<li><a href="https://tajulafreen.github.io/50Projects-HTML-CSS-JavaScript/Source-Code/BMICalculator/">Live Demo</a></li>
<li><a href="https://github.com/tajulafreen/50Projects-HTML-CSS-JavaScript/tree/main/Source-Code/BMICalculator">Source</a></li>
</ul>
</details>
</li>

</ol>

<p align="right">(<a href="#readme-top">back to top</a>)</p>
52 changes: 52 additions & 0 deletions Source-Code/BMICalculator/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>BMI Calculator</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- link to CSS stylesheet -->
</head>
<body>
<div class="container">
<div class="bmi">
<h2>Body Mass Index Calculator</h2>
<p class="text">Height in cm</p>
<input type="text" id="height" />
<p class="text">Weight in kg</p>
<input type="text" id="weight" />
<p id="result"></p>
<button id="btn">Calculate</button>
</div>
<div class="chart">
<table>
<thead>
<tr>
<th>BMI</th>
<th>Category</th>
</tr>
</thead>
<tbody>
<tr>
<td data-column="bmi">less than 18.5</td>
<td data-column="category">Underweight</td>
</tr>
<tr>
<td data-column="bmi">between 18.5 and 24.9</td>
<td data-column="category">Ideal</td>
</tr>
<tr>
<td data-column="bmi">between 25 and 29.9</td>
<td data-column="category">Overweight</td>
</tr>
<tr>
<td data-column="bmi">over 30</td>
<td data-column="category">Obesity</td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
20 changes: 20 additions & 0 deletions Source-Code/BMICalculator/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
document.getElementById('btn').addEventListener('click', () => {
const height = parseFloat(document.getElementById('height').value);
const weight = parseFloat(document.getElementById('weight').value);

if (
Number.isNaN(height)
|| Number.isNaN(weight)
|| height <= 0
|| weight <= 0
) {
document.getElementById('result').innerHTML = 'Please enter valid positive numbers for height and weight.';
return;
}

const heightInMeters = height / 100;
const bmi = weight / (heightInMeters * heightInMeters);
const bmio = bmi.toFixed(2);

document.getElementById('result').innerHTML = `Your BMI is ${bmio}`;
});
98 changes: 98 additions & 0 deletions Source-Code/BMICalculator/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
body {
text-align: center;
font-family: 'Courier New', Courier, monospace;
background: linear-gradient(rgb(63, 217, 220) 0%, rgb(238, 248, 248) 100%);
min-height: 100vh;
}

.container {
margin: 20px;
display: flex;
flex-direction: column;
align-items: center;
}

.bmi {
width: 350px;
background-color: #fff;
padding: 20px;
border-radius: 10px;
margin: auto;
}

h2 {
font-size: 30px;
font-weight: 600;
}

.text {
text-align: center;
}

#weight,
#height {
color: #222f3e;
text-align: left;
font-size: 20px;
font-weight: 200;
outline: none;
border: 1px solid black;
border-radius: 7px;
width: 200px;
height: 35px;
}

#weight:focus,
#height:focus {
width: 250px;
transition: 0.5s;
}

#result {
color: #971f1f;
font-size: large;
font-weight: 400;
}

#btn {
font-size: medium;
font-family: inherit;
margin-top: 10px;
border: none;
background: lightblue;
width: 150px;
padding: 10px;
border-radius: 30px;
outline: none;
cursor: pointer;
transition: 0.5s;
}

#btn:hover {
transform: scale(1.1);
transition: 0.5s;
}

table {
width: 400px;
border-collapse: collapse;
margin: 20px auto;
}

tr {
background: lightblue;
}

th {
background: #fff;
color: #000;
font-weight: bold;
}

td,
th {
padding: 10px;
border: 1px solid #000;
text-align: center;
font-size: 18px;
}