this is an edited copy of the source code of a body mass index calculator using html, css, and javascript, that I posted before. still on the matter, if you have any recommendations, modifications, confusion on this calculator, express your feelings using the comment box. thank you. this is 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="formdiiv" style="column-count:2; column-fill:ballance; 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>this is how it would look like in your browser:
when you open it in your browser, try to put in some values to catch the thrills of the design. i hope you like it.
