THIS IS my first javascript project, and its source code. the .js file is inline and the stylesheet also. if you have any recommendations for modifications in the source code, or any contributions to make, feel free to hit the comment box, and say what’s on your mind. Here’s the source code:
<!DOCTYPE html>
<html style="background-color:#000000; color:rgb(100,33,50); font-family:corbel;">
<head>
<title>BMIapp</title>
<link href="bmistyles.css" rel="stylesheet">
<meta name="author" content="charles chinedu @ newgenerationigboboy.com">
<meta name="viewport" content="width:device-width; initial-scale:1;">
</head>
<body>
<header>
<img src="C:\Users\HP\Pictures\NGIBlogo2.png" alt="logo" style="width:70px; height:70px; margin:auto";/>
<h1 style="color:#114259;">newgenerationigboBOY</h1>
</header>
<main>
<p style="font-size:25px; text-align:center; color:white;"><strong>fill in the form below to know your BMI:</strong></p>
<form id="bmiform">
<fieldset style="max-width:100%; border:40px solid black; margin:auto; background-color:#f9a8d7; padding:10px;">
<div id="formdiv" style="column-count:2; column-fill:balance; max-width:100%;">
<legend><strong>know your BMI</strong></legend>
<p id="wgtp"><strong>Weight:</strong><input type="text" id="wgt" value="" name=
"weighpt" placeholder="weight in kg"></p><br/>
<p><strong>Height:</strong><input type="text" id="hgt" value="" name="heighpt" placeholder=
"height in meters"></p><br/><br/>
<button type="button" name="clicktoSEEyourBMI" value="calculatebmi" id="bmiclick" onclick=
"document.getElementById('bmi').value=calBMI(); document.getElementById('wordofbmi').value=
interpretBMI();" style="margin-left:70px;">CLICKTOSEEYOURBMI</button><br/><br/>
<p id="forvalidation" style="background-color:#fff; font-size:30px;"><strong>validating...</strong></p>
<script>
//function to calculate the bmi
function calBMI() {
var weight=Number(document.getElementById('wgt').value);
var height=Number(document.getElementById('hgt').value);
var BMI=weight/Math.pow(height,2);
if (weight<20 || height>6) {
alert("you're welcome");
} else {
return BMI;
}
}
calBMI();
</script>
<div id="bmivalues" style="width:400px; background-color:#22dfe7;">
<p id="yourbmi"><strong>yourbmivalue:</strong><input id="bmi" type=
"text" name="cbmi" value="" placeholder="readonly" readonly></p><br/<br/>
<p><strong>BMIinterpretation:</strong><input type="text" value="" id=
"wordofbmi" name="bmiIntepreter" value="" size=44 readonly placeholder=
"readonly"></p><br/><br/>
<script>
//function to interpret the bmi score
function interpretBMI() {
let m=calBMI();
if (m<=18.5) {
wordofbmi.value="u have no weight. Under weight";
forvalidation.innerHTML="Breeze go carry you o!";
} else if (m>18.5 && m<=25) {
wordofbmi.value="ur normal weight";
forvalidation.innerHTML="U de game. maintain!";
} else if (m>25 && m<30) {
wordofbmi.value="ur weight is over";
forvalidation.innerHTML="redlight! redlight! see you see obesity!";
} else if (m>30) {
wordofbmi.value="OBESITY! OBESITY! OBESITY!";
forvalidation.innerHTML="do u want to die like BIGPUN?";
} else {
forvalidation.innerHTML="Bia, fill in your details!";
}
return wordofbmi.value;
}
interpretBMI();
</script>
</div><!--end div of bmivalues-->
</div><!--end formdiv --><br/><hr><br/>
<div id="bminote">
<p class="pclass1">BMI is an acronym for body mass index. It is a value derived from the mass(weight) & height of a
person. BMI is defined as the body mass divided by the square of the body height, and is universally expressed
in units of kg/m^2; resulting from mass in kilograms and height in meters.(Wikipedia).</p>
<p class="pclass1">BMI, based on tissue mass(muscle, fat, and bone) and height, is a convenient rule of thumb used
to broadly categorize a person as:<strong>UnderWeight, NormalWeight, OverWeight, or Obese.</strong></p>
<p class="pclass">Commonly accepted BMI ranges are
:<strong>UnderWeight(<18.5), NormalWeight(18.5 t0 25), OverWeight(25 to 30), Obese(30+)</strong></p>
<p class="pclass">BMIs under 20 and 25+ have been associated with higher all-causes mortality with the risk
increasing with distance from the 20-25 range.</p><hr>
<p class="pclass"><strong><i>Adolphe Quetelet, a Belgian astronomer, mathematician, statistician, and sociologist
between 1830 and 1850, derived the basis for the BMI, as he developed what he called, 'social physics'...(Wikipedia)
</i></strong></p>
<script>
bminote.style.columnFill="balance";
bminote.style.columnCount=3;
</script>
</div><!--end div bminotes-->
<footer style="width:max-width; margin-top:40px;"><img src="C:\Users\HP\Pictures\NGIBlogo2.png" alt="logo" style=
"width:50px; height:50px;"/>created by newgenerationigboboy.com
</footer>
</fieldset>
</form>
</main>
</body>
</html>
created by newgenerationigboboy.com<br/></footer>
</fieldset>
</form>
</div><!--end div bmifm-->
</div><!--end div bmical-->
</body>
</html>run the source code on your own and see for yourself. see you.
