PHP
JavaScript
Angular AngularJS jQuery Ajax
Linux
.htaccess

July 6, 2019

How to Create a Calculator with AngularJS

4121

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.

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>

<!doctype html>

<html>

<head>

<title>Calculator with Angular JS</title>

</head>

<h1>Calculator with Angular JS</h1>

<span ng-if="currentModifier">{{currentModifier}}</span>

<span ng-if="secondVal">{{ secondVal }}</span>

<span ng-if="result" class="result-item"> = {{ result }}</span>

</div>

</div>

</div>

</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;
});

'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 >= 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 != '' && $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;
}

* {

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;

}

Preview & Download

Checkout Added to cart

JavaScript jQuery

Mraj

Creative Designer & Developer specialist by the spirit and a loving blogger by thoughts. If you have any questions let me drop an email with the article name to the following email id: [email protected]