How To Create An Exchange Rate Money Converter With Money.js

Update: 19/10/2012 You now have pay for the open exchange rates API. If you want to use this code on any future projects you will need to signup for an API key https://openexchangerates.org/signup. For this reason the demo on this pay will no longer work. The code is still valid but you will need to buy an API key.

In today's tutorial we are going to work with a Javascript library which allows you to easily deal with money in any web application.

This JavaScript file will allow you to create an online application to easily convert from one currency to another using only one function.

Update To Date Values

This file keeps up to date with the ever changing exchange rates in currency by using the Open Source Exchange API. The API service will simply get all the latest exchange rates once an hour from the Google Calculator API and store the results in a JSON format repository on Github.

Download

The money.js comes with 2 download types the full version or the minified version.

This would mean static setting of the exchange rates which is one of the problems with converting the exchange rates. Therefore you need to access the Open Source Exchange Rates from the API via AJAX call so you can get the up to date exchange rates.

The problem with getting the values is way is that your page will return before the exchange rates have been populated from the API, so your visitors could make changes before the rates have been setup. The better option is to use the server side to populate these variables.

The problem comes if you have other libraries also using the namespace fx, you can get function conflict errors. To get around this you need to change the namespace being used by money.js.

// Assign the money.js library to a global money object:
var money = fx.noConflict();
// `fx` is now back to whatever it was before money.js was loaded, and you can still use the library via the `money` reference, like so:
money.convert(5318008);
money.settings.from = "JPY";
money(5318008).to("HKD");

Creating A Currency Exchange Application

Now we know that we can use the money.js to convert different currencies we can easily use this to make a web application to do this for us.

We also need to make a function to create a drop down of all the currencies, the following will make a call to the API, return all currencies, loop through them and create options for the select dropdown.

Creating The Form

Below is the HTML that we are using for our application as you can see where we are including the javascript files we call the PHP functions we created to above. This will populate the fx.rates variable and the fx.base variable with the data from the open source exchange API.

We are creating a form to use on our application we need two textboxes, two select boxes and a button. For the select boxes options we are using the other PHP function created above to populate it with all of currencies available.

I have started to use Github for my demo files so you can now download all my newest tutorials from github. This is the first one available demo. Please follow me on Github to stay up to date with all new demos.