I wrote a dead simple jQuery currency converter

While browsing on a UK clothing site one night, I kept bouncing back and forth between the site and Google to check prices in US dollars. It wasn’t terribly annoying, but I thought it might be nice to write something that would let developers include price conversions in their websites on the fly. I call it Current, and you can find it on Github here: https://github.com/frmlnd/frmlnd-current

I decided to go with jQuery for this plugin for a couple reasons. The first is just that I hadn’t worked with jQuery for a while and wanted to revisit it for old times’ sake (and later on, to check out version 3.x — The demo site is using 3.2.1 at the moment). The second reason is that jQuery makes it really easy to create DOM-manipulating plugins without a ton of overhead. React would be smaller, and vanilla JavaScript would be smaller still, so maybe I’ll post an update at some point with some performance enhancements.

Current takes a currency amount — say US Dollars — and converts it to your choice of outputs. By simply including a couple attributes in your HTML code, you’ll get currency conversions on hover, click, or inline.

For example, the following code will use the U.S. Dollar as a base and return Euros, Japanese Yen, and Chinese Yuan to the UI as a hover element:

<span class="crrnt-currency" data-crrnt-base="USD" data-crrnt-currencies="EUR,JPY,CNY">$100.63</span>

Pretty easy, right? Here’s a simpler example, which uses the plugin’s default settings:

<span class="crrnt-currency">$100.63</span>

Both of the above will produce something like this:

Can’t get much easier than that. As mentioned before, you can choose to show conversions when you hover over an element that carries the crrnt-currency class property, or you can show conversions on click by coupling click with the above class attribute, or finally inline by including the inline class in your crrnt-currency element.

This plugin leverages jQuery as well as the Open Exchange Rates API to create an ultra-lightweight, simple currency conversion display tool that’s easy to use with your web application. The Open Exchange Rates API requires an API key, which you’ll need to procure here.

I hope you find some use for this plugin, and please let me know if you do. It would be great to see it used in shopping carts and contextual commerce applications, or wherever you find it’s useful!

Github repo with installation and usage instructions: https://github.com/frmlnd/frmlnd-current

Demo page: http://frmlnd.github.io/frmlnd-current/

Enjoy!