Skip to content

Commit 7333237

Browse files
harshita2216harshita2216
authored
Merge pull request #282 from supzi-del/supzidel
Added bmi calculator using js
2 parents 6198318 + cc8afba commit 7333237

File tree

5 files changed

+191
-0
lines changed

5 files changed

+191
-0
lines changed

‎BMI Calculator (JS)/index.html

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
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">
6+
<title>BMI Calculator</title>
7+
<meta name="description" content="JS app to calculates Body Mass Index">
8+
<meta name="author" content="Supritha">
9+
<link rel="stylesheet" href="style.css">
10+
</head>
11+
<body>
12+
<div class="bmi">
13+
<h2>Body Mass Index Calculator</h2>
14+
<p class="text">Height in cm</p><input type="text" id="height">
15+
<p class="text">Weight in kg</p><input type="text" id="weight">
16+
<p id="result"></p><button id="btn">Calculate</button>
17+
</div>
18+
<div class="chart">
19+
<table>
20+
<thead>
21+
<tr>
22+
<th>BMI</th>
23+
<th>Category</th>
24+
</tr>
25+
</thead>
26+
<tbody>
27+
<tr>
28+
<td data-column="bmi">less than 18.5</td>
29+
<td data-column="category">Underweight</td>
30+
</tr>
31+
<tr>
32+
<td data-column="bmi">between 18.5 and 24.9</td>
33+
<td data-column="category">Ideal</td>
34+
</tr>
35+
<tr>
36+
<td data-column="bmi">between 25 and 29.9</td>
37+
<td data-column="category">Overweight</td>
38+
</tr>
39+
<tr>
40+
<td data-column="bmi">over 30 </td>
41+
<td data-column="category">Obesity</td>
42+
</tr>
43+
</tbody>
44+
</table>
45+
</div>
46+
<script src="script.js"></script>
47+
</body>
48+
</html>
49+

‎BMI Calculator (JS)/readme.md

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<h1>BMI Calculator using JS</h1>
2+
3+
<p>Calculates the Body Mass Index of a person, provided with a BMI chart</p>
4+
5+
### Use of the Project:
6+
7+
<p>User enters values - height in cm and weight in kg and clicks on "calculate" button to obtain BMI value and compares the value in the given BMI chart.</p>
8+
9+
<h3>Used Technologies</h3>
10+
<ul>
11+
<li>HTML5</li>
12+
<li>CSS3</li>
13+
<li>JavaScript</li>
14+
</ul>
15+
16+
#### Steps to Use:
17+
18+
---
19+
20+
- Download or clone the repository
21+
22+
```
23+
git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
24+
```
25+
26+
- Go to the directory
27+
- Run the index.html file
28+
- Start Calculatings!
29+
30+
<h3> Video Demo </h3>
31+
32+
<video controls width="960" alt="bmicalc">
33+
<source src="https://user-images.githubusercontent.com/78655439/126800926-9544c5b5-5167-4419-a921-512225191a67.mp4">
34+
</video>
35+
36+
<br>
37+
38+

‎BMI Calculator (JS)/script.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
document.getElementById("btn").addEventListener("click", function() {
2+
var height_val = document.getElementById('height').value;
3+
var weight_val = document.getElementById('weight').value;
4+
var bmi = weight_val / (height_val / 100 * height_val / 100);
5+
var bmio = (bmi.toFixed(2));
6+
7+
document.getElementById("result").innerHTML = "Your BMI is " + bmio;
8+
});

‎BMI Calculator (JS)/style.css

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
/*===== GOOGLE FONTS =====*/
2+
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700&display=swap");
3+
4+
body {
5+
margin: 0;
6+
padding: 0;
7+
text-align: center;
8+
font-family: "Montserrat";
9+
background: rgb(34, 193, 195);
10+
background: linear-gradient(
11+
0deg,
12+
rgba(34, 193, 195, 1) 0%,
13+
rgba(253, 68, 45, 1) 100%
14+
);
15+
min-height: 100vh;
16+
}
17+
.bmi {
18+
width: 350px;
19+
position: absolute;
20+
top: 50%;
21+
left: 50%;
22+
background-color: #fff;
23+
transform: translate(-50%, -50%);
24+
padding: 20px;
25+
border-radius: 10px;
26+
}
27+
h2 {
28+
font-size: 30px;
29+
font-weight: 600;
30+
}
31+
.text {
32+
text-align: center;
33+
}
34+
#weight,
35+
#height {
36+
color: #222f3e;
37+
text-align: left;
38+
font-size: 20px;
39+
font-weight: 200;
40+
outline: none;
41+
border: 1px solid black;
42+
border-radius: 7px;
43+
width: 200px;
44+
height: 35px;
45+
}
46+
#weight:focus,
47+
#height:focus {
48+
width: 250px;
49+
transition: 0.5s;
50+
}
51+
#result {
52+
color: #341f97;
53+
}
54+
#btn {
55+
font-family: inherit;
56+
margin-top: 10px;
57+
border: none;
58+
color: #000;
59+
background: lightblue;
60+
width: 150px;
61+
padding: 10px;
62+
border-radius: 30px;
63+
outline: none;
64+
cursor: pointer;
65+
transition: 0.5s;
66+
}
67+
#btn:hover {
68+
transform: scale(1.1);
69+
transition: 0.5s;
70+
}
71+
72+
table {
73+
width: 650px;
74+
border-collapse: collapse;
75+
margin: 600px auto;
76+
}
77+
78+
tr {
79+
background: lightblue;
80+
}
81+
82+
th {
83+
background: #fff;
84+
color: #000;
85+
font-weight: bold;
86+
}
87+
88+
td,
89+
th {
90+
padding: 10px;
91+
border: 1px solid #000;
92+
text-align: center;
93+
font-size: 18px;
94+
}
95+

‎Index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -107,3 +107,4 @@
107107
| [Memory Card Game](https://github.com/Ayushparikh-code/Web-dev-mini-projects/tree/main/Memory%20Card%20Game) | A basic memory game where the main trick is to remember where the cards are. |
108108
| [Sudoku Solver](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/Sudoku%20Solver) |It solves Sudoku using backtracking|
109109
| [Counter APP](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/counter_App) |It is a simple react app which is used to incere or decrease the value of counter.
110+
| [BMI Calculator (JS)](https://github.com/soma2000-lang/Web-dev-mini-projects/tree/iron/BMI%20Calculator%20(JS)) |Calculates the Body Mass Index of a person, provided with a BMI chart.

0 commit comments

Comments
 (0)