Skip to content

Commit e2251b1

Browse files
authored
Merge branch 'thinkswell:master' into master
2 parents 58927c5 + 337916d commit e2251b1

File tree

123 files changed

+4701
-27
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

123 files changed

+4701
-27
lines changed
-128 KB
Loading
Lines changed: 32 additions & 0 deletions
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)
433 KB
Loading
Lines changed: 29 additions & 0 deletions
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>
Lines changed: 37 additions & 0 deletions
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+
});
Lines changed: 70 additions & 0 deletions
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+
}
Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
This is a simple Background Generator Made using HTML,CSS and JS which allow user to input the color of its choice and change color from left to right.
2+
3+
4+
![Alt text](image.png)
5+
![Alt text](image-1.png)
6+
![Alt text](image-2.png)
78 KB
Loading
96 KB
Loading
86 KB
Loading

0 commit comments

Comments
 (0)