Skip to content

Instantly share code, notes, and snippets.

@bichotll

bichotll/index.html

Created April 11, 2015 21:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save bichotll/847c363d32e07f61ddb6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save bichotll/847c363d32e07f61ddb6 to your computer and use it in GitHub Desktop.
Download ZIP
Currencies // source http://jsbin.com/kujupu
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Currencies</title>
</head>
<body>
<div>
<label for="incoming-price">The price of the leather bag is</label>
<input type="text" id="incoming-price" value="590 INR"/>
</div>
<div>
<label for="currency">The currency you want to change the input for</label>
<select id="currency">
<option value="$">US Dollar</option>
<option value="€">x Euro</option>
<option value="£">British Pound Sterling</option>
<option value="₹">Indian Rupee</option>
<option value="€">x Euro</option>
<option value="¥">x Japanese Yen</option>
<option value="₵">x Ghanaian Cedi</option>
<option value="฿">x Thai Baht</option>
</select>
</div>
<h3>Result:</h3>
<div>
<label for="output-price">The price of the leather bag is</label>
<input type="text" id="output-price"/>
</div>
<hr/>
<h3>Test notes</h3>
<p>
I've just implemented 4 because of time reasons
</p>
<h3>Possible currencies</h3>
<ul>
<li>'USD': '$', // US Dollar</li>
<li>'EUR': '€', // Euro</li>
<li>'GBP': '£', // British Pound Sterling</li>
<li>'INR': '₹', // Indian Rupee</li>
<li>'JPY': '¥', // Japanese Yen</li>
<li>'GH': '₵', // Ghanaian Cedi</li>
<li>'THB': '฿', // Thai Baht</li>
</ul>
<h4>Example</h4>
<p>
From: "The price of the leather bag is 590 INR"<br/>
To : "The price of the leather bag is £59.30"
</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script id="jsbin-javascript">
(function () {
'use strict';
/**
* Base of currency
* @interface
* @constructor
*/
var CurrencyType = function () {
/**
* The currency sign
* @type {String}
*/
this.sign = undefined;
/**
* The currency string sign
* @type {String}
*/
this.stringSign = undefined;
/**
* List of the rates by the current currency
* @type {{}}
*/
this.rates = {};
/**
* Returns the default format amount of the currency
* @throws 'not implemented'
* @returns {String}
*/
this.getDefaultFormat = function () {
throw new Error('not implemented');
};
};
/**
* USD dollar currency type
* @implements CurrencyType
* @constructor
*/
var USDDollarCurrencyType = function () {
CurrencyType.apply(this, arguments);
this.sign = '$';
this.stringSign = 'USD';
this.rates = {
'GBP': 0.68,
'INR': 62.27
};
this.getDefaultFormat = function (amount) {
return this.sign + amount.toFixed(2);
};
};
USDDollarCurrencyType.prototype = CurrencyType.prototype;
USDDollarCurrencyType.prototype.constructor = USDDollarCurrencyType;
/**
* British pounds currency type
* @implements CurrencyType
* @constructor
*/
var BritishPoundCurrency = function () {
CurrencyType.apply(this, arguments);
this.sign = '£';
this.stringSign = 'GBP';
this.rates = {
'USD': 1.46,
'INR': 91.11
};
this.getDefaultFormat = function (amount) {
return this.sign + amount.toFixed(2);
};
};
BritishPoundCurrency.prototype = CurrencyType.prototype;
BritishPoundCurrency.prototype.constructor = BritishPoundCurrency;
/**
* Indian rupees currency type
* @implements CurrencyType
* @constructor
*/
var IndianRupeeCurrency = function () {
CurrencyType.apply(this, arguments);
this.sign = '₹';
this.stringSign = 'INR';
this.rates = {
'USD': 0.016,
'GBP': 0.011
};
this.getDefaultFormat = function (amount) {
return +amount + ' ' + this.stringSign;
};
};
IndianRupeeCurrency.prototype = CurrencyType.prototype;
IndianRupeeCurrency.prototype.constructor = IndianRupeeCurrency;
/**
*Check the validation of a form and do so many fancy things
*@constructor
*/
var Currency = function () {
/**
* List of currencies used
* @type {{dollar: USDDollarCurrencyType, britishPound: BritishPoundCurrency, indianRupee: IndianRupeeCurrency}}
*/
this.currencies = {
'dollar': new USDDollarCurrencyType(),
'britishPound': new BritishPoundCurrency(),
'indianRupee': new IndianRupeeCurrency()
};
/**
* Validates the form and does fancy stuff
* @returns {undefined|string}
*/
this.getChange = function (amountString, toExchange) {
var result;
var currentCurrencyType = this.detectCurrency(amountString);
//check if there is any possible currency
if (currentCurrencyType) {
var amount = this.getAmount(amountString);
result = this.getFormattedAmountByCurrency(amount, currentCurrencyType, toExchange);
}
return result;
};
/**
* Get the int amount
* @param amountString
*/
this.getAmount = function (amountString) {
//regex n to int
return +amountString.match(/[0-9.]+/);
};
/**
* Detects the currency checking all them by
* @param amountString
*/
this.detectCurrency = function (amountString) {
var currency;
//regex
var currencySign = amountString.replace(amountString.match(/[ 0-9.,-]+/), '');
//for currencies looking for the current one
for (var currencyKey in this.currencies){
if (this.currencies[currencyKey].sign === currencySign || this.currencies[currencyKey].stringSign === currencySign){
currency = this.currencies[currencyKey];
break;
}
}
return currency;
};
/**
* Returns the by default formatted currency amount
* @param amount {Number}
* @param currentCurrencyType CurrencyType
* @param toExchange {String}
*/
this.getFormattedAmountByCurrency = function (amount, currentCurrencyType, toExchange) {
//get toExchange CurrencyType object
var toExchangeCurrencyType;
for (var currencyKey in this.currencies){
if (this.currencies[currencyKey].sign === toExchange || this.currencies[currencyKey].stringSign === toExchange){
toExchangeCurrencyType = this.currencies[currencyKey];
break;
}
}
//return undefined if the same currencyType
if (toExchangeCurrencyType === currentCurrencyType){
return;
}
//amount by rate
amount = amount * currentCurrencyType.rates[toExchangeCurrencyType.stringSign];
//return formatted amount
return toExchangeCurrencyType.getDefaultFormat(amount);
};
};
window.currency = new Currency();
})();
(function(){
//get form element
var incomingPrice = document.getElementById('incoming-price');
var currencyToChange = document.getElementById('currency');
var outputPrice = document.getElementById('output-price');
var handleDisplayOnChange = function () {
var change = currency.getChange(incomingPrice.value, currencyToChange.value);
if (change) {
outputPrice.value = change;
}
};
incomingPrice.onchange = function(){
handleDisplayOnChange();
};
currencyToChange.onchange = function(){
handleDisplayOnChange();
};
})();
</script>
<script id="jsbin-source-javascript" type="text/javascript">(function () {
'use strict';
/**
* Base of currency
* @interface
* @constructor
*/
var CurrencyType = function () {
/**
* The currency sign
* @type {String}
*/
this.sign = undefined;
/**
* The currency string sign
* @type {String}
*/
this.stringSign = undefined;
/**
* List of the rates by the current currency
* @type {{}}
*/
this.rates = {};
/**
* Returns the default format amount of the currency
* @throws 'not implemented'
* @returns {String}
*/
this.getDefaultFormat = function () {
throw new Error('not implemented');
};
};
/**
* USD dollar currency type
* @implements CurrencyType
* @constructor
*/
var USDDollarCurrencyType = function () {
CurrencyType.apply(this, arguments);
this.sign = '$';
this.stringSign = 'USD';
this.rates = {
'GBP': 0.68,
'INR': 62.27
};
this.getDefaultFormat = function (amount) {
return this.sign + amount.toFixed(2);
};
};
USDDollarCurrencyType.prototype = CurrencyType.prototype;
USDDollarCurrencyType.prototype.constructor = USDDollarCurrencyType;
/**
* British pounds currency type
* @implements CurrencyType
* @constructor
*/
var BritishPoundCurrency = function () {
CurrencyType.apply(this, arguments);
this.sign = '£';
this.stringSign = 'GBP';
this.rates = {
'USD': 1.46,
'INR': 91.11
};
this.getDefaultFormat = function (amount) {
return this.sign + amount.toFixed(2);
};
};
BritishPoundCurrency.prototype = CurrencyType.prototype;
BritishPoundCurrency.prototype.constructor = BritishPoundCurrency;
/**
* Indian rupees currency type
* @implements CurrencyType
* @constructor
*/
var IndianRupeeCurrency = function () {
CurrencyType.apply(this, arguments);
this.sign = '₹';
this.stringSign = 'INR';
this.rates = {
'USD': 0.016,
'GBP': 0.011
};
this.getDefaultFormat = function (amount) {
return +amount + ' ' + this.stringSign;
};
};
IndianRupeeCurrency.prototype = CurrencyType.prototype;
IndianRupeeCurrency.prototype.constructor = IndianRupeeCurrency;
/**
*Check the validation of a form and do so many fancy things
*@constructor
*/
var Currency = function () {
/**
* List of currencies used
* @type {{dollar: USDDollarCurrencyType, britishPound: BritishPoundCurrency, indianRupee: IndianRupeeCurrency}}
*/
this.currencies = {
'dollar': new USDDollarCurrencyType(),
'britishPound': new BritishPoundCurrency(),
'indianRupee': new IndianRupeeCurrency()
};
/**
* Validates the form and does fancy stuff
* @returns {undefined|string}
*/
this.getChange = function (amountString, toExchange) {
var result;
var currentCurrencyType = this.detectCurrency(amountString);
//check if there is any possible currency
if (currentCurrencyType) {
var amount = this.getAmount(amountString);
result = this.getFormattedAmountByCurrency(amount, currentCurrencyType, toExchange);
}
return result;
};
/**
* Get the int amount
* @param amountString
*/
this.getAmount = function (amountString) {
//regex n to int
return +amountString.match(/[0-9.]+/);
};
/**
* Detects the currency checking all them by
* @param amountString
*/
this.detectCurrency = function (amountString) {
var currency;
//regex
var currencySign = amountString.replace(amountString.match(/[ 0-9.,-]+/), '');
//for currencies looking for the current one
for (var currencyKey in this.currencies){
if (this.currencies[currencyKey].sign === currencySign || this.currencies[currencyKey].stringSign === currencySign){
currency = this.currencies[currencyKey];
break;
}
}
return currency;
};
/**
* Returns the by default formatted currency amount
* @param amount {Number}
* @param currentCurrencyType CurrencyType
* @param toExchange {String}
*/
this.getFormattedAmountByCurrency = function (amount, currentCurrencyType, toExchange) {
//get toExchange CurrencyType object
var toExchangeCurrencyType;
for (var currencyKey in this.currencies){
if (this.currencies[currencyKey].sign === toExchange || this.currencies[currencyKey].stringSign === toExchange){
toExchangeCurrencyType = this.currencies[currencyKey];
break;
}
}
//return undefined if the same currencyType
if (toExchangeCurrencyType === currentCurrencyType){
return;
}
//amount by rate
amount = amount * currentCurrencyType.rates[toExchangeCurrencyType.stringSign];
//return formatted amount
return toExchangeCurrencyType.getDefaultFormat(amount);
};
};
window.currency = new Currency();
})();
(function(){
//get form element
var incomingPrice = document.getElementById('incoming-price');
var currencyToChange = document.getElementById('currency');
var outputPrice = document.getElementById('output-price');
var handleDisplayOnChange = function () {
var change = currency.getChange(incomingPrice.value, currencyToChange.value);
if (change) {
outputPrice.value = change;
}
};
incomingPrice.onchange = function(){
handleDisplayOnChange();
};
currencyToChange.onchange = function(){
handleDisplayOnChange();
};
})();</script></body>
</html>
Raw
jsbin.kujupu.js
(function () {
'use strict';
/**
* Base of currency
* @interface
* @constructor
*/
var CurrencyType = function () {
/**
* The currency sign
* @type {String}
*/
this.sign = undefined;
/**
* The currency string sign
* @type {String}
*/
this.stringSign = undefined;
/**
* List of the rates by the current currency
* @type {{}}
*/
this.rates = {};
/**
* Returns the default format amount of the currency
* @throws 'not implemented'
* @returns {String}
*/
this.getDefaultFormat = function () {
throw new Error('not implemented');
};
};
/**
* USD dollar currency type
* @implements CurrencyType
* @constructor
*/
var USDDollarCurrencyType = function () {
CurrencyType.apply(this, arguments);
this.sign = '$';
this.stringSign = 'USD';
this.rates = {
'GBP': 0.68,
'INR': 62.27
};
this.getDefaultFormat = function (amount) {
return this.sign + amount.toFixed(2);
};
};
USDDollarCurrencyType.prototype = CurrencyType.prototype;
USDDollarCurrencyType.prototype.constructor = USDDollarCurrencyType;
/**
* British pounds currency type
* @implements CurrencyType
* @constructor
*/
var BritishPoundCurrency = function () {
CurrencyType.apply(this, arguments);
this.sign = '£';
this.stringSign = 'GBP';
this.rates = {
'USD': 1.46,
'INR': 91.11
};
this.getDefaultFormat = function (amount) {
return this.sign + amount.toFixed(2);
};
};
BritishPoundCurrency.prototype = CurrencyType.prototype;
BritishPoundCurrency.prototype.constructor = BritishPoundCurrency;
/**
* Indian rupees currency type
* @implements CurrencyType
* @constructor
*/
var IndianRupeeCurrency = function () {
CurrencyType.apply(this, arguments);
this.sign = '₹';
this.stringSign = 'INR';
this.rates = {
'USD': 0.016,
'GBP': 0.011
};
this.getDefaultFormat = function (amount) {
return +amount + ' ' + this.stringSign;
};
};
IndianRupeeCurrency.prototype = CurrencyType.prototype;
IndianRupeeCurrency.prototype.constructor = IndianRupeeCurrency;
/**
*Check the validation of a form and do so many fancy things
*@constructor
*/
var Currency = function () {
/**
* List of currencies used
* @type {{dollar: USDDollarCurrencyType, britishPound: BritishPoundCurrency, indianRupee: IndianRupeeCurrency}}
*/
this.currencies = {
'dollar': new USDDollarCurrencyType(),
'britishPound': new BritishPoundCurrency(),
'indianRupee': new IndianRupeeCurrency()
};
/**
* Validates the form and does fancy stuff
* @returns {undefined|string}
*/
this.getChange = function (amountString, toExchange) {
var result;
var currentCurrencyType = this.detectCurrency(amountString);
//check if there is any possible currency
if (currentCurrencyType) {
var amount = this.getAmount(amountString);
result = this.getFormattedAmountByCurrency(amount, currentCurrencyType, toExchange);
}
return result;
};
/**
* Get the int amount
* @param amountString
*/
this.getAmount = function (amountString) {
//regex n to int
return +amountString.match(/[0-9.]+/);
};
/**
* Detects the currency checking all them by
* @param amountString
*/
this.detectCurrency = function (amountString) {
var currency;
//regex
var currencySign = amountString.replace(amountString.match(/[ 0-9.,-]+/), '');
//for currencies looking for the current one
for (var currencyKey in this.currencies){
if (this.currencies[currencyKey].sign === currencySign || this.currencies[currencyKey].stringSign === currencySign){
currency = this.currencies[currencyKey];
break;
}
}
return currency;
};
/**
* Returns the by default formatted currency amount
* @param amount {Number}
* @param currentCurrencyType CurrencyType
* @param toExchange {String}
*/
this.getFormattedAmountByCurrency = function (amount, currentCurrencyType, toExchange) {
//get toExchange CurrencyType object
var toExchangeCurrencyType;
for (var currencyKey in this.currencies){
if (this.currencies[currencyKey].sign === toExchange || this.currencies[currencyKey].stringSign === toExchange){
toExchangeCurrencyType = this.currencies[currencyKey];
break;
}
}
//return undefined if the same currencyType
if (toExchangeCurrencyType === currentCurrencyType){
return;
}
//amount by rate
amount = amount * currentCurrencyType.rates[toExchangeCurrencyType.stringSign];
//return formatted amount
return toExchangeCurrencyType.getDefaultFormat(amount);
};
};
window.currency = new Currency();
})();
(function(){
//get form element
var incomingPrice = document.getElementById('incoming-price');
var currencyToChange = document.getElementById('currency');
var outputPrice = document.getElementById('output-price');
var handleDisplayOnChange = function () {
var change = currency.getChange(incomingPrice.value, currencyToChange.value);
if (change) {
outputPrice.value = change;
}
};
incomingPrice.onchange = function(){
handleDisplayOnChange();
};
currencyToChange.onchange = function(){
handleDisplayOnChange();
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment