How to make a calculator

[fafa]

Hello Wappler community. I am hoping someone can please guide me to create this calculator with Wappler using PHP server model. Getting the form fields is a breeze but creating the server actions to produce the output based on the formula below is what cannot wrap my head around. The link below is very similar to what I want to create. See This link

1. fields on calculator should be as follows;
   •Monthly contribution = MC
   •Number of years = N
   •Interest rate = R
   •Projected value =FV

Denoted as MC, N, R and FV respectively

MC, N and R are fields that can be changed by the user as desired whiles FV which is future value or Projected Value is the computed figure based on the formula below.

MC * [(1 + r)^n – 1]
--------------------------
[r]

The bolded part of the formula in brackets is solved first before multiplying the outcome by MC
and r = R/12
And n = N*12
R is in percentage

[George]

You don’t actually need any server side for a calculator, you can do it all with our client side framework App Connect and its dynamic expressions.

Maybe somebody is up for a challenge and gives you an example

[enyonam]

Thanks @George a simple tutorial on how to perform calculations using App Connect in the documentation would be great.
@brad @brian @Teodor @Magic_Bytes @TomD @AceTutor @patrick any help?

[George]

There is already one good sample:

Pizza Calculator Website built with Wappler

I made this website in Wappler and wanted to share it / get feedback. [Screenshot_68] http://fmkgcorp.com/pizzamaster/calculator.php It is a calculator for people that make pizzas as a hobby or professionally. Notable Features When you change the number of Flours being used, new fields are added to the calculator and new rows are added to the table on the right. If you put a custom name for the flours or ingredients - it updates in the table rows accordingly. The total field is totaling th…

[Teodor]

@enyonam it’s quite simple to make calculations.
If you have two (or more) inputs, for example input1 and input2 then you can make any math calculations using the data formatter, just like:

Sum:

<p>Results: {{input1.value.toNumber() + input2.value.toNumber()}}</p> 

Multiplication:

<p>Results: {{input1.value.toNumber() * input2.value.toNumber()}}</p> 

More complex calculations:

<p>Results: {{(input1.value.toNumber() + input2.value.toNumber()) / (input1.value.toNumber() * 99)}}</p> 

etc.

[patrick]

Formula in App Connect would become {{ MC.value * (1 + r.value).pow(n.value - 1) }}. I believe on the server-side we are missing the pow formatter, but client-side the expression should work.

[enyonam]

@patrick

I

Great guide from all and got me on the path. Just two problems I am encountring now.
First I am able to see the computed results when in wappler but not when I preview in Browser, I rather see the wappler bindings. See Images below.

Browser View

Second problem question is How can I make the results show only when the calculate button is clicked. I have tried using the Dynamic Event onClick or the CALCULATE button but not working.
I am just trying to understand the entire process before fine tuning.

[Teodor]

Probably some files are missing from your server.
Please check the browser console for errors.

[aschoijett]

I don’t recall seeing the pow () function in the client side either.

[patrick]

Looks like you haven’t uploaded all the files to your server, probably missing the dmxAppConnect.js.

pow is available under the numeric formatters

[enyonam]

noted. Thank you

[enyonam]

Fixed the missing file issues. Thanks.
Left with how the second issue.
How to make the results show only when the calculate button is clicked.

http://ghanapedia.com/calculator/

[patrick]

Use a variable component for your results and set it using the setValue action on the click event of the button.

[aschoijett]

Noted. Thx Patrick.

[fafa]

Hi Patrick for some strange reason using setValue of the variable component onClick of the calculate button does not seem to work. Here is what I have done which is not giving me the effect I want.

1. I used the variable component to create a variable and named it futureValueClick.
2. In the variable properties, I left the value field empty.
3. I then created a readonly text input and used dynamic attributes property to bind the variable as futureValueClick.value
4. I selected the CALCULATE button and in went to add dynamic event onClick and selected setValue under the futureValueClick variable and added the formula for the calculation in the value field and saved.

Now when I test, nothing happens. The computed value does not show up in the readOnly input field. The only time it shows up is when i add the formula directly in the variable’s value field when i click on it in the structure. What am I doing wrong?

Please see images below

[patrick]

Not sure what goes wrong, what if you use the setValue of the input directly, the extra variable is actually not needed.