Demo: money.js + accounting.js currency conversion

by Adam Patridge

HTML

<ul>
    <li>Product1: <span class="curr-conv">$19.99</span></li>
    <li>Product2: <span class="curr-conv">$15.82</span></li>
    <li>Product3: <span class="curr-conv">$1.99</span></li>
</ul>
Available currency codes: <select class="currencyChoices"></select>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery-jsonp.googlecode.com/files/jquery.jsonp-2.1.4.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/josscrowcroft/money.js/master/money.js"></script>
<script type="text/javascript" src="https://raw.github.com/josscrowcroft/accounting.js/master/accounting.js"></script>

JavaScript

$(function() {
    var convertableCurrencySelector = ".curr-conv",
        convertCurrencyElements = function(currencyCode) {
            var currencyOriginalValueAttr = "data-curr-conv-usd-val",
                currencyCurrentConvertValueAttr = "data-curr-conv-" + currencyCode.toLowerCase() + "-val";
            $(convertableCurrencySelector).each(function() {
                var $this = $(this),
                    // Get or set original currency price attribute.
                    originalCurrencyValue = parseFloat($this.attr(currencyOriginalValueAttr) || $this.attr(currencyOriginalValueAttr, $this.text().substring(1)).attr(currencyOriginalValueAttr), 10),
                    // Get or set converted currency price attribute.
                    newCurrencyValue = parseFloat($this.attr(currencyCurrentConvertValueAttr) || $this.attr(currencyCurrentConvertValueAttr, fx(originalCurrencyValue).from("USD").to(currencyCode)).attr(currencyCurrentConvertValueAttr), 10);
                $this.text(accounting.formatMoney(newCurrencyValue, {
                    symbol: currencyCode,
                    format: "%s %v"
                }));
            });
        };

    $.ajax({
        url: 'http://openexchangerates.org/latest.php',
        success: function(data) {
            var currencyCount = data.rates.length,
                currencyOptions = '',
                rate;
            for (rate in data.rates) {
                currencyOptions += '<option value="' + rate + '">' + rate + '</option>';
            }
            for (var i = 0; i < currencyCount; i++) {
                currencyOptions += '<option value="' + data.rates[i].optionValue + '">' + data.rates[i].optionDisplay + '</option>';
            }
            $(".currencyChoices").change(function() {
                convertCurrencyElements($(this).val());
            }).html(currencyOptions);
            // Check money.js has finished loading:
            if (typeof fx !== "undefined" && fx.rates) {
      ...