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
tajulafreen merged 5 commits into from
Jul 22, 2024
Merged

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

Changes from 1 commit
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
Prev Previous commit
Next Next commit
Add table and calculator container
  • Loading branch information
@tajulafreen
tajulafreen committed Jul 22, 2024
commit d3741b325c95f6f814150c2680dc1795cd0517a8
57 changes: 48 additions & 9 deletions Source-Code/BMICalculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,52 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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>

<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>
</body>
</html>