AJAX Currency Converter with Google API

Fraz Ahmed — Fri, 27 Aug 2010 15:42:03 +0000

No doubt, Google is a magical search engine. Google also provides many APIs to be incorporated in your application. Today, we will use Google’s hidden currency conversion API. Why hidden? Because there is no official documentation for it.

We will build a currency converter from scratch, it pulls data from Google and display the results using jQuery AJAX function. For you better understanding, you may visit demo or download source code below:

Basically our whole code consist of three components – HTML for displaying interface, Javascript for AJAX functionality and PHP for fetching and manipulating conversion results from Google.

HTML Structure

HTML structure for this application is simple enough. There are two drop downs, one input field, one button and a div for displaying results. Drop downs are used for selecting From Currency and To Currency while input field is used for entering the desired amount to be converted in your selected currency. Conversion result displays in results div once you click on convert button. When you click on the button, it fires a Javascript function which is described below.

Javascript

Following is the code for our AJAX enabled javascript. Below code is executed upon clicking on convert button.


$(document).ready(function() {

 $('#convert').click(function(){

 //Get all the values
 var amount = $('#amount').val();
 var from = $('#fromCurrency').val();
 var to = $('#toCurrency').val();

 //Make data string
 var dataString = "amount=" + amount + "&from=" + from + "&to=" + to;

 $.ajax({
 type: "POST",
 url: "ajax_converter.php",
 data: dataString,

 success: function(data){
 //Show results div
 $('#results').show();

 //Put received response into result div
 $('#results').html(data);
 }

 });
 });
});

Above code is very simple and should be self explanatory, if you are familiar with jQuery AJAX function. For those who does not know, what’s going on here I tr to explain them.

$(‘#convert’).click(function… this is the starting point of our code, it means that execute the underneath code of this function when an element with id of ‘convert’ is clicked. In our case this id is used for ‘convert’ button.

After that we grab values from our HTML elements by using .val() function of jQuery and assign these values into Javascript variables. These variables are then used in dataString variable.

In our AJAX function we are using POST method and in ‘url’, we provide the url of our PHP file which will provide conversion results back to this AJAX function. We are sending ‘dataString’ as data to our PHP script.

After successful iterating to our PHP script, this AJAX function first shows our results div and out the received data into our results div as HTML.

PHP Code

The brain of our application is below PHP code.

Above code is well commented to make you understand better. In this code we are using some built-in PHP functions – file_get_contents, explode, round and ucwords.

In start we grab the values posted to this script by our AJAX function. We store these values into variables.
We make a string variable using above explained variables.
We concatenate this string variable to Google Currency Calculator API url and store the url in a new variable named $google_url.
We fetch the data of $google_url to $result variable using PHP’s file_get_contents function.
We receive data from Google something similar to
{lhs: “1 Euro”,rhs: “1.2692 U.S. dollars”,error: “”,icc: true}
Using PHP’s explode function, we separate lhs and rhs from the received response.
From rhs we get the converted value and multiply it by our dsired amount to get total conversion.
Using PHP’s round function, converted amount is round off to two digits.
After this we use PHP’s ucwords function to Capitalize our text’s first letter.
We almost do the same for lhs.
At last we make results by joining lhs and rhs and echo it to give the results back to our AJAX function.

Last words

In the source code I have applied some CSS to make the user interface better. So don’t be puzzled with the code in source file.

Finally, you have a working Live Currency Converter. You may use this script in your website to attract more visitors. Just play around the code and let me know if you can enhance it further. Please feel free to ask, your comments are always welcome.

If you like this article, please share it on your favorite website. It may help someone somewhere!

Detect Javascript and Flash Enabled

Fraz Ahmed — Wed, 06 Jan 2010 18:56:07 +0000

Javascript and Flash are super tools to enhance the usability of your website. You put a lot of efforts to create beautiful form validation and an attractive flash animation. But all the efforts are ruined when the visitor of your website has disabled Javascript or does not have flash plugin installed. Here I’ll provide you a little solution to escape from this problem.

First Tactic – Detect Javascript Enabled

Our first step is to detect whether visitor has Javascript enabled or not. If Javascript is not enable, we will redirect user to an error/instruction page (I create a seperate page where I give instructions to visitor that how to enable Javascript in his/her browser).

Put below code just after the tag in your web page:

Above code is executed if Javascript is disabled and redirect user to error-javascript.php. We are using tag for redirection. If Javascript is not disabled, above code will not be executed.

Second Tactic- Detect Flash Plugin Installed

There is a Javascript solution to detect Flash Plugin Installed and replace Flash animation with your custom message. In order to accomplish the said task you need to place below Javascript instead of your normal embedded code:

Above code detect for Version 9 or greater version of flash plugin. If flash plugin is detected it displays flash animation (animation.swf) else it displays an image (replaced-image.png) instead of flash animation. In the place of image you can write more text and instructions. Everything is upto on you.

Don’t forget to share the post on your favorite website. It may also help someone somewhere.

Tech Mug » Javascript