Angular Tutorial: Simple Calculator

Angular Tutorial: Simple Calculator

<strong>Originally published by </strong><a href="https://medium.com/@ashwinsathyan19" target="_blank">Ashwin Sathian</a> <em>at&nbsp;</em><a href="https://medium.com/@ashwinsathyan19/angular-tutorial-simple-calculator-3edd3973f592" target="_blank"><em>Medium</em></a>

Originally published by Ashwin Sathian at Medium

In this post, we’ll look at how we can build a simple calculator on Angular. You can see the live version of the application here. The GitHub repo for the app can be found here.

Project Setup

Assuming you have Angular CLI installed on your system(you can find instructions for this here), let’s start with creating the project. For this, open a Terminal(or Command Prompt if you’re on Windows), navigate to the directory where you want your project folder to be located and run the following command


ng new angularCalc

Now, the ‘angularCalc’ in that command is what I have named my project. This is purely your choice. Moving on, the next step is to install Bootstrap on your project. Always better to have Bootstrap on your project, rather than writing all the CSS yourself. You can find a quick guide on setting up Bootstrap styling in your project here. Since we are using Bootstrap, I have also made the application responsive.

We are done setting up. Let’s get creating !

The HTML

In this section, we are looking at the app.component.html file. Our calculator will be a very simple one, with the following features:


  • A Main Display, where the the keys we enter are recorded and the result is displayed
  • A Sub Display, which is a small section at the top of the main display where the calculation is displayed while the Main Display shows the error
  • An AC(All Clear) key which on press clears the displays
  • Four operator keys for + (Addition), — (Subtraction), x (Multiplication) and / (Division)
  • An ‘=’ key to perform the calculation
  • A ‘.’ key to enter decimal numbers

First, we have the displays, which we create as follows:

// Line 6 - Line 9
<div class="maindisplay">
   <div class="subdisplay">{{ subText }}</div>
   {{ mainText }}
</div>

Here, we have used string interpolation for setting text in the Main and Sub Displays, which will be set programatically through the mainText and subTextvariables.

What we need next is the keypad, which we build through the following code:

// Line 10 - Line 28
<div class="keypad">
   <div class="keys ackey one-line" (click)="allClear()">AC</div>
   <div class="keys opkey one-line" (click)="pressKey('/')">/</div>
   <div class="keys numkey one-line" (click)="pressKey('7')">7</div>  
   <div class="keys numkey one-line" (click)="pressKey('8')">8</div>
   <div class="keys numkey one-line" (click)="pressKey('9')">9</div>  
   <div class="keys opkey one-line" (click)="pressKey('x')">x</div>
   <div class="keys numkey one-line" (click)="pressKey('4')">4</div>  
   <div class="keys numkey one-line" (click)="pressKey('5')">5</div>  
   <div class="keys numkey one-line" (click)="pressKey('6')">6</div>
   <div class="keys opkey one-line" (click)="pressKey('-')">-</div>  
   <div class="keys numkey one-line" (click)="pressKey('1')">1</div>
   <div class="keys numkey one-line" (click)="pressKey('2')">2</div>
   <div class="keys numkey one-line" (click)="pressKey('3')">3</div>    
   <div class="keys opkey one-line" (click)="pressKey('+')">+</div>
   <div class="keys numkey zerokey one-line" (click)="pressKey('0')">0</div>
   <div class="keys numkey one-line" (click)="pressKey('.')">.</div>  
   <div class="keys equalkey one-line" (click)="getAnswer()">=</div>  
</div>

As you can see, all keys have a common class keys, and then there are classes specific to each button or a set of then. We have also used Event Binding and assigned functions to be triggered on click of the buttons. What these functions do, adn what the classes are and do, we’ll see in the later sections.

Cool then. We now have a very ugly looking set of numbers and divs on our page. Don’t worry — they’ll get the perfect makeover soon enough.

The CSS

Let’s move on to app.component.css. Very well then, time to put some style on the calculator. We define styles for all those classes in the HTML.


Following are the main classes used in the HTML. These would get the calculator to look much better and closer to the final product.

// Line 8 - Line 43
.maindisplay {
    background: lightgrey;
    height: calc(100% / 3);
    padding: 5% !important;
    font-size: 4rem;
    text-align: right;
    font-family: Courier, monospace;
    overflow: auto;
}
.subdisplay {
    border-bottom: 1px solid black;
    height: 25%;
    font-size: 2rem;
    overflow: auto;
}
.keypad {
    height: calc(200% / 3);
}
.keys {
    margin: 0;
    width: 25%;
    height: 20%;
    background: whitesmoke;
    color: black;
    padding: 5%;
    font-size: 2rem;
    text-align: center;
    cursor: pointer;
}
.one-line {
    display: inline-block;
}

Of course, these are self explanatory as far as the CSS goes. Of course, we need a few more classes to give our calculator have the look we need — I leave that part to you. Use your imagination.

And finally, the business end — the Typescript

And here we are, ending it with the app.component.ts. This is where we do all the actual programming logic forthe calculator and just to cover most bases, I have used functions here, that go beyond the basic requirement of the calculator.


First, we have the following variables to declare and initialise — we’ll be using them soon.

// Line 10 - Line 17
subText = ''; // The text that should appear in the sub-display
mainText = ''; // The text that should appear in the main display
operand1: number; // The first operand
operand2: number; // The second operand
operator = ''; // The operator
calculationString = ''; 
// This is the string that denotes the operation being performed
answered = false; 
// A flag to check whether the solution has been processed
operatorSet = false; // You'll see how this is used soon


