BMI CALCULATOR SOURCE CODE IN HTML, CSS & JAVASCRIPT

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.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s