BMI calculator with source code

ADS

  
  
<!DOCTYPE html>
<html>
<head>
  <!-- Ezoic Code -->
<script src="//www.ezojs.com/basicads.js?d=ranasinghetechbro.blogspot.com" type="text/javascript"></script>
<!-- Ezoic Code -->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>----BMI calculator----</title>
	<style>

		.MYbox{
			width: 400px;
			height: 600px;
			border: 1px solid black;
			margin-top: 50px;
			border-radius: 5px;
			background-color: rgba(255, 255, 255, .7);
			border: 2px solid #ffff;
			

		}
		#topic{
			font-family:sans-serif;
			font-weight: 100;


		}
		.inputTle{
			font-style: italic;
			font-family: sans-serif;
			font-size: 15px;
		}
		body{
			background-image: url("back2.jpg");
			background-repeat: no-repeat;
			background-position: center;
			background-size: cover;
			background-attachment: fixed;
		}
		.box{
			padding: 10px 20px 10px 20px;
			border-radius: 5px;
			outline: none;

			
		}
		.Btn{
			padding: 10px 10px 10px 10px;
			font-family: monospace;
			margin-top: 20px;
		}
		.outputBox{
			width: 250px;
			height: 50px;
			border: 1px solid black;
			margin-top: 7px;
			border-radius: 5px;
		}


	</style>
</head>
<body>
<center><div class="MYbox">
	<br>
	<br>
	<h1 id="topic">My BMI calculator</h1>
	<br>
	<form action="POST">
		<label for="weight" class="inputTle">weight :</label>
		<input type="number" id="weight" class="box">
		<br>
		<br>
		<label for="height" class="inputTle">height :</label>
		<input type="number" id="height" class="box">
		<br>
		<br>
		<input type="button" value="Calculate BMI" class="Btn" onclick="myFunction()">
		<br>
		<br>
		<label for="output" class="inputTle">BMI value</label>
		<div class="outputBox" id="answer"></div>
		<br>
		<br>
		<label for="output" class="inputTle">Your category</label>
		<div class="outputBox" id="answer2"></div>
	</form>
</div>
</center>
	<script>
		function myFunction(){

			var a=document.getElementById("weight").value;
			var b=document.getElementById("height").value;

			var height=parseFloat(a);
			var weight=parseFloat(b);

			var result=(weight/(height**2));

			if(!isNaN(result)){

				document.getElementById("answer").innerHTML=result	
				
				if(result<15){
					
					document.getElementById("answer2").innerHTML="very severely underWeight"

				}
			
		    }




			
		}
	</script>
	
</body>
</html>

live preview click here

BMI calculator with source code

Posted by Chathuranga Ranasinghe

Post a Comment

0 Comments

Our E-books

C programming for beginner

Contact Us

Most Popular

3D_bookCover HTML | CSS with source code

What is Quantum computing?

Bus Reservation System Pure PHP,HTML,CSS,XAMP,MYSQl with source code

Subscribe Us

Facebook

Tags

Categories

Search This Blog

Report Abuse

Followers

Labels

Popular Posts

3D_bookCover HTML | CSS with source code

What is Quantum computing?

Bus Reservation System Pure PHP,HTML,CSS,XAMP,MYSQl with source code

Footer Menu Widget

Contact form

BMI calculator with source code

Posted by Chathuranga Ranasinghe

You may like these posts

Post a Comment

0 Comments

Our E-books

Contact Us

Most Popular

Subscribe Us

Facebook

Tags

Categories

Search This Blog

Followers

Labels

Popular Posts

Footer Menu Widget

Contact form