Once we have the variables ready, we can look at the function that handles press of each key on our calculator, pressKey

// Line 19 - Line 36
pressKey(key: string) {
   if (key === '/' || key === 'x' || key === '-' || key === '+') {
      const lastKey = this.mainText[this.mainText.length - 1];
      if (lastKey === '/' || lastKey === 'x' || lastKey === '-' || lastKey === '+')  {
        this.operatorSet = true;
      }
      if ((this.operatorSet) || (this.mainText === '')) {
        return;
      }
      this.operand1 = parseFloat(this.mainText);
      this.operator = key;
      this.operatorSet = true;
   }
   if (this.mainText.length === 10) {
     return;
   }
   this.mainText += key;
}

This function, which is triggered on pressing the number and operator keys, handles the input for the calculator. First, we check whether the pressed key is for an operator. Within this if block, we check whether the previously entered key was also an operator and if it were so, we just stop the execution, ensuring that two operators are not consecutively entered.

In the next if block, we ensure that the first key entry recorded isn’t an operator as that would make no sense. Once these checks pass, we set the current key as the operator, and all the input that preceded it as operand1. The operatorSet variable is used to check whether the operator has already been entered.

If it turns out that the pressed key is not an operator, we append the key entry to the mainText, so that it is displayed on the Main Display. We also have an if check to ensure only 10 characters are entered at most – as calculators have.

Next, we have the getAnswerfunction, that gets the calculator to well, calculate the answer.

// Line 44 - Line 78
getAnswer() {
    this.calculationString = this.mainText;
    this.operand2 = parseFloat(this.mainText.split(this.operator)[1]);
    if (this.operator === '/') {
      this.subText = this.mainText;
      this.mainText = (this.operand1 / this.operand2).toString();
      this.subText = this.calculationString;
      if (this.mainText.length > 9) {
        this.mainText = this.mainText.substr(0, 9);
      }
    } else if (this.operator === 'x') {
      this.subText = this.mainText;
      this.mainText = (this.operand1 * this.operand2).toString();
      this.subText = this.calculationString;
      if (this.mainText.length > 9) {
        this.mainText = 'ERROR';
        this.subText = 'Range Exceeded';
      }
    } else if (this.operator === '-') {
      this.subText = this.mainText;
      this.mainText = (this.operand1 - this.operand2).toString();
      this.subText = this.calculationString;
    } else if (this.operator === '+') {
      this.subText = this.mainText;
      this.mainText = (this.operand1 + this.operand2).toString();
      this.subText = this.calculationString;
      if (this.mainText.length > 9) {
        this.mainText = 'ERROR';
        this.subText = 'Range Exceeded';
      }
    } else {
      this.subText = 'ERROR: Invalid Operation';
    }
    this.answered = true;
}

The function here looks pretty long, but it isn’t all that complicated, as you’ll see.

Firstly, we set the mainText to the calculationString, and extract the second operand by splitting the calculationString by the operand, using the split() function, and assign it to operand2. What happens over the next few lines is pretty straightforward, carrying out the calculation and setting the answer to mainText, moving the calculationString to the subText. I have also included conditions to restrict the the range of the calculations, and also display error messages.

Once this calculation is completed, we set the answered variable to true. We have use for this flag in other parts of the code, as you’ll see and figure out.

You’ll also need to write a function allClear() to be executed on pressing the AC key. And once that’s also done, we have a calculator that is good to go and ready to show off – to whoever may want to see it.

That rounds up this article where I explained how we can build a small calculator on Angular. Frankly, this app hardly uses any of the concepts that make Angular such a powerful and loved front-end development framework. Nevertheless, this application will help you familiarise with the bsic folder structure, project setup etc. and put you at ease with the combination of HTML, CSS and TS that make up an Angular component.

Do feel free to improve upon the features we already ahve and perhaps expand this to a scientific calculator, off the top of my head.

--------------------------------------

Thanks for reading :heart: If you liked this post, share it with all of your programming buddies! Follow me on Facebook | Twitter

Learn More

☞ Angular 7 (formerly Angular 2) - The Complete Guide

☞ Learn and Understand AngularJS

☞ Angular Crash Course for Busy Developers

☞ The Complete Angular Course: Beginner to Advanced

☞ Angular (Angular 2+) & NodeJS - The MEAN Stack Guide

☞ Become a JavaScript developer - Learn (React, Node,Angular)

☞ Angular (Full App) with Angular Material, Angularfire & NgRx

☞ The Web Developer Bootcamp

Angular 9 Tutorial: Learn to Build a CRUD Angular App Quickly

What's new in Bootstrap 5 and when Bootstrap 5 release date?

Brave, Chrome, Firefox, Opera or Edge: Which is Better and Faster?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

How to Use Cookies in Angular for Storing user’s Credentials

In this post, I will be explaining about using Cookies in Angular for Storing user’s Credentials

Angular Tutorial - Learn Angular from Scratch

Angular Tutorial - Learn Angular from Scratch: This course is for beginners who are curious on how to get started with Angular. In this course you will learn how to download, install and play around with Angular. We teach you the main components of Angular, so that you can get up and running with it asap. You will learn now to start building applications with Angular.

An Angular Roadmap — The Past, Present, and Future of Angular

✅Interested in being an Angular developer in 2019? ... blog post it's most likely that you've written some code in javaScript in the past.