Skip to content

Commit e5d5ae4

Browse files
Lokeshsuwalka05Lokeshsuwalka05
committed
update index.html and script.js
1 parent e538e6f commit e5d5ae4

2 files changed

Lines changed: 71 additions & 32 deletions

File tree

‎87 - Body Mass Index Calculator/index.html‎

Lines changed: 49 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,58 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link
8+
href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
9+
rel="stylesheet"
10+
/>
811
<title>BMI</title>
912
<style>
10-
*{
11-
padding: 10px;
12-
margin: 10px;
13-
}
14-
p{
15-
font-weight: bold;
16-
}
13+
* {
14+
padding: 10px;
15+
margin: 10px;
16+
}
17+
p {
18+
font-weight: bold;
19+
}
1720
</style>
18-
</head>
19-
<body>
21+
</head>
22+
<body>
2023
<div class="container d-block text-center">
21-
<h2 class="p-2">Body Mass Index Calculator using Metric Units</h2>
22-
Your Height: <input class="p-2 m-2" type="number" name="cm" id="cm" placeholder="centimeters">
23-
<br/>
24-
Your Weight: <input class="p-2 m-2" type="number" name="weight" id="weight" placeholder="kilograms">
25-
<br/>
26-
<button class="btn btn-primary p-2 m-2" onclick="fun()">Compute BMI</button><br/>
27-
Your BMI: <input class="p-2 m-2" type="text" name="bmi" id="bmi" disabled>
28-
<h4 class="p-2 m-2"></h4>
24+
<h2 class="p-2">Body Mass Index Calculator using Metric Units</h2>
25+
Your Height:
26+
<input
27+
class="p-2 m-2"
28+
type="number"
29+
name="cm"
30+
id="cm"
31+
min="0"
32+
required
33+
34+
placeholder="centimeters"
35+
/>
36+
<br />
37+
Your Weight:
38+
<input
39+
class="p-2 m-2"
40+
type="number"
41+
name="weight"
42+
id="weight"
43+
placeholder="kilograms"
44+
min="0"
45+
required
46+
/>
47+
<br />
48+
<button class="btn btn-primary p-2 m-2" onclick="fun()">
49+
Compute BMI</button
50+
><br />
51+
Your BMI:
52+
<input class="p-2 m-2" type="text" name="bmi" id="bmi" />
53+
<h4 class="p-2 m-2"></h4>
2954
</div>
30-
31-
</body>
55+
</body>
3256
</html>
33-
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" ></script>
57+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
3458
<script src="./script.js"></script>

‎87 - Body Mass Index Calculator/script.js‎

Lines changed: 22 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,28 @@
1+
const inputs = document.querySelectorAll('#cm, #weight');
2+
3+
inputs.forEach(input => {
4+
input.addEventListener('input', event => {
5+
const value = event.target.value;
6+
if (!/^\d*\.?\d*$/.test(value) && value !== '') {
7+
event.target.value = event.target.getAttribute('data-value') || '';
8+
} else {
9+
event.target.setAttribute('data-value', value);
10+
}
11+
});
12+
});
13+
114
function fun()
215
{
3-
var cm = document.getElementById("cm").value ;
16+
var cm = document.getElementById("cm").value ;
417
cm = cm/100;
518
var w = document.getElementById("weight").value;
6-
if (isNaN(cm) || cm <= 0 || isNaN(w) || w <= 0) {
7-
alert("Please enter valid positive values for height (cm) and weight (kg).");
8-
return;
9-
}
1019
var bmi = w/(cm*cm);
1120
document.getElementById("bmi").value = bmi;
12-
if(bmi<18.5)
21+
if(isNaN(bmi)){
22+
document.querySelector("h4").innerHTML='Please input valid height and weight';
23+
}
24+
25+
else if(bmi<18.5)
1326
{
1427
document.querySelector("h4").innerHTML = 'Under weight';
1528
}
@@ -25,4 +38,6 @@ function fun()
2538
{
2639
document.querySelector("h4").innerHTML = 'Obesity';
2740
}
28-
}
41+
}
42+
43+

0 commit comments

Comments
 (0)