Basic Arithmetic Calculator using our own JavaScript file in AureliaJS

Rajnilari2015
Posted by in Aurelia category on for Beginner level | Points: 250 | Views : 434 red flag
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.


 Download source code for 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.
Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,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

Login to post response

Comment using Facebook(Author doesn't get notification)