Coding a calculator using Angular

Recently, I completed a small coding project to create a calculator in Angular. I created two versions of the calculator using different logic and styling. They both have their perks and flaws.

Source Code

My code is available on GitHub! 🙂

https://github.com/nicole-cai/calculators

 

Skills

HTML

CSS

Typescript

Angular 2.0

 

Code Editor

Visual Studio Code

 

Online Tools

W3Schools

PluralSight “Angular: Getting started by Deborah Kurata”

YouTube

 

First things first

Download a text editor and set up the development environment by installing Angular CLI, Node.js and npm (node package manager). Create a new project and launch the server to be viewed in your browser. Steps can be found: https://angular.io/guide/quickstart.

 

The Process

Calculator Version 1

First, I created a new Angular component to store all the code for the calculator. The component has a Typescript file, HTML file and CSS file. Essentially, the Typescript file stores all the functions and variables of the calculator. The HTML file stores the text viewed on screen and links the buttons to the Typescript functions. When clicked by the user, the HTML file calls the Typescript file and conducts a mathematical operation with the user’s input. In this version, the display variable is stored as number. Finally, the CSS file styles the interface (Yay for pink buttons!).

 

Calculator Version 2

After making my first calculator, I noticed that the pink calculator I made was not intuitive for the modern user. As an iOS and CASIO user (ha!), I wanted to make a calculator where inputs and outputs used the same display. I decided to use the Mac calculator as a reference for imitating the functionality and design of a typical calculator. The end product was not bad but my code came with some issues.

In this calculator, the display is stored as a string. The user can press the number buttons on the calculator or type numbers using their keyboard. If any number buttons on the keyboard are pressed, the number is appended to the display string. The issue with this is that if multiple elements were on the page, the calculator will unintentionally pick up any numbers typed on the webpage! I’ve discovered some other bugs which speaks to the design of the program, for example, the minus button. The minus button on this calculator doesn’t serve dual purpose of also being a negative sign. A negative sign isn’t appended to the display field when the minus button is pressed. However, if you press a number and then press the +/- sign, this does append a negative sign to the display. This isn’t very user friendly. Maybe I’ll do a version 3 one day.

 

Root App Module

Both calculators are linked through a menu bar in the root app module. This was done by importing the Router module and creating a router link from the calculator components to the main app components.

 

Verdict

Completing these small projects has helped me develop my understanding of Angular. I’ve also become more familiar with interacting with HTML/CSS/Typescript. Prior to this project, I hadn’t interacted much with these programming languages.

I can also appreciate the planning that goes into coding. Looking back at the bugs left behind in the calculators, I would argue that there are a multitude of other methods that would have been much better than how I approached the code design. This makes me more interested in testing out my solutions to different problems as I want my solutions to be more efficient and effective.