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.
With an output just before the closing form tag:
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"
document.querySelector('#centreValue').value = yen;
The code for the sliders would therefore look something like this:
Precise Currency Conversion Form
At the head of the HTML source, add the following function:
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.css ‘table-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"