drew.d.lenhart

programming, software, technology, anything on my mind...

Developing a HTML5 App in jQuery Mobile Part 3

2014/08/04

Last tutorial was the visual end, now lets break down our main javascript file.  Here are the contents on main.js.  Ill break it down:

Setting up variables and beginning our function bmiE():

/* Variables-----------------------------------------------------------------------*/
var invalidPop = "#invalid";
var slide = { transition: "slideup" };
var answerOne = "#answerPop";

/*initialize function to calculate bmi---------------------------------------------*/
function bmiE(x,y){

 

More variables.  x and y are pulling data from the height and weight text boxes in the index.html file:  xSelect is grabing the value from the selector:

var x;
var y;
x = document.getElementById('height');
y = document.getElementById('weight');
var xSelect = selector.options[selector.options.selectedIndex].value;

 

Next lets check to see if a) Is the entry a number?  b) is the height & weight boxs empty?  Take a look at $.mobile.changePage(invalidPop, slide),  this line is using jquery to do an alert message in jquery mobile if one of the fields is not a number. (look at the vairable invalidPop, its calling #invalid in index.html)

/*Form validation  **Checks to see if fields are empty, or if anything other than numbers is entered Returns a pop up if incorrect*/

    if(isNaN(x.value && y.value)){
        $.mobile.changePage(invalidPop, slide);
        return false;

    }
    if(x.value === "" || x.value === null){
        $.mobile.changePage(invalidPop, slide);
        return false;

    }
    if(y.value === "" || y.value === null){
        $.mobile.changePage(invalidPop, slide);
        return false;
    }

/*End Form validation---------------------------------------------------------*/

 

Remember the variable xSelect declared above?  We will use this to check to see which selection is made, Metric or Standard?  After it figures out which selection is made, the calculation is then done.  I found the formula for calculating BMI here.

/* This checks to see which selection is made and performs correct calculation */
    if(xSelect === "metric"){
        answer = y.value / Math.pow(x.value, 2);

    }
    if(xSelect === "metric2"){
        answer = y.value / Math.pow((x.value/100),2);

    }
    if(xSelect === "eng"){
        answer = [y.value / Math.pow(x.value, 2)]* 703;

    }
    /* End form selection--------------------------------------------------------- */

 

Now we need to output an answer!  answerOne is our variable linking us to the answerPop dialog in the index.html.  So going back into the index.html file inside the answerPop dialog area I created a <div> with an ID of "answer", using innerHTML we can display the answer here!  Also I used Math.round to round the number to two decimal places.

/*Creates pop up answer window, and displays output */
    $.mobile.changePage(answerOne, slide);
    document.getElementById('answer').innerHTML = Math.round(answer*100)/100;
    /*End------------------------------------------------------------------------- */

 

Now finally, I wanted to show where you were at on the BMI table.

BMI Values Severe thinness - Less than 15.99 Moderate thinness - 16.00 - 16.99 Mild thinness - 17.00-18.49 Normal weight - 18.50-24.99 Overweight - 25.00-29.99 Obese - class I - 30.00-34.99 Obese - class II - 35.00-39.99 Obese - class III - Greater than 40

I wanted to display your BMI and your value (eg.  Normal Weight)

/*Checks the output and determines Level of BMI------------------------------  */
    if(answer <= 15.99){
        document.getElementById('answerOut').innerHTML = "Severe Thinness";

        return false;
    }
    if(answer >= 16.00 && answer <= 16.99){
        document.getElementById('answerOut').innerHTML = "Moderate Thinness";

        return false;       
    }
    if(answer >= 17.00 && answer <= 18.49){
        document.getElementById('answerOut').innerHTML = "Mild Thinness";

        return false;
    }
    if(answer >= 18.50 && answer <= 24.99){
        document.getElementById('answerOut').innerHTML = "Normal Weight";

        return false;
    }
    if(answer >= 25.00 && answer <= 29.99){
        document.getElementById('answerOut').innerHTML = "Overweight";
        return false;
    }
    if(answer >= 30.00 && answer <= 34.99){
        document.getElementById('answerOut').innerHTML = "Obese Class I";
        return false;
    }
    if(answer >= 35.00 && answer <= 39.99){
        document.getElementById('answerOut').innerHTML = "Obese Class II";
        return false;
    }
    if(answer >= 40.0){
        document.getElementById('answerOut').innerHTML = "Obese Class III";
        return false;
    }              
    /*End Check----------------------------------------------------------------  */

}
/*End bmiE function--------------------------------------------------------------*/

 

