COMP1000 2017s1 - Lab 7 (Due in week 8) - Web Page Design & JavaScript

Question 1 - Javascript - 10 Marks

This lab will make modifications to the BMI calculator that you developed in the previous lab.

Instructions

(3 marks) In this lab, you will modify the JavaScript to store the BMI calculation in a variable. This will save you from redoing the calculation again in the next step. Name the variable as b (for BMI). Now, modify the code for onclick to start by calculating the BMI and storing it in the variable b. Then use the variable b to define what gets printed in the text area.
```
onclick="var b = some algebraic expression ; area1.value='BMI is '+ b;" 
```
Try this out. Your page should work exactly the same way it did before.

(5 marks) Next, you will now write a function that takes the BMI calculation as an input and returns a string. The string should either be "Underweight", "Normal Range" or "Overweight", depending on the value of the BMI input.

BMI Range	BMI Interpretation
Under 18.5	Underweight
18.5 to 24.9	Normal Range
25 or over	Overweight

Inside the <head> section of your html page, you should define a function called interpretBMI inside <script> tags. This script takes an input and returns a string. At the moment it does not do anything sensible but always returns "NOT DONE". Now, invoke this function from the button, test to see if it works and then build the code for the function interpretBMI.
<script>
    		function interpretBMI(bmi){
        	  return "NOT DONE";
    		}
	       </script>
	    
To use the function you need to provide the name of the function and pass the input (paramters) to the function inside brackets. For example since the function is called interpretBMI and the input variable is called b we would need to invoke the function as
interpretBMI(b) 
Since we want to print the string that is returned by the function in our text area after our BMI calculation (separated by a space character) we need to use it in the following way:
onclick="var b = some algebraic expression ; area1.value='BMI is '+ b + ' ' + interpretBMI(b);" 
Check this is working by saving your file, reloading/refreshing it in your web browser and running it.
Once you have that working it is time to actually write the interpretBMI function to return the correct strings depending on the BMI input. See if you can work out how to do this by looking at this similar function.
function getGrade(mark){
    if(mark < 50){
      return "FL";
    } else if (mark < 85){
       return "PS";
    } else {
        return "HD";
    }
}
Test that your function works correctly by trying different inputs for weight and height on your web page.
(2 marks) The BMI formula often gives a result with about 15 decimal places, i.e. too much precision, you can round a number x to the nearest integer in Javascript by applying the function Math.round to it: Math.round(x), thus Math.round(4.7) = 5. Using Math.round on your BMI formula would give zero decimal places. In fact, 1 decimal place is about right for BMI, and you can achieve this by using the slightly bizarre expression Math.round(10*x)/10.
(Optional) This is just for interest; you do not have to fix this to get full marks.
Add error checking to your interpretBMI function so it returns "Error - Incorrect inputs" if the B(OMI input is NaN or Infinity. Hint: There is a function isFinite(x) that returns false if x is not a number or is infinity.
If you want your html page to print the output to a paragraph instead of a text area you can do it by giving the paragraph an id and then setting the innerHTML of the paragraph with the text you want. For example, if you had a paragraph with id "p1" your button onclick code would be something like
 onclick="...;p1.innerHTML='BMI is '+ b + ' ' + interpretBMI(b);"> 

Show your forms and Javascript page to the lab demonstrator before leaving the lab.