# Basic Arithmetic Calculator using our own JavaScript file in AureliaJS

Posted by in Aurelia category on for Beginner level | Points: 250 | Views : 1007
Rating: 4 out of 5
1 vote(s)

In this article, we will look into building a basic Arithmetic Calculator using our own JavaScript file in AureliaJS.

## Introduction

Aurelia is an open source client side , modern JavaScript framework. It is written entirely in ECMAScript 2016 and uses all the features of the same. In this article, we will look into building a basic Arithmetic Calculator using our own JavaScript file in AureliaJS.

## Aurelia - Project Setup

Create a folder say AureliaExperiment at your favorite location.

Then download the basic Aurelia project setup zipped file from here.

Extract the Zipped file and copy it under AureliaExperiment folder. It looks as under

## Straight to Experiment

Let us first create a "arithmeticOperations.js" file and place it under the scripts folder. The file content is as under

```arithmeticOperations.js
-----------------------
//perform basic addition of two numbers
function AdditionOperation(num1,num2)
{
return num1-(-num2);
}

//perform basic subtraction of two numbers
function SubtractionOperation(num1,num2)
{
return num1-num2;
}

//perform basic multiplication of two numbers
function MultiplicationOperation(num1,num2)
{
return num1*num2;
}

//perform basic division of two numbers
function DivisionOperation(num1,num2)
{
return num1/num2;
}
```

Next include the "arithmeticOperations.js" file in the "index.html" as under

```index.html
----------
<!DOCTYPE html>
<html>
<head>
<title>Aurelia</title>
</head>
<body aurelia-app="src/main">
<script src="scripts/arithmeticOperations.js"></script>
<script src="scripts/system.js"></script>
<script src="scripts/config.js"></script>
<script src="scripts/config-esnext.js"></script>
<script src="scripts/aurelia-core.min.js"></script>
<script>
System.import('aurelia-bootstrapper');
</script>
</body>
</html>
```

As a next step, we will design the template in the "app.html" as under

```app.html
----------
<template>
<h2><font color="green">Basic Arithmetic Operation by calling external JS file in Aurelia - Example</font></h2>

<table border="1">

<tr>
<td><b>Enter First Number</b></td><td><input type="text" id="txtNum1" value.bind = "Num1Value"></td>
</tr>
<tr>
<td><b>Enter Second Number</b></td><td><input type="text" id="txtNum2" value.bind = "Num2Value"></td>
</tr>
<tr>
<td><b>Result</b></td><td><input type="text" id="txtResult" readonly="true" value.bind = "Result"></td>
</tr>
<tr>
<td>
<input type="button" id="btnAdd" value="Add" click.delegate = "PerformAdditionOperation()">
<input type="button" id="btnSub" value="Subtract" click.delegate = "PerformSubtractionOperation()">
<input type="button" id="btnMultiply" value="Multiply" click.delegate = "PerformMultiplicationOperation()">
<input type="button" id="btnDivide" value="Divide" click.delegate = "PerformDivisionOperation()"></td>
</tr>

</table>
</template>
```

It looks as under

Now for the fully operational system, we need to write code in the app.js file.

```app.js
---------
export class App {

constructor() {

//initializing properties
this.Num1Value = 0;
this.Num2Value = 0;
this.Result = 0;
}

PerformAdditionOperation()
{
var firstNumber = this.Num1Value;
var secondNumber = this.Num2Value;

this.Result = AdditionOperation(firstNumber,secondNumber);
}

PerformSubtractionOperation()
{
var firstNumber = this.Num1Value;
var secondNumber = this.Num2Value;

this.Result = SubtractionOperation(firstNumber,secondNumber);
}

PerformMultiplicationOperation()
{
var firstNumber = this.Num1Value;
var secondNumber = this.Num2Value;

this.Result = MultiplicationOperation(firstNumber,secondNumber);
}

PerformDivisionOperation()
{
var firstNumber = this.Num1Value;
var secondNumber = this.Num2Value;

this.Result = DivisionOperation(firstNumber,secondNumber);
}
}
```

As can be figure out that, in the PerformAdditionOperation method, we have invoked the AdditionOperation method which is defined inside the "arithmeticOperations.js" file. The same holds for others functions too. The result for "Add" button click is as under

Likewise, the other operation too works.

## Conclusion

In this article we have learnt how to use our own JavaScript file in AureliaJS. Hope this will be useful. Thanks for reading. Zipped file attached.

Recommendation
Read GET request using JQuery with Aurelia after this article.

## About the Author

Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team

Login to vote for this post.

#### Comments or Responses

Comment using (Author doesn't get notification)