Skip to content

Commit 447adf6

Browse files
princesatapathyprincesatapathy
authored
Merge pull request #2 from princesatapathy/princesatapathy-patch-2
Add files via upload
2 parents 9a8ac86 + 1c2320e commit 447adf6

File tree

4 files changed

+178
-0
lines changed

4 files changed

+178
-0
lines changed

‎Javascript/Bmi calculator/README.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# BMI Calculator
2+
3+
A simple and interactive web-based Body Mass Index (BMI) calculator that allows users to calculate their BMI by entering their height and weight.
4+
5+
## Features
6+
7+
- Calculate BMI based on height (in cm) and weight (in kg)
8+
- Real-time validation of input values
9+
- BMI category classification:
10+
- Underweight: Less than 18.5
11+
- Normal weight: 18.6 - 24.9
12+
- Overweight: 25 - 29.9
13+
- Obese: Greater than 29.9
14+
- User-friendly interface with clear visual feedback
15+
- Weight guide reference displayed on the page
16+
17+
## Technologies Used
18+
19+
- HTML5
20+
- CSS3
21+
- JavaScript (Vanilla JS)
22+
23+
## Project Structure
24+
25+
```
26+
Bmi calculator/
27+
├── index.html # Main HTML structure
28+
├── script.js # JavaScript logic for BMI calculation
29+
├── style.css # Styling and layout
30+
└── README.md # Project documentation
31+
```
32+
33+
## How to Use
34+
35+
1. Open `index.html` in your web browser
36+
2. Enter your height in centimeters (cm)
37+
3. Enter your weight in kilograms (kg)
38+
4. Click the "Calculate" button
39+
5. View your BMI result and corresponding category
40+
41+
## BMI Formula
42+
43+
BMI is calculated using the formula:
44+
```
45+
BMI = weight (kg) / (height (m))²
46+
```
47+
48+
The calculator converts height from centimeters to meters by dividing by 10000 (since height² in cm² needs to be converted to m²).
49+
50+
## Getting Started
51+
52+
Simply clone or download this repository and open `index.html` in any modern web browser. No additional setup or dependencies are required.
53+
54+
## Browser Compatibility
55+
56+
This project works on all modern web browsers including:
57+
- Google Chrome
58+
- Mozilla Firefox
59+
- Microsoft Edge
60+
- Safari
61+
62+
## License
63+
64+
This project is open source and available for educational purposes.
65+

‎Javascript/Bmi calculator/index.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
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+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<link rel="stylesheet" href="style.css" />
8+
<title>BMI Calculator</title>
9+
</head>
10+
<body>
11+
<nav>
12+
<a href="/" aria-current="page">Home</a>
13+
<a target="_blank" href="https://www.youtube.com/@chaiaurcode"
14+
>Youtube channel</a
15+
>
16+
</nav>
17+
<div class="container">
18+
<h1>BMI Calculator</h1>
19+
<form>
20+
<p><label>Height in CM: </label><input type="text" id="height" /></p>
21+
<p><label>Weight in KG: </label><input type="text" id="weight" /></p>
22+
<button>Calculate</button>
23+
<div id="results"></div>
24+
<div id="weight-guide">
25+
<h3>BMI Weight Guide</h3>
26+
<p>Under Weight = Less than 18.6</p>
27+
<p>Normal Range = 18.6 and 24.9</p>
28+
<p>Overweight = Greater than 24.9</p>
29+
</div>
30+
</form>
31+
</div>
32+
</body>
33+
<script src="script.js"></script>
34+
</html>

‎Javascript/Bmi calculator/script.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
const form = document.querySelector('form');
2+
3+
form.addEventListener('submit', function(e) {
4+
e.preventDefault();
5+
6+
const height = parseInt(document.querySelector('#height').value);
7+
const weight = parseInt(document.querySelector('#weight').value);
8+
const results = document.querySelector('#results');
9+
10+
if (isNaN(height) || height <= 0) {
11+
results.innerHTML = "Please give a valid Height";
12+
} else if (isNaN(weight) || weight <= 0) {
13+
results.innerHTML = "Please give a valid Weight";
14+
} else {
15+
const bmi = (weight/((height*height)/10000)).toFixed(2);
16+
let message ="";
17+
if(bmi<18.5){
18+
message="you'r are Underweight"
19+
}
20+
else if(bmi>=18.6 && bmi <=24.9){
21+
message="you'r have Normal weight"
22+
}
23+
else if(bmi >= 25 && bmi <= 29.9){
24+
message="you'r are overweight"
25+
}
26+
else{
27+
message ="you'r are obese"
28+
}
29+
//showing the results
30+
results.innerHTML = `<span>Your BMI is ${bmi}. ${message}</span>`;
31+
}
32+
});

‎Javascript/Bmi calculator/style.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.container {
2+
width: 575px;
3+
height: 825px;
4+
5+
background-color: #797978;
6+
padding-left: 30px;
7+
}
8+
#height,
9+
#weight {
10+
width: 150px;
11+
height: 25px;
12+
margin-top: 30px;
13+
}
14+
15+
#weight-guide {
16+
margin-left: 75px;
17+
margin-top: 25px;
18+
}
19+
20+
#results {
21+
font-size: 35px;
22+
margin-left: 90px;
23+
margin-top: 20px;
24+
color: rgb(241, 241, 241);
25+
}
26+
27+
button {
28+
width: 150px;
29+
height: 35px;
30+
margin-left: 90px;
31+
margin-top: 25px;
32+
background-color: #fff;
33+
padding: 1px 30px;
34+
border-radius: 8px;
35+
color: #212121;
36+
text-decoration: none;
37+
border: 2px solid #212121;
38+
39+
font-size: 25px;
40+
}
41+
42+
h1 {
43+
padding-left: 15px;
44+
padding-top: 25px;
45+
46+
}
47+

0 commit comments

Comments
 (0)