Curry - Currency Conversion DDM

<div id="my-element"></div>
<span class="price">$100</span>

$(function(){ // document ready alias
    $('#my-element').curry(); // init curry
});

Default is set up as .price

Sets which element you want the currency conversion to take place on.

If you want Curry to handle the currency change, set this to true.

Curry uses USD (US Dollars) as the base for it's conversion.
Change this option if you want the base to be calculated according to another currency (must be in the currency list).

You can add your own symbols to this list or overwrite the existing ones.
Curry will match up the currency key (GBP = £) with your symbol.

By default Curry uses the currency conversion figures found at Fixer.io.
You can supply your own currency rates via an object where the key is the currency name and the value a number to use for the conversion.
Curry can also be used interchangeably with openexchangerates.org.

var options = {
    target: '.price',
    change: false,
    base:   'USD',
    symbols: {
        'ILS' : '₪'
    },
    customCurrency: {
        'USD': 1,
        'GBP': 0.67,
        'EUR': 0.42,
        ...
    }

$(function(){ // document ready alias
    $('#my-element').curry( options ); // init custom options
});

Just like any other jQuery plugin, the javascript goes just before the closing body tag and after a jQuery library call.
The following code simply generates the Curry ddm which by default targets a .price class, look to the right.

<div class="my-future-ddm"></div>
<div><span class="price">$200</span></div>

...

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="curry.js"></script>

<script>
$(function(){ // document ready
    $('.my-future-ddm').curry(); // startup curry
});
</script>

</body>
</html>

You can override Currys conversion event by setting change to false.

This can be achived with the following code:

$(function(){ // document ready
    $('.my-future-ddm').curry({ change: false }).change(function(){

        var selected = $(this).find(':selected'), // get selected currency
            rate = selected.data('rate'), // get currency rate
            currency = selected.val(); // get currency name

        console.log( currency, rate );

    });
});

Curry can target any valid jQuery selector.
Simply use target and set it to point to your custom selector:

$(function(){ // document ready
    $('.my-future-ddm').curry({
        // Target is set to '.price' by default but can use any valid jQuery selctor
        target: '.hproduct .price'
    });
});

The default symbols that come with Curry are $ (USD), £ (GBP), € (EUR), ¥ (JPY).

You can replace these or add more by adding a setting called symbols with a hash map value.
For correct conversion consider using html entities.

$(function(){
    $('.my-future-ddm').curry({
        symbols: {
            'ILS' : '₪', // Add Shekel currency symbol. ( HTML entity code ₪ )
            'GBP' : '₤'  // Replace GBP sign. ( HTML entity code ₤ )
        }
    });
});

If you don't want to use curry's currency rates you can supply your own currency rates object.

Keep in mind that if you set yor rates according to another base or if USD is not included. You must set the base manually using the base property:

$(function(){
    $('.my-future-ddm').curry({
        base:   'EUR',
        customCurrency: {
            'EUR': 1,
            'GBP': 0.8013,
            'USD': 1.27
        }
    });
});

© 2017. Curry is distributed under the MIT or GPL license.