Create A Complex Calculator App Using Ionic Framework

If you’ve been keeping up, I previously wrote two tutorials on the topic of evaluating mathematical expressions.  The first tutorial was on the topic of converting an Infix expression into a Postfix expression also known as Reverse Polish Notation using the Shunting Yard algorithm.  The second tutorial was on the topic of solving the Postfix expression.

Using the hybrid application framework, Ionic Framework, we’re going to create a calculator application for solving these complex expressions.  Think of it as a mobile front end for the nice algorithms we made.

As a refresher, we’ll remember that the Infix expression 5 + 3 * 6 - ( 5 / 3 ) + 7 will first be converted into the Postfix expression 5 3 6 * + 5 3 / - 7 + before finally solving.

Let’s start by creating a fresh Ionic Android and iOS project:

It is important to note that if you’re not using a Mac computer, you cannot add and build for the iOS platform.

At this point, I’m going to assume you’ve read my other articles regarding Infix and Postfix Notation.  Inside your project’s www/js/app.js file, let’s create the following AngularJS factory:

Don’t let the above $calculatorFactory throw you off.  If you read my articles, you’ll know it isn’t as bad as it seems.  We also need to add the following prototypes.  Add them to the bottom of your www/js/app.js file because they are necessary when using the $calculatorFactory we added.

Now that we brushed up on all the old stuff, it is time to continue on creating our application.

Let’s worry about the UI of our app first.  I apologize for my poor design skills ahead of time, but I’m sure you’ll get the idea.  In fact, if you’re a long time follower of my blog, you’ll probably recognize a lot of the following from my previous article regarding a pin code interface in Ionic Framework.  In your www/index.html file, add the following code:

Beyond all the AngularJS components you’ll notice the class="center-vertical".  That is custom and is the following in our www/css/style.css file:

With all the UI stuff added, we end up with a product that looks like the following:

Ionic Calculator

Pretty crude right?  Now it is time to take care of all the AngularJS stuff that resides in our front-end UI.  We’ll be creating a controller called CalculatorController which contains an add(value) and calculate(expression) function.

The above code follows a very simple concept.  The add(value) function will add the button values to the expression box which also accepts free-type.  When you hit the equals button, the calculate(expression) is triggered solving the equation.  The equation is first converted into Postfix and then the solution is posted back into the expression box.

Conclusion

Creating the mobile application was not a complex process.  We built upon two algorithms for solving mathematical expressions and then built a mobile front end around them.  This front end consisted of pretty much only a grid of buttons that were centered vertically on the screen.  In the end, we ended up with a calculator that could solve beyond just the simple one operator math equation.

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.

  • Ahmad Azuddin

    Hello Nic,
    It’s a great tutorial you got there. Very useful for beginner like me.
    Currently I’m testing this tutorial, but i have some issue which the console said that calculatorApp is not define. Can I see the whole source code in the App.js? Because I’m confused with the structure of the controller.

  • Mark Steve

    You have done a remarkable job Nic. By following this tutorial every developer can easily make a calculator’s app. Thanks for mentioning the coding as well.
    event management applications

  • uday kumar

    I did exactly what you said. I’m getting the UI but the calclation part is not working

  • Rajeshkumar Chavan

    I want to create app like EXCELL sheet and display results in table

  • HanYang Tong

    Hi Nic, thanks for your guide. i’m getting the UI but the number is not display when I clicked on the buttons. Attached with the logs and appreciate your clarification.

  • Jijish Thomas

    Here all the code is done in ‘www’ folder instead of using ts files in src folder. So, how can we convert it into app ?