Home work



// the hhtml
<html>
<head>
<script src="js/script.js" type="text/javascript"> </script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<form name="bmiForm">
Your Weight(kg): <input type="text" name="weight" id="weight" size="10"><br />
Your Height(cm): <input type="text" name="height" id="height" size="10"><br />
<input type="button" value="Calculate BMI" onClick="calculateBmi()"><br />
Your BMI: <input type="text" id="bmi" size="10"><br />
This Means: <input type="text" id="meaning" size="25"><br />
<input type="reset" value="Reset" />
</form>


</body>
</html>


/the java script change file follder to js

//requires height and weight to be passed
function calculateBmi() {

	//let weight = document.getElementById("weight").value;
	let weight = $("#weight").val();
    let height = $("#height").val();

	//let height = document.getElementById("height").value;

	console.log("weight"+weight+" height"+height);

	if(weight > 0 && height > 0){
		var finalBmi = weight/(height/100*height/100)
		document.bmiForm.bmi.value = finalBmi
		if(finalBmi < 18.5){
			document.bmiForm.meaning.value = "That you are too thin."
		}
		if(finalBmi > 18.5 && finalBmi < 25){
			document.bmiForm.meaning.value = "That you are healthy."
		}
		if(finalBmi > 25){
			document.bmiForm.meaning.value = "That you are overweight."
		}
	}
	else{
		alert("Please Fill in everything correctly")
	}
}