Skip to content

Commit a715146

Browse files
nirajxdevnirajxdev
committed
Add '07_bmi-calculator/' from commit '15984feedb99722c6d23d08376d43f6919cc8793'
git-subtree-dir: 07_bmi-calculator git-subtree-mainline: 21072e1 git-subtree-split: 15984fe
2 parents 21072e1 + 15984fe commit a715146

File tree

4 files changed

+247
-0
lines changed

4 files changed

+247
-0
lines changed

‎07_bmi-calculator/README.md‎

Lines changed: 131 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,131 @@
1+
# BMI Calculator
2+
3+
[![Status](https://img.shields.io/badge/status-active-brightgreen.svg)](https://github.com/niraj0624/bmi-calculator)
4+
[![License](https://img.shields.io/github/license/niraj0624/bmi-calculator.svg)](LICENSE)
5+
[![GitHub issues](https://img.shields.io/github/issues/niraj0624/bmi-calculator.svg)](https://github.com/niraj0624/bmi-calculator/issues)
6+
[![GitHub forks](https://img.shields.io/github/forks/niraj0624/bmi-calculator.svg)](https://github.com/niraj0624/bmi-calculator/network)
7+
[![GitHub stars](https://img.shields.io/github/stars/niraj0624/bmi-calculator.svg)](https://github.com/niraj0624/bmi-calculator/stargazers)
8+
9+
## Description
10+
11+
**BMI Calculator** is a simple, lightweight web application built using vanilla JavaScript, HTML, and CSS. It allows users to quickly calculate their Body Mass Index (BMI) based on their height and weight. BMI is a reliable indicator of body fatness and is widely used to screen for weight categories that may lead to health problems.
12+
13+
---
14+
15+
## Features
16+
17+
- User-friendly interface
18+
- Real-time BMI calculation
19+
- Input validation for height and weight
20+
- Categorizes BMI results (e.g., Underweight, Normal, Overweight, Obese)
21+
- Responsive design for desktops and mobile devices
22+
- No external dependencies
23+
24+
---
25+
26+
## Demo
27+
28+
You can view a live demo [here](https://niraj0624.github.io/bmi-calculator/)
29+
30+
---
31+
32+
## Getting Started
33+
34+
### Prerequisites
35+
36+
- A modern web browser (Chrome, Firefox, Edge, etc.)
37+
38+
### Installation
39+
40+
1. **Clone the repository:**
41+
```bash
42+
git clone https://github.com/niraj0624/bmi-calculator.git
43+
```
44+
2. **Navigate to the project directory:**
45+
```bash
46+
cd bmi-calculator
47+
```
48+
3. **Open `index.html` in your browser:**
49+
- Double click `index.html`
50+
- or run:
51+
```bash
52+
open index.html # Mac
53+
start index.html # Windows
54+
```
55+
56+
---
57+
58+
## Usage
59+
60+
1. Enter your height (in cm or meters, as specified).
61+
2. Enter your weight (in kg).
62+
3. Click on the "Calculate" button.
63+
4. View your BMI and the associated category.
64+
65+
---
66+
67+
## Repository Status
68+
69+
- **Project Status:** Active & maintained
70+
- **Latest Release:** See [Releases](https://github.com/niraj0624/bmi-calculator/releases)
71+
- **Issues:** Please use the [issue tracker](https://github.com/niraj0624/bmi-calculator/issues) to report bugs or suggest features.
72+
73+
---
74+
75+
## Technologies Used
76+
77+
- **JavaScript** (39.3%)
78+
- **HTML** (32.4%)
79+
- **CSS** (28.3%)
80+
81+
---
82+
83+
## Contributing
84+
85+
We welcome contributions! Please follow these steps to contribute:
86+
87+
1. **Fork** this repository.
88+
2. **Clone** your forked repo:
89+
```bash
90+
git clone https://github.com/niraj0624/bmi-calculator.git
91+
```
92+
3. **Create a new branch** for your feature or bugfix:
93+
```bash
94+
git checkout -b feature/your-feature-name
95+
```
96+
4. **Make your changes** and **commit** them:
97+
```bash
98+
git add .
99+
git commit -m "Describe your changes"
100+
```
101+
5. **Push** to your forked repository:
102+
```bash
103+
git push origin feature/your-feature-name
104+
```
105+
6. **Open a Pull Request** against the `main` branch of this repository.
106+
107+
For major changes, please open an issue first to discuss what you would like to change.
108+
109+
**Contribution Guidelines:**
110+
- Write clear, concise commit messages
111+
- Follow the existing code style
112+
- Check for lint errors before submitting
113+
- Add comments and documentation where necessary
114+
115+
---
116+
117+
## License
118+
119+
This project is licensed under the [MIT License](LICENSE).
120+
121+
---
122+
123+
## Contact
124+
125+
For any questions or feedback, please open an issue or contact the maintainer [@niraj0624](https://github.com/niraj0624).
126+
127+
---
128+
129+
For any questions or feedback, please open an issue or contact the maintainer [@niraj0624](https://github.com/niraj0624).
130+
131+
---

‎07_bmi-calculator/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
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" href="style.css">
8+
</head>
9+
<body>
10+
<div id="container">
11+
<h2 id="heading">BMI Calculator</h2>
12+
13+
<form action="" id="input_form">
14+
<p id="weight_field">
15+
<label for="weight">Weight (in kg)</label>
16+
17+
<input type="number" id="weight" placeholder="Enter weight">
18+
</p>
19+
20+
<p id="height_field">
21+
<label for="height">Height (in cm)</label>
22+
23+
<input type="number" id="height" placeholder="Enter height">
24+
</p>
25+
26+
27+
<button id="calculate">Calculate</button>
28+
<button id="reset">Reset</button>
29+
30+
<div id="result"></div>
31+
32+
</form>
33+
</div>
34+
<script src="script.js"></script>
35+
</body>
36+
</html>

‎07_bmi-calculator/script.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
const form = document.querySelector('form');
2+
// const result = document.querySelector('#result');
3+
4+
form.addEventListener('submit', function(e){
5+
e.preventDefault();
6+
7+
const height = parseFloat(document.querySelector('#height').value);
8+
const weight = parseFloat(document.querySelector('#weight').value);
9+
const result = document.querySelector('#result');
10+
11+
if (height <= 0 || isNaN(height)) {
12+
result.innerHTML = `Invalid height provided!`;
13+
} else if (weight <= 0 || isNaN(weight)) {
14+
result.innerHTML = `Invalid weight provided!`;
15+
} else {
16+
const bmi = (weight / ((height * height) / 10000)).toFixed(2);
17+
18+
let category = "";
19+
if (bmi < 18.5) category = "Underweight";
20+
else if (bmi < 24.9) category = "Normal weight";
21+
else if (bmi < 29.9) category = "Over weight";
22+
else category = "Obese";
23+
24+
result.innerHTML = `<span>BMI is ${bmi} (${category})</span>` ;
25+
}
26+
});
27+
28+
document.querySelector('#reset').addEventListener('click', function(e){
29+
e.preventDefault();
30+
document.querySelector('#height').value = '';
31+
document.querySelector('#weight').value = '';
32+
result.innerHTML = '';
33+
});

‎07_bmi-calculator/style.css‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
body {
2+
display: flex;
3+
justify-content: center;
4+
/* align-items: center; */
5+
/* background-color: #1e1e2f; */
6+
color: #f0f0f0;
7+
}
8+
#container {
9+
margin-top: 10rem;
10+
border: 2px solid white;
11+
border-radius: 10px;
12+
box-shadow: 0 5px 8px rgba(166, 127, 127, 0.7);
13+
padding: 50px;
14+
background-color: #1e1e2f;
15+
}
16+
#heading {
17+
text-align: center;
18+
font-size: 3em;
19+
}
20+
21+
label {
22+
font-size: 30px;
23+
}
24+
input {
25+
height: 30px;
26+
width: 170px;
27+
}
28+
button {
29+
display: grid;
30+
grid-template-rows: none;
31+
margin-top: 30px;
32+
margin-left: 25%;
33+
align-items: center;
34+
/* text-align: center; */
35+
font-size: larger;
36+
height: 2rem;
37+
width: 10rem;
38+
border-radius: 50px;
39+
}
40+
#result {
41+
text-align: center;
42+
margin-top: 40px;
43+
font-size: 2rem;
44+
background-color: #fff;
45+
color: #111111;
46+
47+
}

0 commit comments

Comments
 (0)