Simple Currency Converter in Angularjs

Published on April 27, 2015

I believe instead of working on large application start with a small real-time app to learn new technology. Here I created a tiny app. This app converts a value from one currency to another currency. Before we start anything big thanks to //fixer.io/. Fixer will a JSON API for foreign currency exchange. It will give you current as well as historical exchanges rates.

We will take help from Fixer to get current exchange rates. We can use mony.js to convert the currency from one to another but I rather like to drive my own logic for conversion.

Demo download

Now, let’s jump into the app. I’m using twitter bootstrap to design UI. We will have two select boxes and two input box. The select boxes will show all possible currency, in one input box will be used for input value to be converted and other for output converted value. Let’s see the UI.

index.html(setup)

<!DOCTYPE html>
<html lang="en" data-ng-app="ForEx">
  <head>
    <meta charset="UTF-8" />
    <title>Currency Converter in Angular</title>
    <!-- Latest compiled and minified CSS & JS -->
    <link
      rel="stylesheet"
      media="screen"
      href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"
    />
  </head>

  <body>
    <div class="container">
      <div class="page-header">
        <h1>NG ForEx</h1>
      </div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <script type="text/javascript" src="app.js"></script>
  </body>
</html>

here, we have twitter bootstrap and angular CDN links. At html tag, we initiating our app ForEx (You will see how we created this in app.js)

index.html

<div class="row">
  <div class="col-xs-5 col-sm-5 col-md-5 col-md-offset-3">
    <div class="panel panel-default" data-ng-controller="ConvertCtrl">
      <div class="panel-body">
        <form action="" method="POST" role="form">
          <legend>Currency Converter</legend>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
              <label for="">From</label>
              <select
                ng-model="fromType"
                class="form-control"
                required
                data-ng-change="forExConvert()"
                ng-options="k for (k, v) in rates track by v"
              >
                <option value="">--Select--</option>
              </select>
            </div>
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
              <label for="">To</label>
              <select
                ng-model="toType"
                class="form-control"
                required
                data-ng-change="forExConvert()"
                ng-options="k for (k, v) in rates track by v"
              >
                <option value="">--Select--</option>
              </select>
            </div>
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
              <label for="">From Value</label>
              <input
                type="number"
                class="form-control"
                placeholder="Enter value"
                data-ng-model="fromValue"
                data-ng-change="forExConvert()"
              />
            </div>
          </div>
          <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6">
            <div class="form-group">
              <label for="">To Value</label>
              <input
                type="text"
                class="form-control"
                placeholder="Enter value"
                data-ng-model="toValue"
                data-ng-change="forExConvert()"
              />
            </div>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

Here we created a simple form using bootstrap and also attached models to all our HTML controls.

app.js

angular.module("ForEx", []).controller("ConvertCtrl", [
  "$scope",
  "$http",
  function($scope, $http) {
    $scope.rates = {};
    $http.get("//api.fixer.io/latest?base=ZAR").then(function(res) {
      $scope.rates = res.data.rates;
      $scope.toType = $scope.rates.INR;
      $scope.fromType = $scope.rates.USD;
      $scope.fromValue = 1;
      $scope.forExConvert();
    });
    $scope.forExConvert = function() {
      $scope.toValue =
        $scope.fromValue * ($scope.toType * (1 / $scope.fromType));
      $scope.toValue = $scope.toValue;
    };
  }
]);

Since this is a very tiny app we will have only one controller. First of all, we will use angular $http service (All angular service are nothing but javascript objects or functions). to fetch all base rates and available currency from //fixer.io API. forExConvert will be used for converting currency from one to another.