HTML5 - Calories Burned Gym Application Tutorial

© Jerry Belch

Day 1

Project Overview

In this lesson, you will be creating a mobile application using HTML5, Cascading style Sheets and JavaScript. You will use Media Queries to make the application fit a number of devices with different screen widths. Calories burned during exercise are affected by type of exercise, intensity, bodyweight and other factors. The current model works with 4 different weights: 130, 155, 180 and 205. You will create two additional weight classes: 105 and 225. Adjustments will be made to the HTML code and JavaScript. There is also a section on suggested workout routines. When completed you will test the application out on your cell phone or tablet. The project should take about 10-11 hours.

Objective

In this tutorial you will sharpen your coding skills and be introduced to the logic of JavaScript to determine calories burned.


Below is the application web page. I used the Pit of Pain Gym as an example.


Home page for Pit of Pain Gym

To use the application, select a weight category 130, 155, 280 or 205. Use the up and down arrows to select this weight. Use the up and down arrows to set the amount of time for an exercise. Select an exercise for the 29 different choices. Click Submit Information Button to see answer. The input numbers type does not work with all browsers. I used Google Chrome. It also works in Firefox, but not in Internet Explorer. Just enter the weight classification id using IE. You must enter either 130, 155 180 or 205. The Reset Button, simply clears the form data.


Materials Needed
  1. Have downloaded a copy of Notepad++ on your computer
  2. Google's Chrome Browser is recommended as the browser to use for this assignment.
Teacher's Responsibility
  1. Grading sheet for project and lesson plans for the project. Sample Grading Sheet and Lesson Plans
  2. Or Progress logs

Day 2

How the Program Works


The main body of the document on the left shows the types of exercises. Each one has a radio button, so the user can select the exercise they wish to measure. Only one can be checked at a time. There are a total of 29 of them. Enter weight and minutes, then press the Submit button. Obviously all exercise and activities are not listed, only some activities that might be performed at a gym or health club. Try out the following numbers with the program and record your answers on a separate piece of paper


Calories Burned Assignment
ActivityWeightMinutes
General Aerobics130 lbs.15 minutes
Stationary Cycle Moderate180 lbs.30 minutes
Circuit Training205 lbs.30 minutes
Body Building Vigorous180 lbs.25 minutes
Treadmill 7mph.155 lbs.60 minutes
General Aerobics130 lbs.15 minutes

Pick a weight closest to your own, and design a one hour workout that will burn at least 750 calories. List activity, weight and time used.


Day 3

Explaining the HTML code in the program

The text box below shows the HTML5 code for this application. Scroll through it. As you can see it is quite simple and brief. Tables are used to organize the activities as to general type of exercise


  1. First line tells browser that this is an HTML5 document
  2. Second line tells browser that English is the language to be used
  3. The third line is the <head>. It is the beginning head tag Fourth line sets up the character set to be used
  4. Next line holds the <title> and </Title> of the document
  5. The next line links this html document to the cascading style sheet file, which formats and displays the document
  6. The next line links this html document to a JavaScript file. which is used in making the calculations necessary for this application.
  7. The ending </head> is the end of the heading tags
  8. The next one <body> defines the beginning of the body of the document.
  9. <div id="big_wrapper"> defines the total space of the application
  10. <top_header> is where the company name - Pit of Pain, Calories Burned and logo are placed. This is a sectioning tag. The <h1> is the beginning headline tag and </h> is the ending headline tag.
  11. The copyright symbol, ©, is on the next line, next to my name.
  12. Next line ends the top header.
  13. the Nav tags are not used in this exercise, since we are not creating links to other pages.
  14. The <div id="new_div"> creates a new major division for the second part of the page.
  15. Scroll down through the code until you see the corresponding ending tag, </div>
  16. Next a section in this division is created with the <Section id="main_section"<
  17. An id is given to these divisions and sections, so that we may target them directly in the CSS file as to format, color, spacing, etc.
  18. Articles fall under section tags and they have headers, text, pictures and footers.
  19. We use the header to tell the user that this is the type of activity. We formatted this text as headline1.
  20. Next we end the header, </header>
  21. The next line is the beginning form tag which we called calorieForm.
  22. The next section contains a number of tables.
  23. These tables were designed to display the different activities
  24. We start by telling the browser that we want to create a table with cell padding of 3, cell spacing of 3 and a border of 3.
  25. Cellpadding is the space between the text and the cell border.
  26. Cellspacing is the space between the table data , <td> boxes.
  27. Each one has a table heading that spans the number of table data cells
  28. Each cell or table data cell contains the activity along with a radio button type of input, that the user selects.
  29. A different table data cell is used for each exercise.
  30. Each row, <tr> contains five three to five exercises.
  31. Images were placed in what would have been blank cells to enhance the appearance of the table.
  32. An ending table, <.table> is needed at the end of all the exercises to tell the browser to stop formatting the text as a table.
  33. Between the footer tags for this section is a link to a site where the data was obtained to create this application.
