Simple currency conversion using js, etc.

763 views
Skip to first unread message

Julian Sortland

unread,
Aug 30, 2017, 9:13:31 AM8/30/17
to sydney-h...@googlegroups.com
For a Ham Radio exam related page I am writing I want to display a conversion from USD 15 to AUD, at a current, or at least recent rate, ideally just a line like:

The USD 15.00 fee currently converts to approximately AUD 18.97.

Sites such as maths.js = http://mathjs.org/examples/browser/currency_conversion.html.html and money.js offer long howtos on calculator widgets, and sites such as http://fixer.io/ offer conversion data.


The other option is to include a pre-built calculator.  Some are offered as advertising for currency exchange companies, but are either large, or failed to work once included in the page source.

The one I like, but which failed required the following code to be added into the body of the document, 

<!--Begin Currency Converter Code-->
<div id="FEXRdiv"></div>
<script type="text/javascript">
var FEXR_c = "USD", FEXR_a = "AUD", FEXR_amt = 15, FEXR_size = 728, FEXR_panel = 5, FEXR_button = 6;
</script>
<script type="text/javascript" src="//www.foreignexchangeresource.com/converterB.js"></script>
<!--End Currency Converter Code-->

It works on the site where you set it up, so I presume there must be further code which has to go into the <head> area to make it work:



Julian.

====================================================
Julian Sortland, VK2YJS, AG6LE.

Matt Callow

unread,
Aug 30, 2017, 9:39:29 AM8/30/17
to robodino
The src attribute looks wrong. missing http:

--
You received this message because you are subscribed to the Google Groups "Robots & Dinosaurs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sydney-hackspace+unsubscribe@googlegroups.com.
To post to this group, send email to sydney-hackspace@googlegroups.com.
Visit this group at https://groups.google.com/group/sydney-hackspace.
For more options, visit https://groups.google.com/d/optout.

Madox

unread,
Aug 30, 2017, 10:33:54 AM8/30/17
to Robots & Dinosaurs
Attached to Matt's observation, be mindful of cross site scripting limitations. I.e you probably can't call up a JavaScript resource from another domain different to that of where your HTML is being served.

Ctrl-shift-j on Chrome will probably give you hints on what's going wrong.

Iain Chalmers

unread,
Aug 30, 2017, 7:18:46 PM8/30/17
to sydney-h...@googlegroups.com
On 30 August 2017 at 23:39, Matt Callow <matt....@gmail.com> wrote:
The src attribute looks wrong. missing http:

That's a "protocol relative url" - the browser will automatically use http: ir https: depending on the protocol of the page it's embedded in.


Current thinking is to not use these, because you should be serving everything over https and intentionally breaking insecure http connections... 

big



--
"I say we take off and nuke the entire site from orbit.
That's the only way to be sure." - Ellen Ripley

Matt Callow

unread,
Aug 30, 2017, 7:37:11 PM8/30/17
to robodino
Interesting. I didn't know about protocol relative URLs.

I just tested this from a local file and it doesn't work. Because the
protocol for the page is file://
So it tries to load the JavaScript from file://, which fails
If I fix the code snippet to use
https://www.foreignexchangeresource.com/converterB.js , it still does
not work.
The reason is that the converterB.js script tries to load another page
using a protocol relative URL (which fails)

But if you serve it from a web server, then it works OK.

Matt
>> email to sydney-hackspa...@googlegroups.com.
>> To post to this group, send email to sydney-h...@googlegroups.com.
>> Visit this group at https://groups.google.com/group/sydney-hackspace.
>> For more options, visit https://groups.google.com/d/optout.
>>
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "Robots & Dinosaurs" group.
>> To unsubscribe from this group and stop receiving emails from it, send an
>> email to sydney-hackspa...@googlegroups.com.
>> To post to this group, send email to sydney-h...@googlegroups.com.
>> Visit this group at https://groups.google.com/group/sydney-hackspace.
>> For more options, visit https://groups.google.com/d/optout.
>
>
>
>
> --
> "I say we take off and nuke the entire site from orbit.
> That's the only way to be sure." - Ellen Ripley
>
> --
> You received this message because you are subscribed to the Google Groups
> "Robots & Dinosaurs" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to sydney-hackspa...@googlegroups.com.
> To post to this group, send email to sydney-h...@googlegroups.com.

Iain Chalmers

unread,
Aug 30, 2017, 7:56:20 PM8/30/17
to sydney-h...@googlegroups.com
Here's a simple pure Javascript solution that uses api.fixer.io to grab the exchange rate. 

It grabs the USD value from inside the <span id="USD"> tag - and it's assuming it can convert that to a number (so leave the dollar sign outside that tag).

It'll only display the conversion if it gets a 200 OK response from the external API.

It would have much better error checking and validation if I were deploying this into production for a client, but I've left that out to make who this works as clear as I could...

If you save this to a file called something like test.html, and open that file in a browser - it should "just work". If you uncomment the two console.log statements you can see what's going on in the dev tools javascript console.

big

<html><head><title>Foo!</title>
<script>
function convert(){  
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
           //console.log(xhttp.responseText)
           let xrate = JSON.parse(xhttp.responseText);
           //console.log("Rate = " + xrate.rates.USD + " as of " + xrate.date)
           if (xrate.rates.USD){
               var usd = parseFloat(document.getElementById("USD").innerHTML)
               var aud = usd / xrate.rates.USD
               document.getElementById("AUD").innerHTML = " (approx $AUD" + aud.toFixed(2) + " as of " + xrate.date + ")"
           }
        }
    };
    xhttp.open("GET", "http://api.fixer.io/latest?base=AUD&symbols=USD", true);
    xhttp.send();
}
</script>
<body onload="convert();">

USD $<span id="USD">15.00</span> <span id="AUD"></span>

</body></html>

--
You received this message because you are subscribed to the Google Groups "Robots & Dinosaurs" group.
To unsubscribe from this group and stop receiving emails from it, send an email to sydney-hackspace+unsubscribe@googlegroups.com.
To post to this group, send email to sydney-hackspace@googlegroups.com.

Visit this group at https://groups.google.com/group/sydney-hackspace.
For more options, visit https://groups.google.com/d/optout.

Julian Sortland

unread,
Sep 2, 2017, 9:55:15 AM9/2/17
to sydney-h...@googlegroups.com
Thanks, I will have a play with the code, but it looks great.

Julian.
====================================================
Julian Sortland, ALIATec, VK2YJS, AG6LE.

Ph:  0429 470 672

123 North Street
OBERON  NSW  2787
AUSTRALIA
Reply all
Reply to author
Forward
0 new messages