Skip to content

Commit bad3d19

Browse files
TusharKesarwaniTusharKesarwani
authored
Merge pull request #1008 from Divyanshu9822/#814_BMICalculator_Divyanshu9822
Fixed image not displaying issue in "BMI Calculator" project
2 parents 0a1f363 + 502f2ca commit bad3d19

2 files changed

Lines changed: 135 additions & 105 deletions

File tree

‎Projects/BMICalculator/scripts.js‎

Lines changed: 41 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,46 @@
1-
document.getElementById('sub').addEventListener('click',function(){
1+
// Attach an event listener to the 'sub' element when clicked
2+
document.getElementById('sub').addEventListener('click', function() {
3+
// Get the height and weight values from the input fields
24
let h = document.getElementById('height').value;
35
let w = document.getElementById('weight').value;
4-
h/=100.0;
5-
let bmi = w/(h*h);
6+
7+
// Convert height to meters
8+
h /= 100.0;
9+
10+
// Calculate BMI
11+
let bmi = w / (h * h);
12+
13+
// Round BMI to two decimal places
614
bmi = parseFloat(bmi).toFixed(2);
15+
716
let img;
8-
let data='';
9-
if(bmi<19){
10-
data='You Are Underweight';
11-
img=".assets/underweight.jpg";
17+
let data = '';
18+
19+
// Determine the BMI category and corresponding image
20+
if (bmi < 19) {
21+
data = 'You Are Underweight';
22+
img = "./assets/underweight.jpg";
23+
} else if (bmi >= 19 && bmi <= 25) {
24+
data = 'You Are Healthy';
25+
img = "./assets/healthy.jpg";
26+
} else if (bmi > 25 && bmi <= 30) {
27+
data = 'You Are Overweight';
28+
img = "./assets/overweight.jpg";
29+
} else if (bmi > 30) {
30+
data = 'You Are Obese';
31+
img = "./assets/obese.jpg";
32+
} else {
33+
data = 'Please Enter a Valid Input';
1234
}
13-
else if(bmi>=19 && bmi<=25){
14-
data='You Are Healthy';
15-
img=".assets/healthy.jpg";
16-
}
17-
else if(bmi>25&&bmi<=30){
18-
data='You Are Overweight';
19-
img=".assets/overweight.jpg";
20-
}
21-
else if (bmi>30){
22-
data='You Are Obese';
23-
img=".assets/obese.jpg";
24-
}
25-
else{
26-
data='Please Enter a Valid Input'
27-
}
28-
document.getElementById('body').setAttribute("src",img);
29-
document.getElementById('res').innerHTML=` ${data}.`;
30-
document.getElementById('result').innerHTML=`Your BMI is <strong>${bmi}</strong>.`;
31-
document.getElementById('info').setAttribute("class","card show");
32-
});
35+
36+
// Set the source attribute of the 'body' element to display the appropriate image
37+
document.getElementById('body').setAttribute("src", img);
38+
39+
// Display the result and BMI information
40+
document.getElementById('res').innerHTML = ` ${data}.`;
41+
document.getElementById('result').innerHTML = `Your BMI is <strong>${bmi}</strong>.`;
42+
43+
// Show the 'info' card
44+
document.getElementById('info').setAttribute("class", "card show");
45+
});
46+

‎Projects/BMICalculator/style.css‎

Lines changed: 94 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,96 +1,112 @@
1+
/* Background styles */
12
body {
23
background:
3-
radial-gradient(circle farthest-side at 0% 50%,#fb1 23.5%,rgba(240,166,17,0) 0)21px 30px,
4-
radial-gradient(circle farthest-side at 0% 50%,#B71 24%,rgba(240,166,17,0) 0)19px 30px,
5-
linear-gradient(#fb1 14%,rgba(240,166,17,0) 0, rgba(240,166,17,0.6) 85%,#fb1 0)0 0,
6-
linear-gradient(150deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
7-
linear-gradient(30deg,#fb1 24%,#B71 0,#B71 26%,rgba(240,166,17,0) 0,rgba(240,166,17,0) 74%,#B71 0,#B71 76%,#fb1 0)0 0,
8-
linear-gradient(90deg,#B71 2%,#fb1 0,#fb1 98%,#B71 0%)0 0 #fb1;
9-
background-size: 40px 60px;
4+
radial-gradient(circle farthest-side at 0% 50%, #fb1 23.5%, rgba(240, 166, 17, 0) 0) 21px 30px,
5+
radial-gradient(circle farthest-side at 0% 50%, #B71 24%, rgba(240, 166, 17, 0) 0) 19px 30px,
6+
linear-gradient(#fb1 14%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0.6) 85%, #fb1 0) 0 0,
7+
linear-gradient(150deg, #fb1 24%, #B71 0, #B71 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, #B71 0, #B71 76%, #fb1 0) 0 0,
8+
linear-gradient(30deg, #fb1 24%, #B71 0, #B71 26%, rgba(240, 166, 17, 0) 0, rgba(240, 166, 17, 0) 74%, #B71 0, #B71 76%, #fb1 0) 0 0,
9+
linear-gradient(90deg, #B71 2%, #fb1 0, #fb1 98%, #B71 0%) 0 0 #fb1;
10+
background-size: 40px 60px;
1011
}
1112

12-
.center{
13-
width:50%;
14-
margin:0 auto;
15-
padding:1%;
16-
}
17-
.form{
18-
width:100%;
19-
margin-top:2%;
20-
21-
}
22-
.form-label{
23-
font-size: larger;
24-
}
25-
.form-control{
26-
padding:1% 2%;
27-
28-
}
29-
.contain{
30-
-webkit-box-shadow: 25px 28px 47px 2px rgba(0,0,0,0.48);
31-
-moz-box-shadow: 25px 28px 47px 2px rgba(0,0,0,0.48);
32-
box-shadow: 25px 28px 47px 2px rgba(7, 0, 0, 0.48);
33-
background-image: linear-gradient(to right, #03cf2f, #58da3a, #81e448, #a3ef57, #c1f967);
34-
35-
}
36-
37-
#result{
13+
14+
/* Center alignment styles */
15+
.center {
16+
width: 50%;
17+
margin: 0 auto;
18+
padding: 1%;
19+
}
20+
21+
/* Form styles */
22+
.form {
23+
width: 100%;
24+
margin-top: 2%;
25+
}
26+
27+
.form-label {
28+
font-size: larger;
29+
}
30+
31+
.form-control {
32+
padding: 1% 2%;
33+
}
34+
35+
/* Container styles */
36+
.contain {
37+
-webkit-box-shadow: 25px 28px 47px 2px rgba(0, 0, 0, 0.48);
38+
-moz-box-shadow: 25px 28px 47px 2px rgba(0, 0, 0, 0.48);
39+
box-shadow: 25px 28px 47px 2px rgba(7, 0, 0, 0.48);
40+
background-image: linear-gradient(to right, #03cf2f, #58da3a, #81e448, #a3ef57, #c1f967);
41+
}
42+
43+
/* Result styles */
44+
#result {
3845
margin-top: 4%;
3946
text-align: center;
40-
color:#02410b;
41-
}
42-
43-
.heading{
44-
width:50%;
45-
margin:0 auto;
46-
padding:2% 0;
47+
color: #02410b;
48+
}
49+
50+
/* Heading styles */
51+
.heading {
52+
width: 50%;
53+
margin: 0 auto;
54+
padding: 2% 0;
4755
text-align: center;
48-
margin-top:2%;
49-
color:rgb(250, 165, 54);
56+
margin-top: 2%;
57+
color: rgb(250, 165, 54);
5058
background:
51-
radial-gradient(black 15%, transparent 16%) 0 0,
52-
radial-gradient(black 15%, transparent 16%) 8px 8px,
53-
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 0 1px,
54-
radial-gradient(rgba(255,255,255,.1) 15%, transparent 20%) 8px 9px;
55-
background-color:#282828;
56-
background-size:16px 16px;
57-
}
58-
59-
.hide{
59+
radial-gradient(black 15%, transparent 16%) 0 0,
60+
radial-gradient(black 15%, transparent 16%) 8px 8px,
61+
radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 0 1px,
62+
radial-gradient(rgba(255, 255, 255, .1) 15%, transparent 20%) 8px 9px;
63+
background-color: #282828;
64+
background-size: 16px 16px;
65+
}
66+
67+
/* Hide and show styles */
68+
.hide {
6069
display: none;
61-
/* visibility: hidden; */
62-
}
63-
64-
.show{
65-
width:100%;
70+
}
71+
72+
.show {
73+
width: 100%;
6674
background: none;
67-
margin:0 auto;
75+
margin: 0 auto;
6876
margin-top: 2%;
69-
background:#81e448;
70-
}
71-
#body{
77+
background: #81e448;
78+
}
79+
80+
/* Body image styles */
81+
#body {
7282
max-height: 200px;
7383
text-align: center;
74-
}
75-
#res{
84+
}
85+
86+
/* Result text styles */
87+
#res {
7688
font-size: larger;
7789
text-align: center;
78-
}
79-
#body{
90+
}
91+
92+
/* Body image container styles */
93+
#body {
8094
object-fit: contain;
81-
}
82-
83-
@media screen and (max-width:820px) {
84-
.form{
85-
margin:0 auto;
86-
padding:1%;
87-
font-size: x-large;
88-
width:100%;
89-
height:100%;
90-
position: absolute;
95+
}
96+
97+
/* Responsive styles */
98+
@media screen and (max-width: 820px) {
99+
.form {
100+
margin: 0 auto;
101+
padding: 1%;
102+
font-size: x-large;
103+
width: 100%;
104+
height: 100%;
105+
position: absolute;
91106
}
92-
.center{
93-
width:100%;
107+
108+
.center {
109+
width: 100%;
94110
}
95-
96-
}
111+
}
112+

0 commit comments

Comments
 (0)