currency converter using javascript

Currency conversion using javascript and openexchangerates.org JSON API

In this short tutorial we will learn how to build a simple currency converter in javascript using free real-time exchange rates provided by Open Exchange Rates.

This tutorial will require a basic understanding of javascript, AJAX, and the JSON data format.
Lets begin!

Real-time currency conversion rates, for free?

OpenExchangeRates.org really does provide real-time updated currency conversion rates for over 160 currencies absolutely free of cost for personal usage. However, for commercial applications, their paid plans aren’t too expensive either.
For the scope of this article, we will be using only the free API which can be accessed once you register and request your App ID for free from here

Once you have received your App ID, lets get coding.

The API and returned data

The URI of the currency API is:


http://openexchangerates.org/latest.json

Parameters

app_id: your App ID that you received when you signed up.
base: to specify a base currency (paid feature)

The returned JSON data looks something like:

{
    "disclaimer": "Exchange rates provided for informational purposes only, with no guarantee whatsoever of accuracy, validity, availability, or fitness for any purpose; use at your own risk. Other than that, have fun! Usage subject to acceptance of terms: http://openexchangerates.org/terms/",
    "license": "Data sourced from various providers with public-facing APIs; copyright may apply; not for resale; no warranties given. Usage subject to acceptance of license agreement: http://openexchangerates.org/license/",
    "timestamp": 1349978408,
    "base": "USD",
    "rates": {
        "AED": 3.673269,
        "AFN": 51.400767,
        "ALL": 108.275499,

        ..... many, many currencies ...

        "ZMK": 5146.528026,
        "ZWL": 322.387247
    }
}

Also a list of currency codes and their name is also available in JSON format at http://openexchangerates.org/currencies.json

Querying data using jQuery AJAX

Now we will query the API using jQuery AJAX :

app_id="xxxxxxxxxxxxxxxxxxxxxxxxxx"; // your unique app id goes here
uri=encodeURI("http://openexchangerates.org/latest.json?app_id="+app_id);

$.get(uri,function(json) {
// the returned data is available in the json object within the scope of this function
// rates are available in json.rates as properties with their 3 letter international currency short-codes
// Eg. get the value of 1 EUR to base currency (by default USD) :
euro=json.rates.EUR;

},"jsonp");

The returned data has a list of 160 currencies with their relative value to USD by default.
The base currency too can be changed by adding the base parameter to URI but it is available only for paid users, so we will skip that

Performing any currency to any currency conversion

Once the data is available ,for converting a from a base currency other than USD, it is not neccessary to query the API for base currency, we can still perform the conversion quite easily by their relative values to USD.
Here is how:

// set your new base currency
my_base="EUR";

// set currency to convert to
my_destination="INR";

// base amount to convert
amount=100;

converted_amount=(amount/json.rates[my_base])*json.rates[my_destination];

alert(converted_amount);

What we are doing is converting the base amount to USD then multiplying it with the current rate of destination currency which is relative to USD.
In the above example, we converted amount from EUR to INR.
In real world implementation, it may happen that you may read the base currency as well as the destination currency from user using a html drop down or some other way, that time you can access the rate of that particular currency by iterating over the properties of rates object using a for loop as follows:

for(currency in json.rates) {
 if(currency===destination_currency) {
// perform conversions now
}
}

HTML drop down for all currencies

Here is a handy html snippet for implementing html drop downs for all currencies. The value attributes contain the 3 letter currency short-codes as their value.


Check out our own currency converter that uses the same API here:
http://dynamicguru.com/currency-converter/

For more information, check out the official documentation for the API

3 responses to this entry

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

2018 All rights reserved | Powered by WordPress
Back to top
Theme by dynamicguru.com