Tips and tricks #4: How to make calculator with table output
This article describes how to make calculator which outputs results in table format
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 #4: How to make calculator with table output
- 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
- Tips and tricks #7: How to make calculator with SVG image map
- Tips and tricks #8: How to reuse existing calculator
- Tips and tricks #9: Big numbers
- Tips and tricks #10: Files, long calculation mode
- Tips and tricks #11: Dynamic table columns
- Tips and tricks #12: Long (infinite) calculations
- Tips and tricks #13: Bitmaps and Pixel manipulation
- Tips and tricks #14: How to use a masked input
This article may rely 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 the profile picture link at the top right corner, then choose Personal. This will bring you to the Personal section of the site with a new top-left menu. In the top left menu, click the My calculators item.
This will open the My calculators page. Here, press the button in the table header. This will open the calculator editor page.
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 a help message when the mouse is over the field label. Leave it blank | |
| Type | Number | The type of the input. The 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 the user to enter anything |
Leave all other fields with their default values.
Now it is time to describe the output table. Hover Table button and click on the 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 the new table, it is empty.
Now fill in 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 the first column.
Note how the list of columns now displays added columns. 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 the second column.
Press OK to close the output table editor.
We have described the inputs and outputs of our calculator, so we only need to write code. To populate the table, you need to call the AddNewRecord() function on the table variable. This function returns an 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
- Start of cycle
- Adding a new row to the table
- Setting first column value using n identifier (see table above)
- Setting second column value using power identifier (see table above)
- Closing bracket
Click on the Preview button. By default, you should see a list of powers of two. If everything is working as expected, Publish the calculator. I embed it in this article below.
Comments