Skip to content

Instantly share code, notes, and snippets.

@5310

5310/_pracprogw-currency.md Secret

Last active September 7, 2017 13:04
Show Gist options
  • Save 5310/09422c65f20704e0cc824fd06d54e757 to your computer and use it in GitHub Desktop.
Save 5310/09422c65f20704e0cc824fd06d54e757 to your computer and use it in GitHub Desktop.
Download ZIP
_pracprogw-currency #article
Raw
_pracprogw-currency.md
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Currency Converter</title>
<link href="style.css" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<main>
<section>
<input id="value-a" pattern="[0-9]*.?[0-9]{0,2}" autofocus>
<select id="currency-a"></select>
</section>
<p>=</p>
<section>
<input id="value-b" pattern="[0-9]*.?[0-9]{0,2}">
<select id="currency-b"></select>
</section>
</main>
</body>
</html>
Raw
index.pug
doctype html
html(lang='en')
head
meta(charset='utf-8')
title Currency Converter
link(href='style.css', rel='stylesheet')
script(src='script.js')
body
main
section
input(id="value-a", pattern="[0-9]*\.?[0-9]{0,2}", autofocus)
select(id="currency-a")
p =
section
input(id="value-b", pattern="[0-9]*\.?[0-9]{0,2}")
select(id="currency-b")
Raw
script.js
document.addEventListener('DOMContentLoaded', () => {
const valueA = document.querySelector('#value-a')
const valueB = document.querySelector('#value-b')
const currA = document.querySelector('#currency-a')
const currB = document.querySelector('#currency-b')
/* Set currency options dynamically */
// API fails cross-origin requests!
// fetch('http://country.io/currency.json')
// .then(res => res.json()
// .then(data => {
// console.log(data)
// }))
// Pulling the data manually instead.
const currs = {"BD": "BDT", "BE": "EUR", "BF": "XOF", "BG": "BGN", "BA": "BAM", "BB": "BBD", "WF": "XPF", "BL": "EUR", "BM": "BMD", "BN": "BND", "BO": "BOB", "BH": "BHD", "BI": "BIF", "BJ": "XOF", "BT": "BTN", "JM": "JMD", "BV": "NOK", "BW": "BWP", "WS": "WST", "BQ": "USD", "BR": "BRL", "BS": "BSD", "JE": "GBP", "BY": "BYR", "BZ": "BZD", "RU": "RUB", "RW": "RWF", "RS": "RSD", "TL": "USD", "RE": "EUR", "TM": "TMT", "TJ": "TJS", "RO": "RON", "TK": "NZD", "GW": "XOF", "GU": "USD", "GT": "GTQ", "GS": "GBP", "GR": "EUR", "GQ": "XAF", "GP": "EUR", "JP": "JPY", "GY": "GYD", "GG": "GBP", "GF": "EUR", "GE": "GEL", "GD": "XCD", "GB": "GBP", "GA": "XAF", "SV": "USD", "GN": "GNF", "GM": "GMD", "GL": "DKK", "GI": "GIP", "GH": "GHS", "OM": "OMR", "TN": "TND", "JO": "JOD", "HR": "HRK", "HT": "HTG", "HU": "HUF", "HK": "HKD", "HN": "HNL", "HM": "AUD", "VE": "VEF", "PR": "USD", "PS": "ILS", "PW": "USD", "PT": "EUR", "SJ": "NOK", "PY": "PYG", "IQ": "IQD", "PA": "PAB", "PF": "XPF", "PG": "PGK", "PE": "PEN", "PK": "PKR", "PH": "PHP", "PN": "NZD", "PL": "PLN", "PM": "EUR", "ZM": "ZMK", "EH": "MAD", "EE": "EUR", "EG": "EGP", "ZA": "ZAR", "EC": "USD", "IT": "EUR", "VN": "VND", "SB": "SBD", "ET": "ETB", "SO": "SOS", "ZW": "ZWL", "SA": "SAR", "ES": "EUR", "ER": "ERN", "ME": "EUR", "MD": "MDL", "MG": "MGA", "MF": "EUR", "MA": "MAD", "MC": "EUR", "UZ": "UZS", "MM": "MMK", "ML": "XOF", "MO": "MOP", "MN": "MNT", "MH": "USD", "MK": "MKD", "MU": "MUR", "MT": "EUR", "MW": "MWK", "MV": "MVR", "MQ": "EUR", "MP": "USD", "MS": "XCD", "MR": "MRO", "IM": "GBP", "UG": "UGX", "TZ": "TZS", "MY": "MYR", "MX": "MXN", "IL": "ILS", "FR": "EUR", "IO": "USD", "SH": "SHP", "FI": "EUR", "FJ": "FJD", "FK": "FKP", "FM": "USD", "FO": "DKK", "NI": "NIO", "NL": "EUR", "NO": "NOK", "NA": "NAD", "VU": "VUV", "NC": "XPF", "NE": "XOF", "NF": "AUD", "NG": "NGN", "NZ": "NZD", "NP": "NPR", "NR": "AUD", "NU": "NZD", "CK": "NZD", "XK": "EUR", "CI": "XOF", "CH": "CHF", "CO": "COP", "CN": "CNY", "CM": "XAF", "CL": "CLP", "CC": "AUD", "CA": "CAD", "CG": "XAF", "CF": "XAF", "CD": "CDF", "CZ": "CZK", "CY": "EUR", "CX": "AUD", "CR": "CRC", "CW": "ANG", "CV": "CVE", "CU": "CUP", "SZ": "SZL", "SY": "SYP", "SX": "ANG", "KG": "KGS", "KE": "KES", "SS": "SSP", "SR": "SRD", "KI": "AUD", "KH": "KHR", "KN": "XCD", "KM": "KMF", "ST": "STD", "SK": "EUR", "KR": "KRW", "SI": "EUR", "KP": "KPW", "KW": "KWD", "SN": "XOF", "SM": "EUR", "SL": "SLL", "SC": "SCR", "KZ": "KZT", "KY": "KYD", "SG": "SGD", "SE": "SEK", "SD": "SDG", "DO": "DOP", "DM": "XCD", "DJ": "DJF", "DK": "DKK", "VG": "USD", "DE": "EUR", "YE": "YER", "DZ": "DZD", "US": "USD", "UY": "UYU", "YT": "EUR", "UM": "USD", "LB": "LBP", "LC": "XCD", "LA": "LAK", "TV": "AUD", "TW": "TWD", "TT": "TTD", "TR": "TRY", "LK": "LKR", "LI": "CHF", "LV": "EUR", "TO": "TOP", "LT": "LTL", "LU": "EUR", "LR": "LRD", "LS": "LSL", "TH": "THB", "TF": "EUR", "TG": "XOF", "TD": "XAF", "TC": "USD", "LY": "LYD", "VA": "EUR", "VC": "XCD", "AE": "AED", "AD": "EUR", "AG": "XCD", "AF": "AFN", "AI": "XCD", "VI": "USD", "IS": "ISK", "IR": "IRR", "AM": "AMD", "AL": "ALL", "AO": "AOA", "AQ": "", "AS": "USD", "AR": "ARS", "AU": "AUD", "AT": "EUR", "AW": "AWG", "IN": "INR", "AX": "EUR", "AZ": "AZN", "IE": "EUR", "ID": "IDR", "UA": "UAH", "QA": "QAR", "MZ": "MZN"}
const unique = (array) =>
array
.sort()
.reduce((as, b) =>
as[as.length-1] !== b
? (as.push(b), as)
: as, [])
const createOptions = (currs) => {
// Wrangle the currency symbols list
const symbols = unique(Object.values(currs).filter((symbol) => symbol))
// Transform symbols into options
const options = symbols
.map((symbol) => `<option value="${symbol}">${symbol}</option>`)
.join('\n')
// Set options and select defaults
currA.innerHTML = options
currB.innerHTML = options
currA.querySelector('option[value="INR"]').setAttribute('selected', true)
currB.querySelector('option[value="USD"]').setAttribute('selected', true)
}
createOptions(currs)
/* Convert currencies */
const convertAB = () => {
const query = `http://api.fixer.io/latest?base=${currA.value}&symbols=${currB.value}`
fetch(query)
.then((response) => !response.ok ? null : response.json()
.then((data) => {
const rate = data.rates[currB.value]
if (rate && valueA.value) valueB.value = (parseFloat(valueA.value) * rate).toFixed(2)
})
)
}
// Convert if either the value or currency changes.
valueA.addEventListener('keyup', convertAB)
currA.addEventListener('change', convertAB)
const convertBA = () => {
//TODO:
}
// Convert if either the value or currency changes.
valueB.addEventListener('keyup', convertBA)
currB.addEventListener('change', convertBA)
})
Raw
style.css
:root {
font-size: 24px;
font-family: sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input {
padding: 0.1em;
}
select {
padding-top: 0.05em;
}
body {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
body > main p {
margin: 0.4em 0 0.25em 0;
text-align: center;
}
body > main p:before,
body > main p:after {
content: "";
display: inline-block;
width: 4.5em;
height: 0;
margin: 0 0.2em;
position: relative;
top: -0.28em;
border-bottom: 1px solid black;
}
body > main select {
width: 5em;
}
Raw
style.less
:root {
font-size: 24px;
font-family: sans-serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
input { padding: 0.1em; }
select { padding-top: 0.05em; }
body {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
& > main {
p {
margin: 0.4em 0 0.25em 0;
text-align: center;
&:before, &:after {
content: "";
display: inline-block;
width: 4.5em; height: 0;
margin: 0 0.2em;
position: relative;
top: -0.28em;
border-bottom: 1px solid black;
}
}
select {
width: 5em;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment