drew.d.lenhart

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

Developing a HTML5 App in jQuery Mobile Part 2

2014/08/04

In the last tutorial we got our basic app set up.  In this tutorial we are going to add a form that is going to be the GUI end of our app.

Here is the finished index.html file.  Notice I added input and calculation fields in the BMI page.  (I separate each page with comments to make it easier.)  Also notice I added a selector to choose between Metric and Standard.

I also thew some data in the Information and about page.


<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<title>snowyBMI</title>
<link href="css/external.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery.mobile-1.2.0.min.css" rel="stylesheet" type="text/css"/>
<link href="css/snowyT.css" rel="stylesheet" type="text/css"/>

<script src="javascript/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="javascript/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
<script src="phonegap.js" type="text/javascript"></script>
<script src="javascript/main.js" type="text/javascript"></script>
<script src="javascript/modernizr-latest.js" type="text/javascript"></script>
</head> 
<body>

<div data-role="page" id="page" class = "mainPage" data-theme="a">
    <!--<div data-role="header" data-theme="a" align="center">
        <h4 align="center">snowyBMI</h4>

    </div>-->

   <div data-role="content">
        <center><h1>Another BMI Calculator</h1></center>

      <a href="#bmi" data-role="button" data-theme="a">BMI Calculator</a>

      <a href="#poper" data-role="button" data-theme="a">Information</a>

      <a href="#about" data-role="button" data-theme="a">About</a>
      <br />
      <center><b>snowytech</b></center>

   </div>

</div>

<!--BMI Calc----------------------------------------------------- -->

<div data-role="page" id="bmi" data-add-back-btn="true" data-theme="a">
    <div data-role="header" data-theme="a">
        <h1>BMI Calculator</h1>

    </div>
    <div data-role="content">

        <!--<div id="warning" style="color:red"></div><br>-->
        <form>
        <div data-role="fieldcontain">
            <label for="selector" class="select">Make a selection:</label>
            <select name="selector" id="selector" class="group" data-theme="a" data-native-menu="false" data-mini="true">
                <option value="metric">Metric (meters/kilograms)</option>
                <option value="metric2">Metric (centimeters/kilograms)</option>
                <option value="eng">Standard (inches/pounds)</option>
            </select>
        </div>

        <label for="height">Height :</label>
        <input type="text" name="height" id="height" value="" data-theme="b"/>

        <label for="weight">Weight:</label>
        <input type="text" name="weight" id="weight" value="" data-theme="b"/>
        <br />
        <button onClick="return bmiE();" data-theme="a">Calculate</button>
        <input type="reset" value="Reset" data-theme="a" />
        </form>
        <!--<button onClick="return label();" data-theme="b">test</button>-->

        <br /><br />
        <!--Your BMI (Body Mass Index):<br>
        <b><div id="answer"></div></b><br><br>-->

    </div>

</div>

<!--Invalid Popup dialog-->
<div id="invalid" data-role="dialog" data-title="Invalid Note" data-theme="b">
        <div data-role="header" data-theme="e">

        <h1>Error</h1>

        </div>
    <div data-role="content">
        This entry is not a number or fields are not complete! <br />
        <br />
        -Only enter numbers.<br />
        -No letters or characters.<br />
        -Fill in both fields

        <br /><br />
        <a href="#" data-rel="back" data-role="button" data-theme="a">Ok</a>

    </div>

</div>

<!--Answer Popup dialog-->
<div id="answerPop" data-role="dialog" data-title="BMI Answer" data-theme="b">
        <div data-role="header" data-theme="a">
            <h1>BMI</h1>
        </div>
    <div data-role="content"> 
        Your BMI (Body Mass Index):<br>
        <center>
        <h3><div id="answer"></div></h3>
        <h3>Status:<br /><div id="answerOut" style="background-color: yellow"></div></h3>
        </center>
        <hr>
            <b>
            Severe thinness  -  Less than 15.99<br />
            Moderate thinness  -  16.00 - 16.99<br />
            Mild thinness  -  17.00-18.49<br />
            Normal weight  -  18.50-24.99<br />
            Overweight  -  25.00-29.99<br />
            Obese - class I  -  30.00-34.99 <br />
            Obese - class II  -  35.00-39.99<br />
            Obese - class III  -  Greater than 40<br /></b>
            <a href="#" data-rel="back" data-ajax="false" data-role="button" data-theme="a">Ok</a>

    </div>

</div>

<!--Saves page.----------------------------------------------------- -->

<div data-role="page" id="saves" data-add-back-btn="true">
    <div data-role="header" data-theme="a">
        <h1>Saved Data</h1>
    </div>
    <div data-role="content">
        <p id="message"/>
        <ul data-role="listview" data-inset="true">

            <li data-role="list-divider">Item in store</li>
            <li class="storeItem"/>
        </ul>
    </div>

</div>

<!--Information page.----------------------------------------------------- -->

<div data-role="page" id="poper" data-add-back-btn="true" data-theme="a">
    <div data-role="header" data-theme="a">
        <h1>Information</h1>
    </div>
    <div data-role="content">
            <center><h3>Body Mass Index (BMI)</h3></center>

BMI is a useful measure of overweight and obesity. It is calculated from your height and weight. BMI is an estimate of body fat and a good gauge of your risk for diseases that can occur with more body fat. The higher your BMI, the higher your risk for certain diseases such as heart disease, high blood pressure, type 2 diabetes, gallstones, breathing problems, and certain cancers.
Although BMI can be used for most men and women, it does have some limits:<br /><br />

<ul>
<li>It may overestimate body fat in athletes and others who have a muscular build.</li>
<li>It may underestimate body fat in older persons and others who have lost muscle.</li>
</ul>
<br /><br />
<center><b>BMI Values</b><br />
Severe thinness  -  Less than 15.99<br />
            Moderate thinness  -  16.00 - 16.99<br />
            Mild thinness  -  17.00-18.49<br />   
            Normal weight  -  18.50-24.99<br />   
            Overweight  -  25.00-29.99<br />  
            Obese - class I  -  30.00-34.99 <br />
            Obese - class II  -  35.00-39.99<br />
            Obese - class III  -  Greater than 40<br /><br /></center>
<hr>
Source:  <a href="http://www.nhlbi.nih.gov/health/public/heart/obesity/lose_wt/risk.htm">National Heart Lung and Blood Institute</a>
    </div>

</div>

<!--About Popup dialog-->
<div id="about" data-role="dialog" data-title="About" data-theme="b">
        <div data-role="header" data-theme="a">

        <h1>About</h1>

        </div>
<div data-role="content">
    Thanks for downloading!<br /><br />
    Written by:  Drew D. Lenhart<br />
    Version:  <b>1.0.1</b><br /><br />
    Support: <a href="http://www.snowytech.com">snowytech.com</a><br />

    <br /><br />
    <a href="#" data-rel="back" data-role="button" data-theme="a">Ok</a>

    </div>

</div>

</body>
</html>

On the BMI Calculation page I created a form using the <form></form> tags.  I created the selector with three options:  Metric (meters/kilograms), Metric (centimeters/kigograms), and Standard (inches/pounds).

I created two text fields for height and weight.  Lastly two buttons; one for calculate and a reset button.  Notice the calculate button executes the function bmiE().  In the next tutorial we will get into the javascript calculations.

Part 3.


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