AJAX Currency Converter with Google API

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.

<?php
//Get Posted data
$amount = $_POST['amount'];
$from = $_POST['from'];
$to = $_POST['to'];

//make string to be put in API
$string = "1".$from."=?".$to;

//Call Google API
$google_url = "http://www.google.com/ig/calculator?hl=en&q=".$string;

//Get and Store API results into a variable
$result = file_get_contents($google_url);

//Explode result to convert into an array
$result = explode('"', $result);

################################
# Right Hand Side
################################
$converted_amount = explode(' ', $result[3]);
$conversion = $converted_amount[0];
$conversion = preg_replace('/[x00-x08x0B-x1F]/', '', $conversion);
$conversion = $conversion * $amount;
$conversion = round($conversion, 2);

//Get text for converted currency
$rhs_text = ucwords(str_replace($converted_amount[0],"",$result[3]));

//Make right hand side string
$rhs = $conversion.$rhs_text;

################################
# Left Hand Side
################################
$google_lhs = explode(' ', $result[1]);
$from_amount = $google_lhs[0];

//Get text for converted from currency
$from_text = ucwords(str_replace($from_amount,"",$result[1]));

//Make left hand side string
$lhs = $amount." ".$from_text;

################################
# Make the result
################################

echo $lhs." = ".$rhs;
?>

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!