forked from openexchangerates/money.js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
445 lines (364 loc) · 28.6 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>money.js / fx() - javascript currency conversion library</title>
<meta name="description" content="money.js is a tiny (1kb) javascript library for real-time currency conversion">
<meta name="author" content="Joss Crowcroft">
<link rel="shortcut icon" href="http://josscrowcroft.github.com/money.js/favicon.ico" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="canonical" href="http://josscrowcroft.github.com/money.js/" />
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-17884149-3']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<link rel="stylesheet" href="demo-resources/style.css">
<link rel="stylesheet" href="http://josscrowcroft.github.com/javascript-sandbox-console/src/sandbox.css">
</head>
<body>
<!--
$$$$$
$$$$$
$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$ $$$$$ $$$$$$$
$$$$$$ $$$$$ $$$$$$$
$$$$$$ $$$$$ $$$$$$
$$$$$$ $$$$$
$$$$$$ $$$$$
$$$$$$ $$$$$
$$$$$$$$ $$$$$
$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$
$$$$$ $$$$$$$$$$
$$$$$ $$$$$$$
$$$$$ $$$$$$
$$$$$ $$$$$$
$$$$$$$ $$$$$ $$$$$$$
$$$$$$ $$$$$ $$$$$$$
$$$$$$$ $$$$$ $$$$$$$$
$$$$$$$$ $$$$$ $$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$$$$$$$$$$$$$$$$
$$$$$$$
$$$$$
$$$$$
-->
<div id="container">
<header class="clearfix">
<h1>money.js<span> / fx()</span></h1>
<h2>JavaScript currency conversion library, done right - with no dependencies, in just over 1 kb.</h2>
<p>Designed to work seamlessly with data from the <strong><a href="http://openexchangerates.org/" title="Free JSON Currency Conversion Exchange Rates API" target="_blank">Open Exchange Rates API</a></strong> project - but can easily use any data source and base currency with just a few lines of setup. And it works as a nodeJS/npm and RequireJS (AMD) module, too. Yay!</p>
</header>
<div id="main" role="main">
<pre class="prettyprint lang-js">// From any currency, to any currency:
fx.convert(12.99, {from: "GBP", to: "HKD"});
// Chaining sugar:
fx(1000).from("USD").to("GBP");
fx(1000).to("AED");
// With simple settings and defaults, making this possible:
fx.convert(5318008);
fx(5318008).to("AED");
// Can also be used as a <strong>nodeJS/npm</strong> or <strong>requireJS/AMD</strong> module
var fx = require("money");
require(["money"], function(fx) { /* ... */ });
// Read more below or jump to the <strong><a href="#download" title="download money.js">downloads</a></strong>, <strong><a href="#playground" title="demo sandbox">demo playground</a></strong> or <strong><a href="#documentation" title="money.js documentation">documentation</a></strong>
// by <strong><a href="http://twitter.com/josscrowcroft" title="joss crowcroft twitter" target="_blank">@josscrowcroft</a></strong></pre>
<p><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="josscrowcroft" data-url="http://josscrowcroft.github.com/money.js" data-text="money.js - tiny javascript library for real-time currency conversion" target="_blank">Tweet</a> <g:plusone size="medium"></g:plusone></p>
<h3>JavaScript Currency Conversion should be easy!</h3>
<p>Forget trying to adapt those 10-year-old <em>"FREE Currency Converter JavaScripts!"</em> into something workable for your enterprise software or shopping cart: <strong>money.js</strong> is a simple library with one function: to convert a value from any currency to any other currency.</p>
<p>Read on for some background information (recommended!) or jump straight to the <strong><a href="#download" title="download money.js">downloads</a></strong>, <strong><a href="#playground" title="demo sandbox">demo playground</a></strong> or <strong><a href="#documentation" title="money.js documentation">documentation</a></strong>.</p>
<h4>Introduction</h4>
<p>First things first: in order to do currency conversion in JavaScript, you need a reliable source of real-time exchange rates. The industry-standard exchange rate APIs, which people use to make currency trades, may cost anywhere between $100 and $1,000 per month for access!</p>
<p>The fact is though, 99% of apps and shopping carts <em>don't need</em> this expensive level of accuracy!</p>
<p>With that in mind, the <strong><a href="http://openexchangerates.org" title="Free Real-time Exchange Rates JSON API" target="_blank">Open Exchange Rates API</a></strong> uses algorithmic blending to calculate a consistently accurate and unbiased set of rates for 160 world currencies - and costs 10-20x less than the most popular competitor (with a <em>Forever Free</em> plan for most users).</p>
<p>Also, money.js allows you to use <em>any</em> source of exchange rates.</p>
<p>In the <strong><a href="#documentation" title="money.js documentation">documentation</a></strong>, there are examples showing how to integrate the API data (or any exchange-rate data) with the library, in only a few lines of code.</p>
<p>You only need the conversion rates relative to any single currency, in order to be able to convert values between any other two currencies; <strong>money.js</strong> does it all for you.</p>
<h3 id="download">Downloads</h3>
<p>NB: these links always point to the latest stable version of money.js:</p>
<h4>» <strong><a href="http://josscrowcroft.github.com/money.js/money.js" title="money.js (development, uncompressed)" target="_blank">money.js</a></strong> <span>development version (4.3 kb)</h4>
<h4>» <strong><a href="http://josscrowcroft.github.com/money.js/money.min.js" title="money.min.js (production, minified)" target="_blank">money.min.js</a></strong> <span>production/minified version (1.1 kb)</h4>
<p>There are more download options available on the GitHub repository, at <strong><a href="https://github.com/josscrowcroft/money.js/" title="josscrowcroft/money.js on GitHub">josscrowcroft/money.js</a></strong>.</p>
<h3 id="playground">Demo Playground</h3>
<p>Oh hey! You can use this JavaScript Sandbox to play around with money.js and kick the tires a bit. It's running in a separate (sandboxed) scope, but you have access to jQuery (<code>$</code>), underscore (<code>_</code>), accounting.js (<code>accounting</code>) and money.js (<code>fx</code>).</p>
<p>You can use <code>:load <em>script.js</em></code> to load extra libraries, or try <code>:help</code> if stuck.</p>
<p>Exchange rates should be set up already (defaults = <code>from: "USD"</code>, <code>to: "GBP"</code>) but if not, try refreshing the page. There are some sample commands to try out below!</p>
<!-- JS Sandbox Console [http://josscrowcroft.github.com/javascript-sandbox-console/] -->
<div id="sandbox">sandbox console loading...</div>
<h5>Some sample commands to get you started:</h5>
<p id="sample-commands"></p>
<p><em>Interested in putting the sandbox on your JavaScript library homepage? It's on GitHub at <strong><a href="http://josscrowcroft.github.com/javascript-sandbox-console/" title="JS Sandbox Console" target="_blank">josscrowcroft/javascript-sandbox-console</a></strong>!</em></p>
<h3 id="documentation">Documentation</h3>
<ul>
<li><strong><a href="#basic-install" title="">Basic installation</a></strong></li>
<li><strong><a href="#fx.rates" title="">Setting up exchange rates with fx.rates</a></strong></li>
<li><strong><a href="#fx.settings-fxSetup" title="">fx.settings</a></strong></li>
<li><strong><a href="#fx.convert" title="">fx.convert()</a></strong></li>
<li><strong><a href="#fx.noConflict" title="">fx.noConflict()</a></strong></li>
<li><strong><a href="#chaining-fx" title="">Chaining with fx(val)</a></strong></li>
<li><strong><a href="#accounting.js" title="">Usage with 'accounting.js'</a></strong></li>
<li><strong><a href="#nodeJS-npm" title="">Usage in nodeJS/npm</a></strong></li>
<li><strong><a href="#amd-requirejs" title="">Usage as a RequireJS/AMD module</a></strong></li>
</ul>
<h4 id="basic-install">Basic Installation</h4>
<p>You've probably figured this one out, but here's how to use money.js as a standalone library (for modules and script loaders, there are guides lower down.) Just <strong><a href="#download" title="download money.js">download</a></strong> the minified or development version of money.js, and include it like this:</p>
<pre class="prettyprint"><script src="path/to/money.js"></script></pre>
<p>You'll need to do one more thing before you can use it, though, which is...</p>
<h4 id="fx.rates">Setting up exchange rates with fx.rates</h4>
<p>First and foremost, to convert currencies, you're going to need some exchange rates, and a <code>base</code> currency. (As long as you have exchange rates for every currency relative to one single other ('base') currency, money.js can convert between <em>any two</em>, without going via the <code>base</code>. See <code>fx.convert</code> for details on that.)</p>
<p>The library doesn't really care which format you use for the currency names (but standard three-letter codes are recommended), nor how accurate they are or which currency is your <code>base</code> rate - all that matters is the object format, shown below.</p>
<p>Rates are stored in the <code>fx.rates</code> object, while the <code>base</code> currency is stored in <code>fx.base</code>. They look kinda like this:</p>
<pre class="prettyprint">fx.base = "USD";
fx.rates = {
"EUR" : 0.745101, // eg. 1 USD === 0.745101 EUR
"GBP" : 0.647710, // etc...
"HKD" : 7.781919,
"USD" : 1, // always include the base rate (1:1)
/* etc */
}</pre>
<p>You can include as many or as few currencies as you need, and the rates can be approximate, historical or just plain wrong (though I wouldn't recommend it!)</p>
<p>NB: you need to include the <code>base</code> rate (the currency code from <code>fx.base</code>) in <code>fx.rates</code> object as well, for example <code>"USD" : 1</code>, so that money.js can use it for its calculations.</p>
<p>But wait! Where do these exchange rates come from?</p>
<p>You can use the latest rates from the <strong><a href="http://openexchangerates.org" title="Exchange Rates JSON API, free currency data" target="_blank">Open Exchange Rates</a></strong> API, which are delivered in JSON format, ready for use with money.js. You'll need to <strong><a href="http://openexchangerates.org" title="Open Exchange Rates Free App ID Sign-up" target="_blank">sign up</a></strong> for an App ID, and you can choose whichever option you need (there is a generous <em>Forever Free</em> plan.)</p>
<p>You could cache the rates on your server, then bootstrap them inline into the HTML - but you can also easily load them in via AJAX, or a script loader. With jQuery, you could do this:</p>
<pre class="prettyprint lang-js"><script type="text/javascript">
// Load exchange rates data via AJAX:
$.getJSON(
// NB: using Open Exchange Rates here, but you can use any source!
'http://openexchangerates.org/api/latest.json?app_id=<em>[YOUR APP ID]</em>',
function(data) {
// Check money.js has finished loading:
if ( typeof fx !== "undefined" && fx.rates ) {
fx.rates = data.rates;
fx.base = data.base;
} else {
// If not, apply to fxSetup global:
var fxSetup = {
rates : data.rates,
base : data.base
}
}
}
);
</script></pre>
<p>AJAX works great, but you'll need to wait until the AJAX request has completed before you can get converting. Therefore you should have a plan B, for example, inlining the approximate/cached exchange rates which could be used while the AJAX request is loading.</p>
<p>You could also skip using AJAX and use the slightly more reliable bootstrapping method - which will also require fewer API requests - using CURL or some other library to grab the file, then printing them out in a script tag.</p>
<p>This works in any language or framework, but here's a PHP example:</p>
<pre class="prettyprint lang-php"><?php
// Bootstrap loaded exchange rates into JavaScript for money.js:
echo '<script>fx.rates = ' . json_encode($exchangeRates->rates) . '; fx.base = ' . json_encode($exchangeRates->base) . '</script>';
?></pre>
<p>There are more examples and methods of grabbing the latest (and historical) data, for all the most common languages and frameworks, on the <strong><a href="http://openexchangerates.org" title="Open Exchange Rates - Free JSON Currency Conversion" target="_blank">Open Exchange Rates</a></strong> site (check out the documentation).</p>
<p>Whichever API or data source you use, all you need to make certain of is that there is a <code>base</code> currency, and that the exchange rates are in the object format given above.</p>
<h4 id="fx.settings-fxSetup">fx.settings and fxSetup</h4>
<p>You can use <code>fx.settings</code> to set default <code>from</code> and <code>to</code> currencies, after the library has loaded. If you want or need to set these before the library has loaded, create a global object called <code>fxSetup</code>, with the same properties:</p>
<pre class="prettyprint">// Using `fx.settings` (must be after loading the library)
fx.settings = {
from : "GBP",
to : "AED"
};
// Using `fxSetup` (must be before loading the library; see note)
var fxSetup = {
from : "GBP",
to : "AED"
};</pre>
<p><strong>Note about using fxSetup:</strong> If using <code>fxSetup</code>, the variable needs to be available to the library (in scope) - so use <code>window.fxSetup</code> if needed. Also note that the fxSetup method won't work if using money.js as an AMD / CommonJS module, because it won't have access to outside variables (so use <code>fx.settings</code> for those).</p>
<p>Oh, and you can also use <code>fxSetup</code> to load in the exchange rates and <code>base</code> currency before loading the library, which would look something like this:</p>
<pre class="prettyprint">// Adding exchange rates and base currency to `fxSetup`:
var fxSetup = {
from : "GBP",
to : "AED",
base : "USD",
rates : {
"AED" : 3.672905
/* etc. */
}
};</pre>
<h4 id="fx.convert">fx.convert(val, <em>[opts]</em>)</h4>
<p>The basic function of the library - converts a value from one currency to another. Uses the default <code>from</code> and <code>to</code> currencies in <code>fx.settings</code>, or those given in <code>opts</code>:</p>
<pre class="prettyprint">// Using defaults:
fx.settings = { from: "USD", to: "GBP" };
fx.convert(1000); // 647.71034
// With options:
fx.convert(1000, {to: "HKD"}); // 7781.91949 (default `from` currency)
fx.convert(1000, {from: "GBP", to: "HKD"}); // 12014.50549</pre>
<p><code>fx.convert</code> can convert from any currency to any currency, provided they're both in the <code>fx.rates</code> object. For example, if all rates are relative to USD (1:1), and you have the rate for <code>USD:GBP</code> and <code>USD:HKD</code>, you can specify <code>{from: "GBP", to: "HKD"}</code> - money.js will figure out the rate between the two currencies.</p>
<h5>Currency names</h5>
<p>Currency names directly reference entries in the <code>fx.rates</code> object, so you're not limited to using the standard 3-letter currency codes. If for some reason your exchange rates API gives pounds (£) as <code>"British Pounds Sterling"</code>, that's what you'd use instead of <code>"GBP"</code>. Same goes for other currencies.</p>
<p>If you pass in a currency in <code>from</code> or <code>to</code> for which you don't have an exchange rate, money.js will throw an error to let you know that the rate wasn't found.</p>
<h5>Pro Tip disclaimer:</h5>
<p>It's a good idea to inform your users that the exchange rates / currency conversion is for informational purposes only. Exchange rates can never be truly accurate and you don't want to be dealing with customers who are angry because their bank charged them $1.40 more than your website quoted!</p>
<h4 id="fx.noConflict">fx.noConflict() <span>available in standalone mode (not AMD/CJS)</span></h4>
<p>Let's face it, <code>fx</code> is a pretty common namespace (think 'animation'), so money.js stores a reference to the previous global value of <code>fx</code>, if any, in case you need to restore it.</p>
<p>If you're using another library that creates a global <code>fx</code> object or function, you can use <code>fx.noConflict</code> to restore its value and, at the same time, assign the money.js library object to another variable:</p>
<pre class="prettyprint">// Assign the money.js library to a global <code>money</code> 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");</pre>
<h4 id="chaining-fx">Chaining with <code>fx(val)</code></h4>
<p>money.js provides basic 'chaining' (i.e. connecting method calls together, with each acting on the value returned by the previous.)</p>
<p>This allows a more expressive, human-readable way of writing code, where the underlying functions are exactly the same. The methods are as follows:</p>
<h5>fx() <span>returns a wrapped fx object for chaining (doesn't do any converting)</span></h5>
<pre class="prettyprint">fx(16288) // (fxWrapper)
// NB: if parameter is a string, fx() will attempt to parse it to extract the
// `from` currency and `value`, so this is the same as the next example:
fx("$16288 HKD") // (fxWrapper)</pre>
<h5>.from() <span>returns a wrapped fx object, with the value converted from <code>base</code> to <code>from</code> currency:</span></h5>
<pre class="prettyprint">fx(16288).from("HKD") // (fxWrapper)</pre>
<h5>.to() <span>takes a wrapped fx object and converts to target currency:</span></h5>
<pre class="prettyprint">fx(16288).to("GBP"); // 10549.906083 (uses default `from` currency)
fx(16288).from("AED").to("GBP"); // 2872.359629</pre>
<h5>.convert() <span>takes a wrapped fx object and performs <code>fx.convert(val, [opts])</code> on it:</span></h5>
<pre class="prettyprint">fx(16288).convert(); // uses default `from` / `to` currencies
fx(16288).convert({ from:"HKD", to:"GBP" }); // 1355.694581</pre>
<h4 id="accounting.js">Usage with accounting.js</h4>
<p>money.js works great with <strong><a href="http://josscrowcroft.github.com/accounting.js" title="accounting.js - format money and numbers in javascript" target="_blank">accounting.js</a></strong> - a library that provides reliable localisation and formatting of money and currency. Here are a few examples, just for kicks:</p>
<pre class="prettyprint">var value = accounting.unformat(someNumber); // clean up number (eg. user input)
var target = "GBP"; // or some user input
var convertedValue = fx(value).from("USD").to(target);
accounting.formatMoney(convertedValue, {
symbol: target,
format: "%v %s"
}); // eg. "53,180.08 GBP"</pre>
<p>This works because money.js can give high precision results (eg. 8 decimal places, depending on the rates and input value), which is overkill if you're displaying prices with 0 or 2 decimal places. <strong><a href="http://josscrowcroft.github.com/accounting.js" title="accounting.js - format money and numbers in javascript" target="_blank">accounting.js</a></strong> takes care of all the formatting.</p>
<p>You could use the native <code>value.toFixed(2)</code> of course, but we all know how quirky (read: <em>‘arghh!’</em>) that can be. <code>accounting.toFixed()</code> is a reliable replacement:</p>
<pre class="prettyprint">// accounting.toFixed() is a replacement for (Number).toFixed():
(0.615).toFixed(2); // "0.61" <== wtfjs??
accounting.toFixed(0.615, 2); // "0.62" <== better</pre>
<h4 id="nodeJS-npm">Usage in nodeJS/npm (CommonJS)</h4>
<p>money.js can easily be used inside nodeJS or any other CommonJS module loader:</p>
<pre class="prettyprint">var fx = require("/path/to/money");
// Now load in your exchange rates and create `fx.settings` if needed
// NB: check out the <strong><a target="_blank" href="http://josscrowcroft.github.com/npm-exchange-rates" title="nodeJS npm exchange rates module">exchange-rates</a></strong> npm module
<!--var oxr = require('exchange-rates').appId('<em>[YOUR APP ID]</em>').load();--></pre>
<p>You can also install it via <code>npm install money</code>, then just use:</p>
<pre class="prettyprint">var fx = require("money");</pre>
<h4 id="amd-requirejs">Usage as a RequireJS/AMD module</h4>
<p>money.js also exposes itself (ha ha) as an <acronym title="Asynchronous Module Definition">AMD</acronym> module, for script loaders such as <strong><a href="http://requirejs.org/" title="JavaScript file and AMD module loader" target="_blank">RequireJS</a></strong>. This assumes you've read up on AMD modules and understand the syntax:</p>
<pre class="prettyprint">// Usage as a dependency:
require(["path/to/money"], function(fx) {
// Now you have a well-scoped `fx` object to use!
fx.convert(5318008);
});</pre>
<p>You'll need to set up money.js inside the callback function, with <code>fx.rates</code>, <code>fx.base</code> and (optionally) <code>fx.settings</code> - once those are set up, they'll also be set up anywhere else you use <code>fx</code>.</p>
<h3>That just about sums it up</h3>
<p>That's really all you need to remember - <code>fx.rates</code> and <code>fx.base</code> are important, and your basic function is <code>fx.convert(val, <em>[opts]</em>)</code>, which can be written like this: <code>fx(val).from("USD").to("GBP")</code> or in several other ways (re-read the docs if unsure.)</p>
<h5>Feedback / bugs:</h5>
<p>If you have any feedback, any at all, tweet <strong><a href="http://twitter.com/josscrowcroft" title="joss crowcroft twitter" target="_blank">@josscrowcroft</a></strong>, or head over to the <strong><a href="https://github.com/josscrowcroft/money.js/" title="josscrowcroft/money.js on GitHub">money.js github repository</a></strong> and create a new issue. Pull requests / contributions welcome!</p>
<p><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="josscrowcroft" data-url="http://josscrowcroft.github.com/money.js" data-text="money.js - tiny javascript library for real-time currency conversion" target="_blank">Tweet</a> <g:plusone size="medium"></g:plusone></p>
</div>
<footer>
<h3>More projects by <strong><a href="http://www.josscrowcroft.com" title="Joss" target="_blank">Joss</a></strong>:</h3>
<ul>
<li><strong><a href="http://openexchangerates.org/" title="Free JSON Currency Conversion Exchange Rates API" target="_blank">Open Exchange Rates</a></strong> - Real-time exchange rates and currency conversion JSON API</li>
<li><strong><a href="http://josscrowcroft.github.com/accounting.js" title="accounting.js - format money and numbers in javascript" target="_blank">accounting.js</a></strong> - JavaScript number- and money-formatting library</li>
<li><strong><a href="http://www.josscrowcroft.com/demos/motioncaptcha/" title="MotionCAPTCHA - Stop Spam, Draw Shapes" target="_blank">MotionCAPTCHA</a></strong> - "Stop spam, draw shapes" (proof of concept)</li>
<li><strong><a href="http://www.cssreset.com/" title="CSS Reset - most common CSS Reset scripts all in one place, with CSS video tutorials" target="_blank">CSS Reset</a></strong> - All the most common CSS Reset scripts in one place, to copy/paste.</li>
<li><strong><a href="http://twitter.com/josscrowcroft" title="Joss on Twitter (@josscrowcroft)" target="_blank">@josscrowcroft</a></strong> - You can follow me on Twitter here.</li>
</ul>
<p>
<img src="http://currencybot.github.com/CurrencyBot.png" alt="currency bot, portrait donated by robohash.org" />
</p>
</footer>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="demo-resources/js/libs/jquery-1.6.2.min.js"><\/script>')</script>
<script src="money.js"></script>
<script src="demo-resources/js/prettify.js"></script>
<script type="text/javascript">
$.ajax({
url: 'http://openexchangerates.org/api/latest.json?app_id=temporary-1ba057ca38e2d94fe54',
dataType: 'jsonp',
error: function() {
console.log("An error! Please contact @josscrowcroft.");
},
success: function(data) {
fx.rates = data.rates;
fx.base = data.base;
fx.settings = {
from: "USD",
to: "GBP"
}
setTimeout(function() {
sandbox.model.iframeEval('fx.settings = { from : "USD", to : "GBP" }; fx.base = "USD"; fx.rates = ' + JSON.stringify(fx.rates) + '; ');
}, (typeof sandbox !== "undefined") ? 0 : 1000);
}
});
prettyPrint();
</script>
<!-- JS sandbox console [http://josscrowcroft.github.com/javascript-sandbox-console/] -->
<!-- The sandbox template: -->
<script type="text/template" id="tplSandbox">
<pre class="output"></pre>
<div class="input">
<textarea rows="1" placeholder="<%= placeholder %>"></textarea>
</div>
</script>
<!-- The command/result template (NB whitespace/line breaks matter inside <pre> tag): -->
<script type="text/template" id="tplCommand"><% if (! _hidden) { %><span class="command"><%= command %></span>
<span class="prefix"><%= this.resultPrefix %></span><span class="<%= _class %>"><%= result %></span>
<% } %></script>
<script src="http://josscrowcroft.github.com/javascript-sandbox-console/src/libs/underscore.min.js"></script>
<script src="http://josscrowcroft.github.com/javascript-sandbox-console/src/libs/backbone.min.js"></script>
<script src="http://josscrowcroft.github.com/javascript-sandbox-console/src/libs/backbone-localStorage.min.js"></script>
<script src="http://josscrowcroft.github.com/javascript-sandbox-console/src/sandbox-console.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
// Create the sandbox:
window.sandbox = new Sandbox.View({
el : $('#sandbox'),
model : new Sandbox.Model({ iframe : true, maxHistory : 0 })
});
sandbox.model.load("demo-resources/js/libs/jquery-1.6.2.min.js");
sandbox.model.load("demo-resources/js/libs/accounting-min.js");
sandbox.model.load("money.js");
var sampleCommands = [
["convert a simple value", "fx.convert(5318008);"],
["basic method chaining", "fx(1000).from('GBP').to('JPY');"],
["view the exchange rates", "JSON.stringify(fx.rates,0,2)"],
["get the rate from GBP to AED", "fx.convert(1, {from: 'GBP', to: 'AED'})"],
["set the default from/to currencies", "fx.settings = {from : 'GBP', to : 'EUR'};"]
];
_.each(sampleCommands, function(cmd, i, list) {
$('<strong><a href="">' + cmd[0] + '</a></strong>').appendTo('#sample-commands').click(function() {
sandbox.setValue(cmd[1]);
return false;
}).after(i < (list.length - 1) ? " • " : "");
});
});
// twitter:
(function(d, t) {
var g = d.createElement(t),
s = d.getElementsByTagName(t)[0];
g.async = true;
g.src = 'http://platform.twitter.com/widgets.js';
s.parentNode.insertBefore(g, s);
})(document, 'script');
// google plus:
window.___gcfg = {lang: 'en-GB'};
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<!--[if lt IE 7 ]>
<script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
<script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
<![endif]-->
</body>
</html>