heres the final code:

/*
snowyBMI - 1.01
-Drew D. Lenhart
-snowytech.com
-October 2012
-----------------------------------------------------------------------*/

/* Variables-----------------------------------------------------------------------*/
var invalidPop = "#invalid";
var slide = { transition: "slideup" };
var answerOne = "#answerPop";

/*initialize function to calculate bmi---------------------------------------------*/
function bmiE(x,y){
    var x;
    var y;
    x = document.getElementById('height');
    y = document.getElementById('weight');
    var xSelect = selector.options[selector.options.selectedIndex].value;

    /*Form validation  **Checks to see if fields are empty, or if anything other than numbers is entered
    Returns a pop up if incorrect*/

    if(isNaN(x.value && y.value)){
        $.mobile.changePage(invalidPop, slide);
        return false;
        /*document.getElementById('warning').innerHTML = "This entry is not a number!";*/
    }
    if(x.value === "" || x.value === null){
        $.mobile.changePage(invalidPop, slide);
        return false;
        /*document.getElementById('warning').innerHTML = "Please enter a number!";*/
    }
    if(y.value === "" || y.value === null){
        $.mobile.changePage(invalidPop, slide);
        return false;
    }
    /*End Form validation---------------------------------------------------------*/

    /* This checks to see which selection is made and performs correct calculation */
    if(xSelect === "metric"){
        answer = y.value / Math.pow(x.value, 2);

    }
    if(xSelect === "metric2"){
        answer = y.value / Math.pow((x.value/100),2);

    }
    if(xSelect === "eng"){
        answer = [y.value / Math.pow(x.value, 2)]* 703;

    }
    /* End form selection--------------------------------------------------------- */

    /*Creates pop up answer window, and displays output */
    $.mobile.changePage(answerOne, slide);
    document.getElementById('answer').innerHTML = Math.round(answer*100)/100;
    /*End------------------------------------------------------------------------- */

    /*Checks the output and determines Level of BMI------------------------------  */
    if(answer <= 15.99){
        document.getElementById('answerOut').innerHTML = "Severe Thinness";

        return false;
    }
    if(answer >= 16.00 && answer <= 16.99){
        document.getElementById('answerOut').innerHTML = "Moderate Thinness";

        return false;       
    }
    if(answer >= 17.00 && answer <= 18.49){
        document.getElementById('answerOut').innerHTML = "Mild Thinness";

        return false;
    }
    if(answer >= 18.50 && answer <= 24.99){
        document.getElementById('answerOut').innerHTML = "Normal Weight";

        return false;
    }
    if(answer >= 25.00 && answer <= 29.99){
        document.getElementById('answerOut').innerHTML = "Overweight";
        return false;
    }
    if(answer >= 30.00 && answer <= 34.99){
        document.getElementById('answerOut').innerHTML = "Obese Class I";
        return false;
    }
    if(answer >= 35.00 && answer <= 39.99){
        document.getElementById('answerOut').innerHTML = "Obese Class II";
        return false;
    }
    if(answer >= 40.0){
        document.getElementById('answerOut').innerHTML = "Obese Class III";
        return false;
    }              
    /*End Check----------------------------------------------------------------  */

}
/*End bmiE function--------------------------------------------------------------*/

 

Final Demo!

Updated Final (v 2.0)

Thanks for reading!


-Originally published on snowytech.com - 11/03/2012