Real Time Currency Converter by using AngularJS

AngularJS is a JavaScript based framework, which gives us the ability to manipulate HTML dom easily. Today we will learn to create Real Time currency converter by AngularJS. When you wanted to make this project yourself then you must have some basic knowledge of HTML, CSS & JavaScript. By knowing these technologies you can understand this project easily.

So lets start creating our very own real-time currency converter using angularJS.

1. We are creating a basic HTML template, then you can apply CSS in this project for better looking of your website. But I am not applying any CSS for this project.

<!DOCUMENT html>
<html>
  <head>
    <title>Angular DEMO</title>
  </head>
  <body>

  </body>
</html>

2. We need to link AngularJS source link to develop our project.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>

3. We need real-time currency conversion link for real-time REST updates.http://api.fixer.io/latest?base=INR

Now, this fixer.io is providing us premium api. Firstly, You had a need for requirement an access key for accessing the api. First go to fixer.io then signup there. And Take an access key. After then test this codes it will be work.

If you get $10/month plan then It will work fine.

If you want to know more about this APIs then you can read API Information.

When we are creating our Angular app that time in HTML body tag we need to write.

<body ng-app="app">
  <!-- here will writing AngularJS Elements or Directives -->
</body>

Then we need to write some basic js codes. var app = angular.module(“app”,[]); for AngularJS app initialisation.

In between initial directive, we will be writing some input elements and output expression codes in our angular app projects. follow the codes below.

<div ng-controller="ctrl">
    <select ng-model="currencyIndex">
        <option>INR</option>
        <option>USD</option>
        <option>GBP</option>
    </select>
    <input type="text" ng-model="amount"  />
    <p>{{ amtInr | inr }}</p>
    <p>{{ amtUsd | usd }}</p>
    <p>{{ amtGbp | gbp }}</p>
</div>

After then we need to write some js codes as below to create control for it.

var app = angular.module("app",[]);
app.controller('ctrl',function($scope,$http){
    $scope.amount = 1;
    $scope.currencyIndex= 'INR';
    $scope.change = function(){
        $http.get('http://api.fixer.io/latest?base='+$scope.currencyIndex).then(function(res){
            if($scope.currencyIndex == 'INR')
                $scope.amtInr = parseFloat($scope.amount);
            else
                $scope.amtInr = parseFloat($scope.amount) * res.data.rates.INR;

            if($scope.currencyIndex == 'USD')
                $scope.amtUsd = parseFloat($scope.amount);
            else
                $scope.amtUsd = parseFloat($scope.amount) * res.data.rates.USD;

            if($scope.currencyIndex == 'GBP')
                $scope.amtGbp = parseFloat($scope.amount);
            else
                $scope.amtGbp = parseFloat($scope.amount) * res.data.rates.GBP;

            console.log(res);
        });
    }
    $scope.$watch('amount',function(){ $scope.change(); });
    $scope.$watch('currencyIndex',function(){ $scope.change(); });
});

app.filter('inr',function($http){
    return function(val){
    return ('₹₹ '+val);
    };
});
app.filter('usd',function($http){
    return function(val){
    return ('$ '+val);
    };
});
app.filter('gbp',function($http){
    return function(val){
    return ('£ '+val);
    };
});

When we are using this <div ng-controller=”ctrl”> … </div> in HTML tag then we need to initiate on my js coding part app.controller(‘ctrl’,function($scope,$http){ … }); $scope and $http is a predefined variables by Angular. Which called services. $scope is connected to HTML ng-model attribute to js data source and $http get/post header response from server-side informations. app.filter(‘usd’,function(){ … }); this codes adding the symbol in currency display area.

This is all about Currency Converter with AngularJS. Full codes are given below.

Full Codes:-

<!DOCUMENT html>
<html>
<head>
    <title>Angular DEMO</title>
    <script src="https://code.angularjs.org/1.5.7/angular.min.js"></script>
</head>
<body ng-app="app">
<div ng-controller="ctrl">
    <select ng-model="currencyIndex">
        <option>INR</option>
        <option>USD</option>
        <option>GBP</option>
    </select>
    <input type="text" ng-model="amount"  />
    <p>{{ amtInr | inr }}</p>
    <p>{{ amtUsd | usd }}</p>
    <p>{{ amtGbp | gbp }}</p>
</div>
<script>
var app = angular.module("app",[]);
app.controller('ctrl',function($scope,$http){
    $scope.amount = 1;
    $scope.currencyIndex= 'INR';
    $scope.change = function(){
        $http.get('http://api.fixer.io/latest?base='+$scope.currencyIndex).then(function(res){
            if($scope.currencyIndex == 'INR')
                $scope.amtInr = parseFloat($scope.amount);
            else
                $scope.amtInr = parseFloat($scope.amount) * res.data.rates.INR;

            if($scope.currencyIndex == 'USD')
                $scope.amtUsd = parseFloat($scope.amount);
            else
                $scope.amtUsd = parseFloat($scope.amount) * res.data.rates.USD;

            if($scope.currencyIndex == 'GBP')
                $scope.amtGbp = parseFloat($scope.amount);
            else
                $scope.amtGbp = parseFloat($scope.amount) * res.data.rates.GBP;

            console.log(res);
        });
    }
    $scope.$watch('amount',function(){ $scope.change(); });
    $scope.$watch('currencyIndex',function(){ $scope.change(); });
});

app.filter('inr',function(){
    return function(val){
    return ('₹ '+val);
    };
});
app.filter('usd',function(){
    return function(val){
    return ('$ '+val);
    };
});
app.filter('gbp',function(){
    return function(val){
    return ('£ '+val);
    };
});
</script>
</body>
</html>

If you want to know more about AngularJS then visit and check Training in Angular Training page.

Shibaji Debnath