How to Create a Calculator with AngularJS

In this tutorial, we going to see how to create a calculator with AngularJS. AngularJS is a JavaScript framework it helps to create powerful web applications and reduce your website or application load capacity. AngularJS provides Data-binding, MVC architecture and much more options.

Using HTML, CSS, and AngularJS below you can see Preview for the stylish calculator. There is a built-in function for the calculator in AngularJS that help to minimize the code.

How to Create a Calculator with AngularJS

   

HTML Calculator Layout

In the below HTML contains many AngularJS built-in directives here you can see some examples ( ng-app, ng-controller, ng-if, etc. ) Using this only we going to build the calculator.

index.html

<!doctype html>
<html>
<head>
    <title>Calculator with Angular JS</title>
    <script src="js/angular.min.js"></script>
    <script src="js/calculator.js"></script>
    <link href="style.css" rel="stylesheet" />
</head>
<body ng-app="calc" ng-controller="calcMain">
    <h1>Calculator with Angular JS</h1>
    <div class="container-full">
        <div class="result-container">
            {{firstVal || 0 }}
            <span ng-if="currentModifier">{{currentModifier}}</span>
            <span ng-if="secondVal">{{ secondVal }}</span>
            <span ng-if="result" class="result-item"> = {{ result }}</span>
            <button class="close-btn" ng-click="clearNumbers()">X</button>
        </div>
        <div class="alter-container">
            <div class="count-number">
                <div class="count-number-in" ng-repeat="num in countArr">
                    <button class="number-list" ng-click="numberDisplay(num)">{{ num }}</button>
                    <button class="number-list" ng-if="$index == 9" ng-click="numberDisplay('.')"> . </button>
                </div>
            </div>
            <div class="modify-container">
                <button class="modify-val" ng-repeat="mod in myValues" ng-click="createSecondValue(mod)">{{ mod }}</button>
            </div>
        </div>
        <button class="success-btn" ng-click="doMath()">=</button>
    </div>
</body>
</html>

Calculator with AngularJS

First, you need to download AngularJS form the website. Once you downloaded angular.min.js file include in top of the index.html file. The below calc.js will explains how the calculator works, it is simple you can see below. Don’t forget to include the file below the angular.min.js file.

calc.js

'use strict'
var app = angular.module('calc', []);

app.controller("calcMain", function($scope) {
    $scope.countArr = [];
    $scope.myValues = ['+', '-', '*', '/'];
    $scope.firstVal = "";
    $scope.secondVal = "";
    $scope.currentModifier = "";
    var valueFlag = false;

    for (var i = 9; i &gt;= 0; i--) {
        $scope.countArr.push(i);
    }

    function currentValueDisplay(num) {
        assignValues(num);
    }

    function assignValues(num) {
        if (valueFlag) {
            $scope.secondVal += num;
        } else {
            $scope.firstVal += num;
        }
    }

    $scope.numberDisplay = currentValueDisplay;

    function activateFlag() {
        valueFlag = true;
    }

    function setCurrentModifier(modifier) {
        activateFlag();
        $scope.currentModifier = modifier;
    }

    $scope.createSecondValue = setCurrentModifier;

    function evalMath() {
        if ($scope.firstVal != '' &amp;&amp; $scope.secondVal != '') {
            var mathFormat = $scope.firstVal + $scope.currentModifier + $scope.secondVal;
            $scope.result = eval(mathFormat);
        }
    }

    $scope.doMath = evalMath;

    function clearScope() {
        valueFlag = false;
        $scope.firstVal = '';
        $scope.secondVal = '';
        $scope.currentModifier = '';
        $scope.result = '';
    }

    $scope.clearNumbers = clearScope;
});

User Interface for the AngularJS calculator

Finally using the following CSS code we going to create User Interface for the AngularJS calculator.

style.css

* {
	box-sizing: border-box;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	background: #bbbaba;
	position: relative;
}
h1 {
	text-align: center;
	margin-top: 50px;
}
button {
	outline: none;
	border: none;
	cursor: pointer;
}
.container-full {
	position: absolute;
	left: 50%;
	margin: 20px 0 0 -170px;
	box-shadow: 1px 2px 27px #676767, -1px -2px 3px #525252;
}
.result-container {
	border: 1px solid #151313;
	background: #211e1e;
	padding: 20px;
	font-size: 32px;
	width: 350px;
	padding-right: 22px;
	text-align: right;
	color: #ffffff;
}
.result-item {
	font-size: 32px;
}
.alter-container {
	width: 350px;
	display: flex;
	flex-flow: row nowrap;
}
.count-number {
	width: 250px;
	display: flex;
	flex: 1 1 auto;
	flex-flow: row wrap;
}
.count-number-in {
	flex: 1 1 auto;
	display: flex;
	flex-flow: row wrap;
}
.modify-container {
	flex: 1 1 auto;
	display: flex;
	flex-flow: column nowrap;
}
.number-list,
.modify-val {
	flex: 1 1 auto;
	padding: 30px;
	color: white;
	font-size: 26px !important;
	border: 1px solid #1e2123;
	background: #222427;
}
.modify-val {
	font-size: 25px;
	padding-top: 20px;
	padding-bottom: 20px;
}
.number-list:hover,
.modify-val:hover {
	background: #1b1c1d;
	cursor: pointer;
}
.close-btn {
	background: #d20000;
	font-size: 29px;
	margin-right: -7px;
	border: 1px solid #a70100;
	border-radius: 2px;
	color: #ffffff;
}
.success-btn {
	background: #11b107;
	width: 350px;
	font-size: 25px;
	color: white;
	padding: 10px;
	font-weight: bold;
	transition: background 0.35s ease;
}
.success-btn:hover,
.success-btn:focus {
	background: #11b107;
}

 

Was this article helpful?

Yes No
×

How can we improve it?

×

We appreciate your helpul feedback!

Your answer will be used to improve our content. The more feedback you give us, the better our pages can be.

Follow us on social media:

Facebook Pinterest
Share via:

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts.

Leave a Reply