Skip to content

Commit 5bfec46

Browse files
Jaideep25-techJaideep25-tech
authored
Merge pull request Dezenix#349 from Kumar-Ankit56/Kumar-Ankit56-patch-2
BMI Calculator
2 parents 58e4151 + 8039b4a commit 5bfec46

File tree

4 files changed

+322
-0
lines changed

4 files changed

+322
-0
lines changed

‎BMI Calculator/Readme.md

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
**Project title**
2+
BMI Calculator
3+
4+
**Project Description**
5+
### The idea behind this project
6+
This is just a number entering play game in which you just need to enter the random number and Calculate its BMI value.
7+
8+
### How does it work
9+
We have a container with two sliders with respect to the weight and height with a calculate button just you need to set and tap the calculate button you will get the value of your respective field.
10+
11+
**Stack**:
12+
And in order to tick the check box just put x inside them for example - [x] like this. Please delete options that are not relevant.
13+
14+
- [x] Html
15+
- [x] CSS
16+
- [x] JavaScript
17+
18+
for more details please refer to the attached images.
19+
20+
21+
22+
23+
![Screenshot (221)](https://user-images.githubusercontent.com/73521123/170837664-638ee530-9d21-49e0-a64f-6f81acbf984c.png)
24+
25+
26+
27+
28+
https://user-images.githubusercontent.com/73521123/170862455-f2dcf76b-a66c-420e-b11f-8cd49c2431d0.mp4
29+
30+
31+

‎BMI Calculator/index.html

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>BMI Calculator</title>
6+
<link rel="stylesheet" href="./style.css">
7+
</head>
8+
9+
<body>
10+
<div class="container">
11+
<div class="setting-div">
12+
13+
<span class="title">BMI CALCULATOR</span>
14+
<div class="height-container">
15+
<span class="height-title">HEIGHT</span>
16+
<span class="height-value">175<span class="cm"> cm</span></span>
17+
<input type="range" class="height-range" min="100" max="250" oninput="calculate()">
18+
</div>
19+
20+
<div class="weight-container">
21+
<span class="weight-title">WEIGHT</span>
22+
<span class="weight-value">65<span class="kg"> kg</span></span>
23+
<input type="range" class="weight-range" min="20" max="200" value="65" oninput="calculate()">
24+
</div>
25+
<button class="calculate-button" onclick="result()">CALCULATE YOUR BMI</button>
26+
</div>
27+
<div class="result-div">
28+
<h4 class="your-result-title">Your Result</h4>
29+
<span class="health_status">Normal Weight</span>
30+
<span class="bmi_value">21.2</span>
31+
<span class="normal_bmirange">Normal BMI range</span>
32+
<span class="normalbmi_value">18.5 - 25 kg/m2</span>
33+
<h4 class="status-text">You are in the Normal Weight range.</h4>
34+
<button class="go-back-btn" onclick="goback()">GO BACK</button>
35+
</div>
36+
</div>
37+
<script src="./script.js"></script>
38+
</body>
39+
40+
</html>

‎BMI Calculator/script.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
var health_status = document.querySelector('.health_status');
2+
var status_text = document.querySelector('.status-text');
3+
function calculate() {
4+
var heightvalue = parseInt(document.querySelector('.height-range').value);
5+
var weightvalue = parseInt(document.querySelector('.weight-range').value);
6+
7+
document.querySelector('.height-value').innerHTML = heightvalue + `<span class="cm"> cm</span>`;
8+
document.querySelector('.weight-value').innerHTML = weightvalue + `<span class="kg"> kg</span>`;
9+
10+
let bmi = (weightvalue / Math.pow((heightvalue / 100), 2)).toFixed(1);
11+
12+
document.querySelector('.bmi_value').innerHTML = bmi;
13+
14+
if (bmi < 18.5) {
15+
health_status.innerHTML = 'Underweight';
16+
health_status.style.color = '#ffc44d';
17+
status_text.innerHTML = 'You are in the Underweight range.';
18+
}
19+
20+
else if (bmi >= 18.5 && bmi <= 24.9) {
21+
health_status.innerHTML = 'Normal Weight';
22+
health_status.style.color = '#4AC38D';
23+
status_text.innerHTML = 'You are in the Normal Weight range.';
24+
}
25+
26+
else if (bmi >= 25 && bmi <= 29.9) {
27+
health_status.innerHTML = 'Over Weight';
28+
health_status.style.color = '#ff884d';
29+
status_text.innerHTML = 'You are in the Over Weight range.';
30+
}
31+
32+
else {
33+
health_status.innerHTML = 'Obesity';
34+
health_status.style.color = '#ff5e57';
35+
status_text.innerHTML = 'You are in the Obese range.You have to work hard';
36+
}
37+
}
38+
39+
function result() {
40+
document.querySelector('.setting-div').style.display = 'none';
41+
document.querySelector('.result-div').style.display = 'block';
42+
}
43+
44+
function goback() {
45+
document.querySelector('.setting-div').style.display = 'block';
46+
document.querySelector('.result-div').style.display = 'none';
47+
}

‎BMI Calculator/style.css

Lines changed: 204 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,204 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Cookie&family=Poppins&family=Roboto:wght@300&display=swap');
2+
*{
3+
margin:0;
4+
padding:0;
5+
box-sizing:border-box;
6+
}
7+
8+
body{
9+
display:flex;
10+
justify-content:center;
11+
align-items:center;
12+
height:100vh;
13+
overflow:hidden;
14+
font-family: 'poppins', sans-serif;
15+
background:#090221;
16+
}
17+
18+
.title{
19+
color:white;
20+
position:absolute;
21+
left:50%;
22+
transform:translate(-50%,-50%);
23+
margin-top:23px;
24+
font-size:15px;
25+
}
26+
27+
.container{
28+
height:430px;
29+
width:330px;
30+
background:#0C1033;
31+
border-radius:5px;
32+
}
33+
34+
.height-container,.weight-container{
35+
height:150px;
36+
width:300px;
37+
background:#14183B;
38+
position:relative;
39+
top:120px;
40+
left:50%;
41+
transform:translate(-50%,-50%);
42+
}
43+
44+
.weight-container{
45+
top:135px;
46+
}
47+
48+
.calculate-button{
49+
all:unset;
50+
width:280px;
51+
padding:10px;
52+
color:white;
53+
border-radius:5px;
54+
background:#F90064;
55+
position:relative;
56+
top:95px;
57+
left:50%;
58+
transform:translate(-50%,-50%);
59+
text-align:center;
60+
cursor:pointer;
61+
font-size:14px;;
62+
}
63+
64+
.height-title,.height-value,.weight-title,.weight-value{
65+
color:#9CA1B5;
66+
position:absolute;
67+
top:17%;
68+
left:50%;
69+
transform:translate(-50%,-50%);
70+
font-size:16px;
71+
}
72+
73+
.height-value,.weight-value{
74+
top:51%;
75+
font-size:40px;
76+
color:white;
77+
}
78+
79+
.cm,.kg{
80+
font-size:18px;
81+
color:#9CA1B5;
82+
}
83+
84+
.height-range,.weight-range{
85+
-webkit-appearance:none;
86+
height:2px;
87+
width:270px;
88+
background:#9CA1B5;
89+
position:absolute;
90+
top:83%;
91+
left:50%;
92+
transform:translate(-50%,-50%);
93+
}
94+
95+
.height-range::-webkit-slider-thumb,.weight-range::-webkit-slider-thumb{
96+
-webkit-appearance:none;
97+
height:15px;
98+
width:15px;
99+
border-radius:50%;
100+
background:#F90064;
101+
transition:all .3s;
102+
}
103+
104+
.height-range::-webkit-slider-thumb:hover,.weight-range::-webkit-slider-thumb:hover{
105+
box-shadow:0 0 0 10px rgba(249,0,100,.1);
106+
}
107+
108+
.result-div{
109+
height:350px;
110+
width:250px;
111+
background:#1D2033;
112+
border-radius:5px;
113+
position:absolute;
114+
top:51%;
115+
left:50%;
116+
transform:translate(-50%,-50%);
117+
display:none;
118+
transition:all 1s;
119+
}
120+
121+
.result-div > span{
122+
position:absolute;
123+
left:50%;
124+
transform:translate(-50%, -50%);
125+
font-family: 'poppins', sans-serif;
126+
}
127+
128+
.health_status{
129+
color:#4AC38D;
130+
top:10%;
131+
white-space:nowrap;
132+
}
133+
134+
.bmi_value{
135+
color:white;
136+
top:27%;
137+
font-size:60px;
138+
}
139+
140+
.normal_bmirange{
141+
top:47%;
142+
color:#9CA1B5;
143+
white-space:nowrap;
144+
}
145+
146+
.normalbmi_value{
147+
top:55%;
148+
color:white;
149+
white-space:nowrap;
150+
}
151+
152+
.status-text{
153+
color:white;
154+
position:absolute;
155+
top:66%;
156+
text-align:center;
157+
font-weight:300;
158+
font-size:15px;
159+
}
160+
161+
.your-result-title{
162+
color:white;
163+
font-size:20px;
164+
position:relative;
165+
top:-40px;
166+
left:-20px;
167+
}
168+
169+
.go-back-btn{
170+
all:unset;
171+
color:white;
172+
background:#191A2E;
173+
padding:5px;
174+
text-align:center;
175+
width:150px;
176+
position:relative;
177+
top:280px;
178+
left:50%;
179+
transform:translate(-50%,-50%);
180+
}
181+
182+
.setting-div{
183+
transition:all 1s;
184+
}
185+
186+
a{
187+
position:absolute;
188+
left:50%;
189+
bottom:10px;
190+
transform:translate(-50%,-50%);
191+
white-space:nowrap;
192+
font-family:montserrat;
193+
font-size:10px;
194+
color:black;
195+
font-family: 'Poppins', sans-serif;
196+
padding:10px;
197+
background:white;
198+
border-radius:5px;
199+
width:330px;
200+
text-decoration:none;
201+
text-align:center;
202+
font-size:18px;
203+
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
204+
}

0 commit comments

Comments
 (0)