, , , ,

The travel application I’ve been working on (really a set of locally-stored HTML, CSS and JavaScript files) requires a feature that enables quick currency conversions. It also needs to function independently of a working Internet connection.

The first pane has an H2 tag displaying what the exchange rate was when the application was last updated – this is hard-coded – and I’ve added a button that navigates the browser to the XE Currency Converter.

I figured a slider would be the quickest way of implementing a conversion feature in a UI, and it’s more efficient than trying to use a small touchscreen to type the values in. The user sees a price in Japanese currency, and moves the slider to get the approximate value in British pounds.
To make this, I used the onchange function to show the current selected slider value, and appended that to also show the value divided by 148.575 (or whatever the exchange rate happens to be).

Calculations with Values from Multiple Range Controls
Quickly it became evident that a user would find it difficult to get a precise enough conversion with a small slider representing such a large range. I needed to add a couple more sliders.

I spent several hours trying to craft some JavaScript that performs the conversion on the combined values from all three controls – who would have though this would be so tricky! HTML5 provides a workaround for this, with the ‘output‘ tag and the ‘oninput‘ form attribute.

The ‘oninput‘ attribute here contains JavaScript that performs the calculation:

form oninput="result.value=(parseInt(upperRange.value)+parseInt(centreRange.value)+parseInt(lowerRange.value))/(148.75)"

With an output just before the closing form tag:
output name="result"

Next, for the application to be usable, it also needs to display the current state of each slider. Fortunately we can chain both ‘onchange’ and ‘oninput’ within the same input tag for each slider:
The range tags now have the following attributes:

input type="range" id="centreRange" min="0" max="10000" value="0" step="1000" onchange="centreValue('JPY: ' + this.value + ' | ' + 'GBP: '+ this.value/148.475)" oninput="midRange(value)" /

Each form element is also assigned an output tag:
output for="centreRange" id="centreValue"

Plus some JavaScript to update the output tag:

function smallRange(yen)
document.querySelector('#centreValue').value = yen;

The code for the sliders would therefore look something like this:

Precise Currency Conversion Form
The JavaScript for the next currency conversion pane I borrowed from ProgLogic.com, which uses simple multiplication functions. This is tied to a set of form controls – text boxes and a submit button.

At the head of the HTML source, add the following function:

function yenConverter()
document.converter.dollar.value = document.converter.yen.value * 0.0089
document.converter.pound.value = document.converter.yen.value * 0.00673212
document.converter.euro.value = document.converter.yen.value * 0.00605

And in the main body, within a form element:

input type="text" class="form-control" name="pound" onChange="poundConverter()"
input type="text" class="form-control" name="yen" onChange="yenConverter()"
input type="button" class="btn btn-default" value="Convert"

When the button is pressed/clicked, the input fields are updated by poundConverter() and yenConverter() to whichever value multiplied by the exchange rate.

Showing and Hiding Conversion Tables
The other two panels I’ve added as conversion tables, in case the user simply needs a quick lookup to see roughly what the equivalent value is. This uses Bootstrap.csstable-striped‘ styling.

And a jQuery call to show/hide the quick conversion tables.


And the HTML, using a Bootstrap.css button:
button type="button" id="show-hide" class="btn btn-default"