Skip to content

Commit 60ec88a

Browse files
PBJIPBJI
authored
Merge pull request #888 from yashwanthvarma18/master
BMI Calculator -yashwanthvarma18
2 parents 908d0bc + 360ad88 commit 60ec88a

File tree

5 files changed

+168
-0
lines changed

5 files changed

+168
-0
lines changed

‎BMICalculator/yashwanthvarma18/README.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
BMI Calculator
2+
3+
Description:
4+
This is a simple BMI (Body Mass Index) calculator web application. It allows users to input their height (in centimeters) and weight (in kilograms) and calculates their BMI. The BMI value and corresponding BMI category are then displayed on the screen.
5+
6+
How to Use:
7+
Open the index.html file in your web browser.
8+
Enter your height in centimeters in the "Height" field.
9+
Enter your weight in kilograms in the "Weight" field.
10+
Click the "Calculate BMI" button.
11+
The BMI value and category (e.g., Underweight, Normal Weight, Overweight, or Obese) will be displayed.
12+
13+
Features:
14+
Provides a simple and quick way to calculate BMI.
15+
Offers immediate feedback on your BMI category.
16+
Uses different font styles for an enhanced user interface.
17+
Features a pleasant background image to enhance user experience.
18+
19+
Technologies Used:
20+
HTML
21+
CSS
22+
JavaScript
23+
24+
BMI Categories:
25+
Underweight: BMI less than 18.5
26+
Normal Weight: BMI between 18.5 and 24.9
27+
Overweight: BMI between 25 and 29.9
28+
Obese: BMI of 30 or greater
29+
30+
SCREENSHOTS:
31+
32+
![BMI CALCULATOR](image.png)

‎BMICalculator/yashwanthvarma18/image.png

433 KB
Loading

‎BMICalculator/yashwanthvarma18/index.html

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
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+
<link rel="preconnect" href="https://fonts.googleapis.com">
9+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
10+
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fjalla+One&family=Merriweather:wght@700&family=Montserrat:wght@200&family=Oswald:wght@200;500&family=Signika:wght@300&display=swap" rel="stylesheet">
11+
12+
</head>
13+
<body>
14+
<div class="container">
15+
<h1>BMI Calculator</h1>
16+
<div class="input-container">
17+
<label for="height">Height (cm):</label>
18+
<input type="number" id="height" placeholder="Enter your height">
19+
</div>
20+
<div class="input-container">
21+
<label for="weight">Weight (kg):</label>
22+
<input type="number" id="weight" placeholder="Enter your weight">
23+
</div>
24+
<button id="calculate">Calculate BMI</button>
25+
<div id="result"></div>
26+
</div>
27+
<script src="script.js"></script>
28+
</body>
29+
</html>

‎BMICalculator/yashwanthvarma18/script.js

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
document.addEventListener("DOMContentLoaded", function() {
2+
const heightInput = document.getElementById("height");
3+
const weightInput = document.getElementById("weight");
4+
const calculateButton = document.getElementById("calculate");
5+
const resultContainer = document.getElementById("result");
6+
7+
calculateButton.addEventListener("click", function() {
8+
const height = parseFloat(heightInput.value);
9+
const weight = parseFloat(weightInput.value);
10+
11+
if (isNaN(height) || isNaN(weight) || height <= 0 || weight <= 0) {
12+
resultContainer.textContent = "Please enter valid height and weight.";
13+
return;
14+
}
15+
16+
const bmi = calculateBMI(height, weight);
17+
const category = getBMICategory(bmi);
18+
19+
resultContainer.innerHTML = `Your BMI is: <span class="bmi">${bmi.toFixed(2)}</span><br>Category: <span class="category">${category}</span>`;
20+
});
21+
22+
function calculateBMI(height, weight) {
23+
return weight / ((height / 100) * (height / 100));
24+
}
25+
26+
function getBMICategory(bmi) {
27+
if (bmi < 18.5) {
28+
return "Underweight";
29+
} else if (bmi < 24.9) {
30+
return "Normal Weight";
31+
} else if (bmi < 29.9) {
32+
return "Overweight";
33+
} else {
34+
return "Obese";
35+
}
36+
}
37+
});

‎BMICalculator/yashwanthvarma18/style.css

+70
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
body {
2+
font-family: 'Bebas Neue', sans-serif;
3+
font-family: 'Fjalla One', sans-serif;
4+
font-family: 'Merriweather', serif;
5+
font-family: 'Montserrat', sans-serif;
6+
font-family: 'Oswald', sans-serif;
7+
font-family: 'Signika', sans-serif;
8+
background-image: url('https://static.vecteezy.com/system/resources/previews/009/626/037/large_2x/silhouette-landscape-with-fog-forest-pine-trees-mountains-illustration-of-national-park-view-mist-black-and-white-good-for-wallpaper-background-banner-cover-poster-free-vector.jpg');
9+
background-color: #f0f0f0;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
height: 100vh;
14+
margin: 0;
15+
}
16+
17+
.container {
18+
19+
background-color: rgba(255, 255, 255, 0.8); /* Add a semi-transparent background color to make text readable */
20+
border-radius: 8px;
21+
padding: 50px;
22+
text-align: center;
23+
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
24+
}
25+
26+
.input-container {
27+
margin: 10px;
28+
padding: 5px;
29+
}
30+
31+
label {
32+
display: block;
33+
font-weight: bold;
34+
padding-bottom: 5px;
35+
font-family: 'Bebas Neue', sans-serif;
36+
font-family: 'Fjalla One', sans-serif;
37+
font-family: 'Merriweather', serif;
38+
font-family: 'Montserrat', sans-serif;
39+
font-family: 'Oswald', sans-serif;
40+
font-family: 'Signika', sans-serif;
41+
}
42+
43+
input {
44+
width: 100%;
45+
padding: 10px;
46+
border: 1px solid #ccc;
47+
border-radius: 4px;
48+
}
49+
50+
button {
51+
background-color: #007bff;
52+
color: #fff;
53+
border: none;
54+
border-radius: 4px;
55+
padding: 10px 20px;
56+
cursor: pointer;
57+
transition: background-color 0.3s ease-in-out, transform 0.3s ease-in-out;
58+
59+
}
60+
61+
button:hover {
62+
background-color: #0056b3;
63+
transform: scale(1.05);
64+
}
65+
66+
#result {
67+
font-weight: bold;
68+
margin: 20px 0;
69+
font-size: 24px;
70+
}

0 commit comments

Comments
 (0)