Side News Section

The right-hand side of the screen contains another html section of code.

  • It is called side_news section and contains the place where weight, time of activity are entered and submitted.
  • It has a header that states in heading 1 form that here is where is where we Calculate Calories Burned.
  • A weight chart listing of the weights that should be used is displayed in an unordered,, <ul>, list.
  • The next few lines of code are designed to create input of a person's weight. Remember that we set four weight categories.
  • The input type is of the number type. In Chrome and Firefox, small up and down arrows appear in the box and the user can set the weight just by clicking on them.
  • A minimum weight of 130 is determined and appears in this box when the application is loaded,
  • A max weight of 205 is set.
  • The step is the amount of difference between weight categories. 205-180 = 25. 130 + 25 + 155.
  • The input type for the minutes of exercise works the same way.
  • A minimum of 3 is set and a maximum of 120 with a interval of 1 minute set as the step.
  • Two button input types are next. One submits the information and the other clears the form of data.
  • The value of the first button is Submit Information. This is what the text will say inside the button on your screen
  • When clicked it is directed to a javaScript function which calculates the calories burned based on the exercise, persons weight an the amount of exercise. We will look at that later.
  • Next a text box on the screen is designed to display that number at the end of the javaScript function.
  • The second button clears the data from the application: weight, calories burned, type of exercise, minutes,
  • The minimum for both minutes and weight are reloaded automatically after clearing the form.
  • The next section lists a series of sample workouts
  • The last few lines end the footer, the form, division, body and the entire html tag, </html>.

Day 4

Getting and saving the HTML file

The HTML code needed is in the text box above, select all of the text, Type CTRL + C to put in on the clipboard Open Notepad++ if it is not already open, select New file, paste the clipboard contents on the blank form and save it using an html file extension. You can use the same file name- CalorieCounter.html. If need be, you can always go back to this tutorial and get the original copy of the file in the text area box.


Day 5

Working with the cascading style sheet file


The .css file called CaloriesBurned.css is the file that is called from the html file up in the head tags. There four main sections, Media Queries, used to format the screen for different sized devices. I changed the top graphic for each of the different sizes, so you can see when that screen size is reached. I also changed colors of the different sections and adjusted the size of paragraphs, headlines, special paragraph classes to accommodate different screen sizes.

  • Screen sizes are from 320 pixels to 479 pixels - treadmill graphic
  • 480 pixels to 767 pixels - stationary bike graphic
  • 768 to 991 pixels - old guy flexing muscles
  • Greater the 992 pixels - old guy deadlift exercise
  • These categories, generally cover cell phones, tablets and laptop or desktop computers.
  • There are also many more ways of looking at these devices, but we will use these numbers to simplify our study.

In Notepad++ launch your CaloriesCounter.html file. At full size, you should see the man standing holding a barbell. The table below summarizes the different colors used in the backgrounds and borders at >992 pixels. Locate all of these.
Desktop/laptop css background color settings
ElementColorRGB Triplet
#big_wrapperTeal#008080
#main_sectiongray#a9a9a9
#side_newsOff White#ececea

Desktop/laptop css border color settings
ElementColorRGB TripletPixels/Style
#big_wrapperorange#ffa5001px solid
bodyblueviolet#8a2be21px solid
#top_headerblack#0000001px solid
#top_menured#ff00001px solid
#new_divblue#0000ff3px solid
#main_sectionblack#0000003px solid
#side_newsred#ff00003px solid
#footerwhite-top#ffffff3px solid

In Notepad++ launch our CaloriesCounter.html file. At tablet size 768 X 991, you should see the man flexing his muscles. The table below summarizes the different colors used in the backgrounds and borders at 768-991 pixels. Locate all of these.
Tablet css background color settings
ElementColorRGB Triplet
#big_wrapperTeal#008080
#main_sectionorchid#da70d6
#side_newsoff white#ececea

Desktop/laptop css border color settings
ElementColorRGB TripletPixels/Style
#big_wrapperorange#ffa5001px solid
bodyblueviolet#8a2be21px solid
#top_headerblack#0000001px solid
#top_menured#ff00001px solid
#new_divblue#0000ff3px solid
#main_sectionblack#0000003px solid
#side_newsred#ff00003px solid
#footerwhite-top#ffffff3px solid

In Notepad++ launch our CaloriesCounter.html file. At 480 X 767 size, you should see the woman riding a bike. The table below summarizes the different colors used in the backgrounds and borders at 480 by 767 pixels. Locate all of these.
Cell Phone 480 X 767 css background color settings
ElementColorRGB Triplet
#big_wrapperTeal#008080
#main_sectionseashell#fff5ee
#side_newslightcoral#f08080

Cell Phones 480 X 767css border color settings
ElementColorRGB TripletPixels/Style
#big_wrapperorange#ffa5001px solid
bodyviolet#ee82ee1px solid
#top_headerblack#0000001px solid
#top_menured#ff00001px solid
#new_divblue#0000ff3px solid
#main_sectionblack#0000003px solid
#side_newsred#ff00003px solid
#footerwhite-top#ffffff3px solid

In Notepad++ launch our CaloriesCounter.html file. At 320 X 479 size, you should see a person exercising on a treadmill. The table below summarizes the different colors used in the backgrounds and borders at 320 by 479 pixels. Locate all of these.
Cell Phone 320 X 479 css background color settings
ElementColorRGB Triplet
#big_wrapperTeal#008080
#main_sectiondarkseagreen#8fbc8f
#side_newslightcoral#f08080

Cell Phones 320 X 479 css border color settings
ElementColorRGB TripletPixels/Style
#big_wrapperorange#ffa5001px solid
bodyviolet#ee82ee1px solid
#top_headerblack#0000001px solid
#top_menured#ff00001px solid
#new_divblue#0000ff5px solid
#main_sectionblack#0000003px solid
#side_newsred#ff00003px solid
#footerwhite-top#ffffff3px solid

Cascading Style Sheet File for our program


Look at the first line in your css file. This is how we tell the browser to check for screen size. Anything between the { and } brackets is executed only if the screen size of that device falls within those parameters. There is a media query for each screen size. Find this line.


@media only screen and (min-width:320px) and (max-width:479px)
{
parameters
font size
background colors
border sizes and colors
Paragraph classes
}

