Get reference code
Appearance
Sample
Tips and tricks #4: How to make calculator with table output

Tips and tricks #4: How to make calculator with table output

This article describes how to make calculator which outputs results in table format
Timur2017-01-27 12:28:58

Tips and tricks series

Tips and tricks #1: How to set output value

Tips and tricks #2: How to make calculator translatable into different languages

Tips and tricks #3: How to make calculator with custom errors

Tips and tricks #5: How to show/hide input and output controls in a calculator

Tips and tricks #6: How to make calculator with virtual keyboard

This article relies on knowledge you should get from previous articles, so you may want to check them first.

Power of what?

In this article we will create our next calculator, which will output results in table format. The calculator accepts the number and prints powers of this number, starting from the number power zero and finishing with the number power ten - in table format.

To create a calculator, login to the site and click on My calculators link at the top right corner. This will bring you to the Personal section of the site with new top menu. In the top menu, hover Create New button and click on Calculator menu item. This will take you to the calculator editor.

Add input parameter with the following fields:

Field name Value Meaning
Name Base Input label, as it appears on calculator's form, in our case, label for our number
Variable base Name of Javascript variable, which is used to hold input value
Description Optional. If set, it is used to provide help message when mouse is over the field label. Leave it blank
Type Number The type of the input. Type also determines the lower part of the input editor form. Here set it to Number
Default value 2 Default value for the field. It could be useful when you want to illustrate how the calculator works on inputs without the need for user to enter anything

Leave all other fields with their default values.

Now it is time to describe output table. Hover Table button and click on Add output table menu item. This will bring up the output table editor dialog.

Fill Name and Variable with Powers and powers values respectively. Leave Description empty. The Table columns part of the dialog consists of two parts: column editor on the top and list of columns at the bottom, below button Add. For new table, it is empty.

Now fill the information for the first table column like this:

Field name Value Meaning
Variable n Name of Javascript variable, which is used to hold input value
Column Name n Column name as displayed in column header
Type Number The type of the output

Leave all other fields with their default values and press Add to add first column.

Note how list of columns now displays added column. You can edit and delete it if you need to, using links in the list.

Fill the information for the second table column like this:

Field name Value Meaning
Variable power Name of Javascript variable, which is used to hold input value
Column Name Power of n Column name as displayed in column header
Type Number The type of the output

Leave all other fields with their default values and press Add to add second column.

Press OK to close output table editor.

We have described inputs and outputs of our calculator, so we only need to write code. In order to populate the table, you need to call AddNewRecord() function on table variable. This function returns object which can be used to set column values for the row via their variable names.
Add this code into Calculate function:

for(var i = 0; i <= 10; ++i){
    var row = powers.AddNewRecord();
    row.n = i;
    row.power = Math.pow(base, i);
}

Let's examine it line by line

  1. Start of cycle
  2. Adding new row to the table
  3. Setting first column value using n identifier (see table above)
  4. Setting second column value using power identifier (see table above)
  5. Closing bracket

Click on Preview button. By default you should see list of powers of tow. If everything is working as expected, Publish the calculator. I embed it in this article below.

Power of whatCreative Commons Attribution/Share-Alike License 3.0 (Unported)
Powers:

Comments