BMI Calculator

Share

You can create a BMI calculator using JavaScript. The formula for BMI(Body Mass Index) is as follows:

BMI=weight/(height)^2

where weight is in kg and height in cm.

In the html page, you can create three text box using the <input> tag to accept the user inputs for name, height and weight.

In the JavaScript, you can create a function to calculate the bmi, as follows:

function bmi(){

var sheight=parseFloat(document.getElementById(‘hgt’).value);
var sweight=parseFloat(document.getElementById(‘wgt’).value);
var bmi=sweight/Math.pow(sheight,2);
var student_bmi=document.getElementById(‘bmi_index’);
student_bmi.textContent=bmi.toFixed(2);
}

  • toFixed method is to round the output to 2 decimal ppalces

The html document is

<!DOCTYPE html>
<html>
<body>

<h1>Student Name=<input type=”text” style=”font-size:25px; font-weight: bold;” id=”studentname”></h1>
<h2>Height=<input type=”text” style=”font-size:20px; font-weight: bold;” id=”hgt”></h2>
<h2>Weight=<input type=”text” style=”font-size:20px; font-weight: bold;” id=”wgt”></h2>
<h2>BMI=<b id=”bmi_index”></b></h2>

<input type=”button” value=”Calculate” onclick=”bmi()”>
<script type=”text/javascript” src=”bmi2.js”></script>
</body>
</html>

Click here to launch the BMI calculator

 

 

Share

Creating a math drill for calculating volume of a cuboid

Share

We have learned how to create a calculator that calculates the volume of a cuboid. Using the similar script, we can write a JavaScript that allows the user to input the dimensions as well as  enter the answer. If the answer is wrong, it will displays the “Incorrect” message, otherwise it will show the “Correct” message.

The JavaScript is as follows:’

function Calvol(width, length, height){
var vol=width*length*height;
return vol;
}
function CalSize(){
var x=parseInt(document.getElementById(“wdt”).value);
var y=parseInt(document.getElementById(“lgt”).value);
var z=parseInt(document.getElementById(“hgt”).value);
var Size=Calvol(x,y,z);
var answer=document.getElementById(‘ans1’).value;
if (answer==Size)
{message=”Correct”;}

else
{message=”Incorrect, try again”;}

document.getElementById(‘ans’).textContent=message;

}

And the html is as follows:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>
<title>Volume Calculation</title>
</head>
<body onload=”RandomFn()”>
<h1>Volume of a Cuboid</h1>
<p>Width&nbsp;=&nbsp;&nbsp;<input type=”text” size=”5″ id=”wdt”></p>
<p>Length=&nbsp;<input type=”text” size=”5″ id=”lgt”></p>
<p>Height=&nbsp;<input type=”text” size=”5″ id=”hgt”></p>

<h3>The Volume is</h3>

<input type=”text” size=”5″ id=”ans1″><br><br>
<h3 id=”ans”><h3>
<script>
function Nextq() {
location.reload();
}
</script>
<input type=”button” value=”Check Answer” onclick=”CalSize()”><br><br>
<input type=”button” value=”Next Question” onclick=” location.reload();”>
<script>
function RandomFn() {
document.getElementById(“wdt”).innerHTML = parseInt(Math.random()*9+1);
document.getElementById(“lgt”).innerHTML = parseInt(Math.random()*9+1);
document.getElementById(“hgt”).innerHTML = parseInt(Math.random()*9+1);
}
</script>
<script type=”text/javascript” src=”volume2.js”></script>

</body>
</html>

Click Here to run the script.

Share

Creating a function that calculates the volume of a cuboid

Share

We have learned how to create a function that have arguments. In this example, we shall show you how to create a function that calculated the volume of cuboid give the width, length and height of the cuboid.

The JavaScript function to calculate the volume is

function Calvol(width, length, height){
var vol=width*length*height;
return vol;
}

The JavaScript function to call the Calvol() function by replacing the parameters with the arguments generate by the HTML document is

function CalSize(){
var x=parseInt(document.getElementById(“wdt”).innerHTML);
var y=parseInt(document.getElementById(“lgt”).innerHTML);
var z=parseInt(document.getElementById(“hgt”).innerHTML);
var Size=Calvol(x,y,z);
document.getElementById(‘ans’).textContent=”The Volume is= “+Size;
}

The HTML document is

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=windows-1252″>
<title>Volume Calculation</title>
</head>
<body onload=”RandomFn()”>
<h1>Volume Calculation</h1>
<p>Width=<b id=”wdt”></b></p>
<p>Length=<b id=”lgt”></b></p>
<p>Height=<b id=”hgt”></b></p>
<P id=”ans”>What is the Volume?</p>
<input type=”button” value=”Calculate Volume” onclick=”CalSize()”><br><br>
<input type=”button” value=”Next Question” onclick=” location.reload();”>
<script>
function RandomFn() {
document.getElementById(“wdt”).innerHTML = parseInt(Math.random()*9+1);
document.getElementById(“lgt”).innerHTML = parseInt(Math.random()*9+1);
document.getElementById(“hgt”).innerHTML = parseInt(Math.random()*9+1);
}
</script>
<script type=”text/javascript” src=”volume.js”></script>

</body>
</html>

Click Here to check it out

Share

Adding arguments to a JavaScript function

Share

You can create a function in JavaScript and add arguments to it. An argument is one or more variables that are declared within the parenthesis of a function definition. The syntax is

function  MyFunction(x,y,z)

{  statements;}

You can also use the return keyword to return a value to the statement.

function  MyFunction(x,y,z)

{  return value; }

Example:

function Area_Rect(width,length)

{ area=width*length;

return area;}

You can call the function by assigning values to the arguments, such as

document.write(Area_Rect(4,6));

0r alert (“The area of a rectangle is”+Area_Rect(4,6)

The area of the rectangle if width=4 and length=6 is:

Please follow Lesson 13 and Lesson 14 to learn more about function.

Share

Creating a math drill application for kids

Share

We can create a math drill function for kids using JavaScript.

In this example, the function  generates two integers and add them together. After that, it comparesits result to the answer entered by the user. If the answer is correct, it will show the message ‘Correct’. On the other hand, if the answer is wrong, it will show the message ‘ Incorrect’.

In order to generate a random number, we use the built-in function, as follows:

Math.random()

In order to statement generates an integer that is less than or equal to 100, we use the parseInt function.

parseInt(Math.random()*100);

The following is the JavaScript code created by us:

function myFunction() {
var number1;
var number2;
var answer;
var message

number1=document.getElementById(‘num1’).innerHTML ;
number2=document.getElementById(‘num2’).innerHTML;
answer=document.getElementById(‘ans1’).value;
var sum=parseInt(number1)+parseInt(number2);

if (answer==sum)
{message=”Correct”;}

else
{message=”Incorrect”;}

document.getElementById(‘ans’).textContent=message;

}

Check it out here,

 

Share