Skip to content

Commit a82cb9c

Browse files
NitkarshChourasiaNitkarshChourasia
authored
Merge pull request #1029 from DevanshKyada27/BMI
BMI_Calculator/DevanshKyada27
2 parents ba7e9fd + 9d4260e commit a82cb9c

File tree

4 files changed

+382
-0
lines changed

4 files changed

+382
-0
lines changed

‎BMICalculator/README.md

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
2+
# BMI Calculator
3+
4+
- Created a BMI Calculator using HTML, CSS and JavaScript.
5+
- The Calculator takes the input your age, gender, your height(in cms), your weight(in kg) and gives BMI as the output.
6+
- Its easy to use, you can use it to calculate your BMI.
7+
8+
9+
10+
11+
## Deployment
12+
13+
To deploy this project run
14+
15+
```bash
16+
Its just a basic HTML, CSS and JS code you can copy and paste this code in your code editor and can see the project.
17+
```
18+
19+
20+
## Features
21+
22+
- Easy to use
23+
- Great interface
24+
- Created just by using basic HTML, CSS and JavaScript code
25+
26+
27+
28+
## Screenshots
29+
30+
![App Screenshot](https://user-images.githubusercontent.com/143169520/276362805-c971b6e5-46fc-47a8-8767-b0153a1ed1f8.png)
31+
32+
- This is how the project interface looks like.
33+
34+
35+
## Demo
36+
37+
- Live screen recording of the project:
38+
39+
You can click the link to view the live demo of the project and have a glimpse of the project : https://user-images.githubusercontent.com/143169520/276362241-a37d4a6b-5466-4757-832b-8f21b6ca60f0.mp4
40+

‎BMICalculator/index.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
<head>
2+
<link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
3+
</head>
4+
<body>
5+
<link rel="stylesheet" href="style.css">
6+
<h3><b>B</b>ody <b>M</b>ass <b>I</b>ndex Calculator</h3>
7+
<form class="form" id="form" onsubmit="return validateForm()">
8+
<div class="row-one">
9+
<input type="text" class="text-input" id="age" autocomplete="off" required/><p class="text">Age</p>
10+
<label class="container">
11+
<input type="radio" name="radio" id="f"><p class="text">Female</p>
12+
<span class="checkmark"></span>
13+
</label>
14+
<label class="container">
15+
<input type="radio" name="radio" id="m"><p class="text">Male</p>
16+
<span class="checkmark"></span>
17+
</label>
18+
</div>
19+
20+
<div class="row-two">
21+
<input type="text" class="text-input" id="height" autocomplete="off" required><p class="text">Height (cm)</p>
22+
<input type="text" class="text-input" id="weight" autocomplete="off" required><p class="text">Weight (kg)</p>
23+
</div>
24+
<button type="button" id="submit">Submit</button>
25+
<script src="./index.js"></script>
26+
</form>
27+
</body>

‎BMICalculator/index.js

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
var age = document.getElementById("age");
2+
var height = document.getElementById("height");
3+
var weight = document.getElementById("weight");
4+
var male = document.getElementById("m");
5+
var female = document.getElementById("f");
6+
var form = document.getElementById("form");
7+
function validateForm() {
8+
if (
9+
age.value == "" ||
10+
height.value == "" ||
11+
weight.value == "" ||
12+
(male.checked == false && female.checked == false)
13+
) {
14+
alert("All fields are required!");
15+
document
16+
.getElementById("submit")
17+
.removeEventListener("click", countBmi);
18+
} else {
19+
countBmi();
20+
}
21+
}
22+
document.getElementById("submit").addEventListener("click", validateForm);
23+
function countBmi() {
24+
var p = [age.value, height.value, weight.value];
25+
if (male.checked) {
26+
p.push("male");
27+
} else if (female.checked) {
28+
p.push("female");
29+
}
30+
form.reset();
31+
var bmi = Number(p[2]) / (((Number(p[1]) / 100) * Number(p[1])) / 100);
32+
var result = "";
33+
if (bmi < 18.5) {
34+
result = "Underweight";
35+
} else if (18.5 <= bmi && bmi <= 24.9) {
36+
result = "Healthy";
37+
} else if (25 <= bmi && bmi <= 29.9) {
38+
result = "Overweight";
39+
} else if (30 <= bmi && bmi <= 34.9) {
40+
result = "Obese";
41+
} else if (35 <= bmi) {
42+
result = "Extremely obese";
43+
}
44+
var h1 = document.createElement("h1");
45+
var h2 = document.createElement("h2");
46+
var t = document.createTextNode(result);
47+
var b = document.createTextNode("BMI: ");
48+
var r = document.createTextNode(parseFloat(bmi).toFixed(2));
49+
h1.appendChild(t);
50+
h2.appendChild(b);
51+
h2.appendChild(r);
52+
document.body.appendChild(h1);
53+
document.body.appendChild(h2);
54+
document.getElementById("submit").removeEventListener("click", countBmi);
55+
document
56+
.getElementById("submit")
57+
.removeEventListener("click", validateForm);
58+
}
59+
document.getElementById("submit").addEventListener("click", countBmi);

‎BMICalculator/style.css

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
* {
2+
font-family: Quicksand;
3+
font-size: 16px;
4+
color: #333;
5+
}
6+
body {
7+
margin: 0;
8+
height: 100vh;
9+
padding: 0;
10+
border: 0;
11+
background: linear-gradient(to bottom right, #F1F2B5, #eef2f3);
12+
}
13+
.form {
14+
background-color: #fff;
15+
height: 240px;
16+
width: 450px;
17+
border-radius: 20px;
18+
margin: 20px auto 20px auto;
19+
display: block;
20+
border: solid 1px #289df6;
21+
box-shadow: 0 0 40px 0 #ddd;
22+
}
23+
.form:hover {
24+
box-shadow: 0 0 60px 0 #ccc;
25+
transition: 0.4s;
26+
transform: scale(1.02);
27+
}
28+
.row-one {
29+
padding: 20px;
30+
}
31+
.row-two {
32+
padding: 20px;
33+
}
34+
.text-input {
35+
width: 60px;
36+
height: 30px;
37+
border-radius: 10px;
38+
background-color: #dbeffe;
39+
border: none;
40+
outline: none;
41+
padding: 5px 10px;
42+
cursor: pointer;
43+
}
44+
.text-input:last-child {
45+
margin-bottom: 35px;
46+
}
47+
.text-input:hover {
48+
background-color: #cbe7fd;
49+
}
50+
#submit {
51+
border: none;
52+
border-radius: 10px;
53+
height: 40px;
54+
width: 140px;
55+
background-color: #289df6;
56+
color: #fff;
57+
margin: auto;
58+
display: block;
59+
outline: none;
60+
cursor: pointer;
61+
}
62+
#submit:hover {
63+
background-color: #0a8ef2;
64+
}
65+
.text {
66+
display: inline-block;
67+
margin: 5px 20px 5px 8px;
68+
}
69+
.row-one {
70+
padding: 30px 20px 15px 20px;
71+
}
72+
.row-two {
73+
padding: 15px 20px 30px 20px;
74+
}
75+
.container {
76+
display: inline-block;
77+
position: relative;
78+
padding-left: 30px;
79+
cursor: pointer;
80+
user-select: none;
81+
}
82+
.container input {
83+
position: absolute;
84+
opacity: 0;
85+
}
86+
.checkmark {
87+
position: absolute;
88+
top: 0;
89+
left: 0;
90+
height: 25px;
91+
width: 25px;
92+
background-color: #dbeffe;
93+
border-radius: 50%;
94+
}
95+
.container:hover input ~ .checkmark {
96+
background-color: #cbe7fd;
97+
}
98+
.container input:checked ~ .checkmark {
99+
background-color: #289df6;
100+
}
101+
h1 {
102+
font-size: 30px;
103+
font-weight: 300;
104+
text-align: center;
105+
color: #289df6;
106+
padding-top: 15px;
107+
display: block;
108+
}
109+
h2 {
110+
font-size: 22px;
111+
font-weight: 300;
112+
text-align: center;
113+
}
114+
h3 {
115+
font-size: 24px;
116+
font-weight: 300;
117+
text-align: center;
118+
padding: 15px;
119+
}
120+
h3 b {
121+
font-size: 32px;
122+
font-weight: 300;
123+
color: #289df6;
124+
}
125+
.checkmark:after {
126+
content: "";
127+
position: absolute;
128+
display: none;
129+
}
130+
.container input:checked ~ .checkmark:after {
131+
display: block;
132+
}
133+
.container .checkmark:after {
134+
left: 9px;
135+
top: 5px;
136+
width: 5px;
137+
height: 10px;
138+
border: solid white;
139+
border-width: 0 2px 2px 0;
140+
transform: rotate(45deg);
141+
}
142+
* {
143+
font-family: Quicksand;
144+
font-size: 16px;
145+
color: #333;
146+
}
147+
148+
body {
149+
margin: 0;
150+
height: 100vh;
151+
padding: 0;
152+
border: 0;
153+
background: linear-gradient(to bottom right, #F1F2B5, #eef2f3);
154+
}
155+
.form {
156+
background-color: #fff;
157+
height: 240px;
158+
width: 450px;
159+
border-radius: 20px;
160+
margin: 20px auto 20px auto;
161+
display: block;
162+
border: solid 1px #289df6;
163+
box-shadow: 0 0 40px 0 #ddd;
164+
}
165+
166+
.form:hover {
167+
box-shadow: 0 0 60px 0 #ccc;
168+
transition: .4s;
169+
transform: scale(1.02);
170+
}
171+
172+
.row-one {
173+
padding: 20px;
174+
}
175+
176+
.row-two {
177+
padding: 20px;
178+
}
179+
.container {
180+
display: inline-block;
181+
position: relative;
182+
padding-left: 30px;
183+
cursor: pointer;
184+
user-select: none;
185+
}
186+
187+
.container input {
188+
position: absolute;
189+
opacity: 0;
190+
}
191+
192+
.checkmark {
193+
position: absolute;
194+
top: 0;
195+
left: 0;
196+
height: 25px;
197+
width: 25px;
198+
background-color: #dbeffe;
199+
border-radius: 50%;
200+
}
201+
202+
.container:hover input ~ .checkmark {
203+
background-color: #cbe7fd;
204+
}
205+
206+
.container input:checked ~ .checkmark {
207+
background-color: #289df6;
208+
}
209+
210+
h1 {
211+
font-size: 30px;
212+
font-weight: 300;
213+
text-align: center;
214+
color: #289df6;
215+
padding-top: 15px;
216+
display: block;
217+
}
218+
219+
h2 {
220+
font-size: 22px;
221+
font-weight: 300;
222+
text-align: center;
223+
}
224+
225+
h3 {
226+
font-size: 24px;
227+
font-weight: 300;
228+
text-align: center;
229+
padding: 15px;
230+
}
231+
232+
h3 b {
233+
font-size: 32px;
234+
font-weight: 300;
235+
color: #289df6;
236+
}
237+
238+
.checkmark:after {
239+
content: "";
240+
position: absolute;
241+
display: none;
242+
}
243+
244+
.container input:checked ~ .checkmark:after {
245+
display: block;
246+
}
247+
248+
.container .checkmark:after {
249+
left: 9px;
250+
top: 5px;
251+
width: 5px;
252+
height: 10px;
253+
border: solid white;
254+
border-width: 0 2px 2px 0;
255+
transform: rotate(45deg);
256+
}

0 commit comments

Comments
 (0)