In: Computer Science
Write a JavaScript that calculates ideal weight for a person. A user inputs fullname, member ID, gender, height and weight. Once a user press a button, it calculates ideal weight and displays it with other information. You must implement a function that displays and calculates ideal weight. You use following formula to calculate ideal weight:
Man: Ideal Body Weight (kilograms) = [Height (cm) - 100] -
([Height (cm) - 100] x 10%)
Woman: Ideal Body Weight (kilograms) = [Height (cm) - 100] -
([Height (cm) - 100] x 15%)
Apply css style in table elements (table, tr, td) as follows:
background color - #ddeeff
border - 1 px, black color solid line
padding - 3 px
Html code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="./bootstrap.css"/>
</head>
<body>
<div class="container">
<div class="row">
<form class="offset-md-4 col-md-5">
<div class="form-group">
<label>Full Name</label>
<input type="text" class="form-control"/>
</div>
<div class="form-group">
<label>MemberID</label>
<input type="number" class="form-control"/>
</div>
<div class="form-group">
<label>Gender</label>
<br>
<input type="radio" value="Male" name="radio"/>
<label>Male</label>
<input type="radio" value="Female" name="radio"/>
<label>Female</label>
</div>
<div class="form-group">
<label>Weight in Kgs</label>
<input type="number" class="form-control"/>
</div>
<div class="form-group">
<label>Height in Centimeters</label>
<input type="number" id="height" class="form-control"/>
</div>
<button class="btn btn-primary" onclick=calculate()>Calculate Ideal Weight</button>
<div >
<h3 style="color:blue" id="ideal">
</h3>
</div>
</form>
<script>
function calculate(){
event.preventDefault();
var gen = document.getElementsByName("radio");
var idealweight;
var Height=document.getElementById('height').value;
console.log(Height)
console.log(gen);
if(gen[0].checked==true)
{
idealweight= (Height-100) - ((Height-100)*0.1)
}
else if(gen[1]==true)
{
idealweight= (Height-100) - ((Height-100)*0.15)
}
document.getElementById("ideal").innerHTML="The Ideal weight of person is "+idealweight +"Kilograms";
}
</script>
</div>
</div>
</body>
</html>
Execution screenshot: