Exercise Calculator

JavaScript Code

Exercise calculator with objects

Our first example today is a rewrite of the exercise calculator. The first version that we saw used an HTML form to submit a calculation request to a back end server. With JavaScript we can now do all the necessary calculations directly in the page and also display the result directly in the page.

The original version of the exercise calories program stored data about different kinds of activities in a database. In this version we will instead store this data as an array of objects in the JavaScript page:

// Exercise data in the form of an array of objects
var activities =
 [{activity:'walking',intensity:'low',calories:176},
  {activity:'walking',intensity:'medium',calories:232},
  {activity:'walking',intensity:'high',calories:352},
  {activity:'cycling',intensity:'low',calories:422},
  {activity:'cycling',intensity:'medium',calories:563},
  {activity:'cycling',intensity:'high',calories:704},
  {activity:'running',intensity:'low',calories:704},
  {activity:'running',intensity:'medium',calories:880},
  {activity:'running',intensity:'high',calories:1126},
  {activity:'swimming',intensity:'low',calories:422},
  {activity:'swimming',intensity:'medium',calories:563},
  {activity:'swimming',intensity:'high',calories:704}];

With the data about the activities stored in an array, all we need now is a caloriesPerHour function that does a search in this array to locate the object that describes the desired activity.

function caloriesPerHour(data,activity,intensity) {
  let length = data.length;
  for(let n = 0;n < length;n++) {
    if(data[n].activity==activity && data[n].intensity==intensity)
      return data[n].calories;
  }
  return 0;
}

You can see the full source code for this example by clicking on the appropriate button above.

Cafe Menu Example

JavaScript Code

Further DOM properties and methods

Our second example today demonstrates some additional DOM properties and methods. The example shows how to use DOM methods to dynamically generate page elements. The page displays a table of menu items for an imaginary cafe. By clicking the buttons below the table users can have the table rebuilt with menu items for the meal of their choice.

The menu items are represented by objects stored in an array. A typical object looks like

{item:'Felafel sandwich',cost:'$4.50',meal:'L'}

When the user clicks one of the meal buttons, the JavaScript code for the page will start by filtering the list of available menu items to construct a list of objects that apply to that particular meal.

// An example of a filter function designed to filter a list of objects
function filterList(list,meal) {
  let result = []; // Make a new, empty list
  let length = list.length;
  for(let n = 0;n < length;n++) {
    // Search the original list for items that have the desired meal property
    if(list[n].meal == meal)
      result.push(list[n]); // Add items that match to the new list
  }

  return result;
}

That filtered list of objects then gets passed to a function that uses those objects to rebuild the table. The HTML used to set up the table looks like this:

<table class="table table-centered">
  <thead>
    <tr><th>Item</th><th>Price</th></tr>
  </thead>
  <tbody id="menu">
    <!-- Empty table body - JavaScript will fill this in -->
  </tbody>
</table>

Note the tbody element. The JavaScript that rebuilds the table will target that element, removing any existing rows it has and building a new set of rows for it from the filtered list of menu items.

Here is the code for the function that rebuilds the table body.

function displayItems(items) {
  // Locate the table body
  let tableBody = document.getElementById('menu');
  // Remove any existing entries from the table
  tableBody.innerHTML = '';

  // Add new rows for the items in the list
  let length = items.length;
  for(let n = 0;n < length;n++) {
    let newRow = document.createElement('tr');
    newRow.innerHTML = '<td>'+items[n].item+'</td><td>'+items[n].cost+'</td>';
    tableBody.appendChild(newRow);
  }
}

This code makes use of several new DOM methods and properties. The innerHTML property is used to access the HTML content of elements. The code here uses that property to remove any existing rows in the tbody by resetting the HTML content of the tbody element to be empty.

tableBody.innerHTML = '';

The createElement() method of the document object is used to make new HTML elements. The code above uses that method to make new rows for the table body. After using innerHTML to put some content in those new rows, we can then use the table body element's appendChild() method to attach the new rows as child elements of the table body.

let newRow = document.createElement('tr');
newRow.innerHTML = '<td>' + items[n].item +  '</td><td>' + items[n].cost + '</td>';
tableBody.appendChild(newRow);