Here's a simple, but functional, AJAX based currency converter based on the this api: https://www.mashape.com/warting/currency-converter.
You'll need to get an API key before you can use it (It's free). Here's the CFM file:
<!DOCTYPE html>
<html>
<head>
<title>AJAX powered currency converter</title>
<cfajaxproxy cfc="currency" jsclassname="jscfc">
<script>
function convertCurrency(){
document.getElementById("final").innerHTML = "Please wait, doing magic...";
var e = document.getElementById("currency");
var selCurrency = e.options[e.selectedIndex].value;
var jscfcInst = new jscfc();
jscfcInst.setCallbackHandler( updateSpan );
jscfcInst.convert(target=selCurrency,amount=document.getElementById('amount').value);
};
function updateSpan(result) {
document.getElementById("final").innerHTML = result;
};
</script>
<style>
#leftie{
width:80px;
padding-right:40px;
display:inline-block;
text-align:right;
}
</style>
</head>
<body>
<h3>Currency converter</h3>
<div>
<span id="leftie">From:</span> USD<br />
<span id="leftie">Amount:</span> <input id="amount"><br />
<span id="leftie">To currency:</span> <select id="currency"><option value="EUR">Euro</option><option value="SEK">SEK</option></select><br />
<br />
<span id="leftie">Result:</span> <span id="final"></span><br />
<span id="leftie"><button onClick="convertCurrency();">Convert</button></span>
</div>
</body>
</html>
There's not a whole lot here!
We'll also need the cfc file, here it is (And don't forget to replace the YOURAPIKEY with your api key..), save it as currency.cfc in the same folder as your cfm file.
<cfcomponent>
<cffunction name="convert" access="remote" returntype="string">
<cfargument name="target" required="yes">
<cfargument name="amount" required="yes">
<cfhttp url="https://currencyconverter.p.mashape.com/?from_amount=#arguments.amount#&from=USD&to=#arguments.target#">
<cfhttpparam type="header" name="X-Mashape-Authorization" value="YOURAPIKEY">
</cfhttp>
<cfset var theResult = DeserializeJSON(cfhttp.filecontent)>
<cfreturn NumberFormat(theResult["to_amount"],"0.000")>
</cffunction>
</cfcomponent>
And that's it!
So what are we doing?
We're using IDs to grab the values for the amount and which currency to convert from USD into, then we send that to the convert function in the cfc, which sends the values to the api, converts the response to a struct and then returns the to_amount formatted to display up to 3 decimals.
When that's returned, we replace the text in the span ID with the new value.
Tested on OpenBD, but there's nothing fancy here at all, just some basic AJAX for those who are curious, should work on all engines (Should.. but not tested)
No comments:
Post a Comment