3.7 How to add the Calculator

Our team is happy to present you a new page type called Calculator. The Calculator page type is designed in order to help you and indeed the users of your app to solve predefined mathematical problems. There are many situations when you might want to use a predefined formula calculator. Some of the most popular are body fat percentage calculation, ingredient amount calculation for recipes, etc.

So, get started by adding a Calculator page to the list of all pages of your app. Go to app’s DashboardEdit Pages+ Add New Page. In the menu of all our page types select Calculator and click Create.

A page looking like this will appear:


Calculator page type stands out from the list of our other page types because it has the strongest emphasis on editing the code. To take most out of calculator page type you will have to have at least basic HTML skills, but don't worry – the default template source code is designed and formatted to be easily understood and edited.

By default Calculator page type has three input fields values of which are summed when you tap Calculate button. If your formula has more (or less) parameters than three go into HTML editor by clicking </>HTML to add more of them.

Locate the following entry:

<input id="p1" type="number" style="text-align:right; width:60%; font-family:monospace; font-size:100%; font-weight:bold;">

This is a code for one input field of your formula. Copy and paste it as many times as many parameters you have. Please note that each input field has a different ID — the first attribute of the element. The IDs are assigned to the input fields sequentially. Edit each id attribute so that its value would represent a p followed by its number in the list of the input fields. Numeration of input fields is done in natural numbers and starts from one (1).

After you have created all the input fields for formula parameters you have, it’s time to go into editing the JavaScript function that does the calculation.

Locate the following entry:

var param1=parseFloat(document.getElementById("p1").value);

This is a JavaScript code that assigns value of input field p1 to param1 variable. Copy and paste this code as many times as many input fields you have changing the numeration respectively.

Now its time to go into the formula itself. Locate the following entry:

var result = param1 + param2 + param3;

This is another JavaScript assignment. You should only take an interest in the part right to the equality sign (=). Here are all the mathematics done. Use plus sign (+), asterisk (*), hyphen (-) and forward slash (/) for adding, multiplying, subtracting and dividing parameters. You can also introduce coefficients to the parameters in case you need them.

This is it, Calculator page type needs no further editing. In case of a wrong input the Calculator will come up with the invalid input result.

Please feel free to create a support ticked or a forum post in case you need some help with our Calculator page type.


Avatar of CreaTusApps

CreaTusApps has written 103 articles

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>