Scroll through the text box above to see the other media queries. The information that you want changed, must between the { and { brackets

Day 6

Getting a copy of the css file and modifying it

To get a copy of the css file, highlight the text in the text box above and put it on the clipboard. Open a new file in Notepad++, paste in the information on the clipboard and saveit. Call the file CaloriesBurned.css. Remember that is the linked file name in the HTML file.


Modifying the cascading sheet style file

Here are the changes we will make to the style sheet file.

For media Query >992 : desktop/laptop width

  • #big_wrapper background color to #800000 - maroon
  • #big_wrapper border to 3px solid navy
  • #main_section background color to #ffe4e1 - misy rose from #a9a9a9
  • #side_news background color. Change to #ffe4b5 - mocassin from #ececea
Call your instructor to explain and how you made these changes. Here are the changes to the 768 by 991 screen - tablet size
  • Body border from 1px solid blueviolet to 3px dotted redorange -#ff4500
  • #top_header- Make graphic repeat. Erase the word no and the dash.
Call your instructor to how your changes.
Here are the changes to be made to the 480 by 767 screen size
  • Find the #new_div tag. Replace display:block; with display:flex;
  • What happened?
  • This line change keeps the screen as a two column instead of one.
  • When writing applications for smaller screen sizes, it is advisable to collapse the second column and make it a one column page.
Call your instructor to view these changes.
Changes to screen size 320 to 479
  • #main_section background color from #8fbc8f; to #e6e6fa;- lavender
  • Change #side_news from #f08080 to #da70d6; - orchid
Call Instructor to view your changes.

Day 7

Adding HTML code for additional weight classes/Getting javaScript File

Now we are going to make some modifications to the HTML code so that we can add two additional weights to our application: 105 and 203 lbs.

  1. Looking at the html file, add this between lines 121 and 122. Notepad++ numbers the lines down the left-hand side of your screen. key in <li>105
  2. Now enter the upper weight class.
  3. Between lines 126 and 127 key in <li>230
    Getting the javaScript file.

    The javaScript file is where the browser is told how to calculate calories burned. Let's take a look at it. The code appears below. Highlight it, copy it to the clipboard, and create a new javaScript file for your application. Remember that the name that you call this file must have a have a.js extension and be linked to the html file up between the head tags.

    Let's look at the code in the javaScript file. You will remember that when the user clicks Submit information button in the html part of the program, a javaScript function is called.

  4. The name of that function is called Function calculateCalories(calorieForm)
    1. The first thing that the function performs is to initialize the variables that it will be using.

      function calculateCalories(calorieForm){
      var weight=0;
      var totalCalories=0;

      var minutes=0;

  5. Let's examine the code for general aerobic exercise. You will note that the code is almost identical to this code with a few exceptions for each type of exercise.

    // Aerobic General
    if ((calorieForm.exercise[0].checked==true) &&
    (calorieForm.weight.value==130))
    {
    totalCalories=6.4* calorieForm.minutes.value;
    }
    else if ((calorieForm.exercise[0].checked==true) &&
    (calorieForm.weight.value==155))
    {
    totalCalories=7.61* calorieForm.minutes.value;
    }
    else if ((calorieForm.exercise[0].checked==true) &&
    (calorieForm.weight.value==180))
    {
    totalCalories=8.85* calorieForm.minutes.value;
    }
    else if ((calorieForm.exercise[0].checked==true) &&
    (calorieForm.weight.value==205))
    {
    totalCalories=10.8* calorieForm.minutes.value;
    }

    The html form has a place where the user selects the type of exercise to be evaluated. The input is done with radio buttons. The name of each button is called exercise. By using the same name for each button, an array is created ranging from button 0 through button 29. Twenty nine represents the last exercise in our application. Array numbers are stored inside square brackets []. Only one button can be pressed at a time. The first array number starts with a zero instead of one. The first exercise is called General Aerobic and is exercise[0]. The whole form, the area where the radio buttons are located, is called calorieForm. If the radio button associated with this activity is clicked on and the weight selected is 130 lbs., then total calories burned per minute is 6.4. Note the syntax of each statement. It is very important to follow this syntax. Note double parentheses, square brackets around the array number, the double equal signs, The two ampersands - &&, semicolon placement and else if statements. The && evaluates multiple things being true, weight and button pushed. Note that at 130 lbs, you burn 6.4 calories per minute. At 155 the number is 7.61. At 180, you will burn 8.85 calories per minute using this exercise. At 205, you will burn 10.8 calories per minute. There individual statements for each exercise and weight level 130,155,180,205. You will be adding additional weight classes for 105 and 230 lbs. The number of calories burned for the exercise also depends on the number of minutes that you do this exercise. As a logical conclusion, you would want to multiply calories burned per minutes, times the minutes doing the exercise. The follow underscored information shows this line for the 180 weight class.
    totalCalories=8.85* calorieForm.minutes.value;
    Example of 130 lb person with first on the list of aerobic exercise pushed.

    After evaluating each javaScript statement to determine, weight, type of exercise and duration of the exercise, the code needs to tell us what the total calories burned amount is and put the answer back on the html document in a text box. The line that does this is the last one in the function. The Math.round sub-function rounds off the number. Here is the line.

    document.calorieForm.burned.value = Math.round(totalCalories *100)/100;


    Day 8 and 9

    Calculating calories burned per minute for calories burned per hour

    The data for this application was obtained from a source that listed the values as hourly and not by the minute. We also do not have any data on our new weight classes of 105 and 230.

    1. Print out the following document. Weight and Calories burned chart
    2. After printing out the worksheet, look at the table for Aerobic Exercise, the first table.
    3. It has been completed for you.
    4. Read carefully, how to find the missing numbers for both weight classes for the other tables.
    5. Each table has a different exercise.
    6. Your task is to fill in the missing numbers on the worksheet.
    7. Turn this into your instructor.
    8. You will need this work sheet to complete the next assignment.


    Day 10:

    Adding the javaScript code for the 105 and 230 weight classifications.

    You will need your worksheet where you calculated calories burned per minute for 105 lbs and 230 lbs. The columns we are interested in are the third and the eleventh. They contain the calories burned per minute for 105 and 230 weight classes. This is the information needed to add code to our javaScript file.

    1. Open your javaScript file in Notepad++
    2. We first need to match the array number with the exercise.
    3. The table below outlines that information.

    Array number and activity
    Array numberExercise
    [0]Aerobics, general
    [1]Aerobics, low impact
    [2]Aerobics, high impact
    [3]Aerobics, step
    [4]Stationary bike, very light
    [5]Stationary bike, light
    [6]Stationary bike, moderate
    [7]Stationary bike, vigorous
    [8]Stationary bike, very vigorous
    [9]Circuit Training
    [10]Weight Lifting, vigorous
    [11]Weight Lifting, light
    [12]Health Club Exercise
    [13]Stair Machine
    [14]Rowing Machine, light
    [15]Rowing Machine, moderate
    [16]Rowing Machine, vigorous
    [17]Rowing Machine, very vigorous
    [18]Running, 5 mph
    [19]Running, 5.2 mph
    [20]Running, 6 mph
    [21]Running, 6.7 mph
    [22]Running, 7 mph
    [23]Martial Arts, judo, karate, jujitsu
    [24]Martial Arts, kick boxing
    [25]Martial Arts, tae kwan do
    [26]Krav magna training
    [27]Jump Rope, fast
    [28]Jump Rope, moderate
    [29]Jump Rope, slow

    Now it is time to add the code necessary for your application to calculate calories burned for the 105 lb folks and the 230 lbs weight classification. Follow the steps listed below.

    1. Make sure that your html file links to your javaScript file.
    2. Open your javaScript file in Notepad++.
    3. Find the first exercise: General Aerobics. You will see the // marks in front of it.
    4. You can also identify it by the array number. This is the first exercise in the array and is called exercise[0]
    5. Put the line below on your clipboard, using CTRL C or Right-Click and copy.

      else if((calorieForm.exercise[0].checked==true && (calorieForm.weight.value ==105)) { totalCalories= 5.18 * calorieForm.minutes.value; }

    6. Paste it - CTRL V right below the else if section for the 205 weight class.
    7. Paste it again under the section you just pasted.
    8. Only things that need to be changed are to change the 105 to 230 and the calories burned from 5.18 to 11.32.
    9. Save your javascript file.
    10. Launch the html file, select Aerobic General Exercise, Set the 105 weight class, choose a time, then click the Submit Information button.
    11. You should get the following answers for the 105 weight class.
      • For 3 minutes :15.54, for 5 minutes: 26.9 and for ten minutes: 51.8
      • Make sure to use click on all the inputs: exercise type, weight class and minutes or you will get a zero as the numbers for calories burned.
      • After you have the first exercise - General Aerobics working, it is time to do the code for the additional 28 exercises for both weight classes.
      • Proceed as you just did, using your javaScript file and the Calories Burned Worksheet from day 8 and 9.Use the information in columns three and eleven which contain the calories burned per minute for each of the two additional weight classes.
      • For example, for the high impact aerobics, array exercise[1], calories burned per minute, you would use 5.56 for calories burned-105 weight and 12.08 for the 230 lb calories burned per minute number.
      • Test out each exercise as you complete the lines of code.
      • If an error is made it will be a lot easier to find your error now rather than later.
      • After running the html file you have an error, type Shift CTRL J to isolate the javScript error.
      • Click on the Sources tab and you will see where the error is located.
      • Correct your error and test it again.
      • Print out the Microsoft Word document- Calorie Worksheet, launch your calories burned program and fill in the blanks.
      • Turn worksheet in to your instructor.
        Calorie Worksheet

    Fill in the accompanying worksheet with your answers.

    Day 11

    Testing out the application on your cell phone.
    Finished Calories Burned Application

    Drag window to the left to see how applications should look with different sized devices.


    To access the finished program from your cell phone, use cell phone's browser - Chrome if available. Key in this URL.


    http://janetbelch/com/PitOfPain/studentFile.html
    Call your instructor to see what the finished product looks like on a cell phone or tablet.

    Written by Jerry Belch