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.