CodeForest



Unsplashed background img 1
CodeForest - jQuery BMI Calculator

jQuery - Clock

Main Objective

The objective will be to demonstrate basic knowledge of HTML, CSS, and jQuery to create your own MadLib game!.

Prerequisites

You will need to know some basic HTML, CSS, and jQuery methods for this course.

Sub Objective

We will be going over the following tags in this tutorial:
  • HTML source code for the calculator
  • CSS source code for the calculator
  • jQuery source code for the calculator
  • Adding your own styles!

Part 1 - HTML

Here we need to place the HTML code to tell it where to generate the story and what elements to use to do so.

Example:

<form id="form" name="bmiCalc">
<div class="header">BMI Calculator</div>
<div class="sub">Body Mass Indicator for Adults</div>
<!--Input for body weight-->
	<div class="input">
    	<input for="weight" class="text" placeholder="Your Weight (lbs)*" type="text" name="weight">
    </div>
<!--Input for height-->
	<div class="input">
    	<input for="height" class="text" placeholder="Your Height (Inches)*" type="text" name="height">
    </div>
<!--BMI Submit Button-->
	<div>
    	<input class="button" type="button" value="Calculate BMI" onClick="calculateBMI()">
    </div>
<!--BMI Results-->
	<div class="input">
    	<input for="bmi_result" class="text" placeholder="Your BMI" type="text" name="bmi">
    </div>
<!--BMI Message Results-->
	<div class="input">
    	<input for="bmi_message" placeholder="This Means" class="text" type="text" name="meaning">
    </div>
<!--BMI Reset-->
	<div>
    	<input class="button" type="reset" value="Reset">
    </div>
</form>

Part 2 - CSS

The CSS section is fairly simple to manipulate to your liking.

Example:

.header{ width: 220px;
		 background-color: rgba(251,121,27,1.00);
		 font-size: 25px;
		 color: white;
		 padding: 10px 10px 0px 10px;  }

.sub{  width: 220px;
		 background-color: rgba(251,121,27,1.00);
		 font-size: 16px;
		 color: #045453;
		 padding: 5px 10px 10px 10px;  }

#form{ width: 240px;
	   border-radius: 3px;
	   height: 355px;
	   margin: 0 auto;
	   border: 3px solid #333333; }

.input{ width: 100px;
		margin: 20px; }

.button{ width: 195px;
		 border: 2px solid #00BDFF;
		 margin-left: 20px;
		 background-color: transparent;
		 transition: border .5s, background-color .5s, color .5s; }
.button:hover{ border: 2px inset rgba(251,121,27,1.00);
			   color: white;
			   background-color: rgba(251,121,27,1.00); }

.text{ font-size: 17px;
	   transition: border 1s, background-color 1s, color .5s; }
.text:hover{ background-color: #86F0FF; }

Part 3 - jQuery

For the jQuery part we'll need access to the newest jQuery library. Luckily all you have to do is take this tag from right below 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
and throw it into your header or footer!

Example:

function calculateBMI(){
	var weight = document.bmiCalc.weight.value
	var height = document.bmiCalc.height.value

	if(weight > 0 && height > 0){
		var finalBmi = (weight/(height*height))*703;
		document.bmiCalc.bmi.value = new Number(finalBmi).toFixed(2)

		if(finalBmi < 18.5){
			document.bmiCalc.meaning.value = "Underweight BMI"
		}

		if(finalBmi > 18.5 && finalBmi < 25){
			document.bmiCalc.meaning.value = "Normal BMI"
		}

		if(finalBmi > 25 && finalBmi < 30){
			document.bmiCalc.meaning.value = "Overweight BMI"
		}

		if(finalBmi > 30 && finalBmi < 35){
			document.bmiCalc.meaning.value = "Obese BMI"
		}

		if(finalBmi > 35){
			document.bmiCalc.meaning.value = "Extremely Obese BMI"
		}

	}else{
		alert ("Please fill in all fields.")
	}
}

Now test your new undertanding here with the codepen!

Here you can try plugging in your own styles to practice before you place it into your own site
You can click back and forth between the HTML, CSS, and jQuery tabs to see all the working components or click in the top right corner to enlarge the pen for a better look.

See the Pen BMI Calculator by Alex Coy (@CoyFish) on CodePen.