CurrencyConverter

by arnaudlauret

HTML

<div>


<div>
  <h1>
  Currency Converter
  </h1>
  <div id="form">
    <input class="inputButton" type="button" id="convert" value="Convert"/>
    <input class="inputText" type="text" id="amount"/>
    <select id="sourceCurrency">

    </select>
     to 
    <select id="targetCurrency">

    </select>
    <div id="result"></div>
  </div>
  
</div>

<div>
  <h2>
    Trivia
  </h2>
  <div class="trivia" id="sourceCountries"></div>
  <div class="spacer"></div>
  <div class="trivia" id="targetCountries"></div>
</div>


<div id="apiCalls">
  <h2 id="apiCallsTitle">
  API Calls log
  </h2>
</div>

<div>
Powered by <a target="_blank" href="https://exchangeratesapi.io/">Foreign exchange rates API</a> and <a target="_blank" href="https://restcountries.eu/">REST Countries</a>
</div>

CSS

body {
  background: black;
  padding: 20px;
  font-family: Helvetica;
}


h1 {
  margin-top: 0px;
}

h2 {
  margin-top: 0px;
}

.flag {
  width: 20px;
  height: 15px;
}

.log {
  background: #eee;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
  text-align: left;
  font-family: Courier;
  font-size: 0.8em;
}

.spacer {
  padding: 2px;
}


div {
  background: #fff;
  border-radius: 4px;
  border: 3px;
  padding: 10px;
  transition: all 0.2s;
  text-align: center;
}

.inputButton {
  width: 100px;
  text-align: center;
}


.inputText {
  width: 60px;
  text-align: right;
}

select {
  width: 60px;
}

#form {
  background: #eee;
  padding: 20px;
}

#result {
  background: #eee;
  padding-top: 5px;
  padding-bottom: 0px;
  font-weight: bold;
}
p {
  padding: 2px;
  margin: 2px;
}

#amount {
  text-align: right;
}

.trivia {
  background: #eee;
  text-align: left;
  border: 3px;
  border-color: white;
  padding: 20px;
}

.logOld {
  color: #bbb;
}

JavaScript

// Triggers money conversion (noSetOldApiCalls can be false to disable the font color change to light grey in API calls log, this flag used on initialization only)
function convertButtonClicked(noSetOldApiCalls) {
	let amount = $('#amount').val();
  let sourceCurrency = $('#sourceCurrency').val();
  let targetCurrency = $('#targetCurrency').val();
  if(typeof noSetOldApiCalls !== 'boolean' || !noSetOldApiCalls ){
  	setOldApiCalls();
  }
  convert(amount, sourceCurrency, targetCurrency);
  getCountries(sourceCurrency, '#sourceCountries', 'Get source currency trivia');
  getCountries(targetCurrency, '#targetCountries', 'Get target currency trivia');

}

// Convert an amount from one currency to another
function convert(amount, sourceCurrency, targetCurrency, callback) {
	let forexUrl = 'https://api.exchangeratesapi.io/latest?base=' + sourceCurrency + '&symbols=' + targetCurrency;
  $.getJSON( forexUrl, function( data ) {
  	let rate = data.rates[targetCurrency];
    let result = Math.round(rate*amount * 1000) / 1000;
		addApiCall(forexUrl, data, 'Get forex rate for selected currencies');
    let resultHtml = '<p id="value">' + amount + ' ' + sourceCurrency + ' = ' + result + ' ' + targetCurrency + '</p>';
    let rateHtml = '<p id="rate">(1 ' + sourceCurrency + ' = '+ rate + ' ' +  targetCurrency + ')</p>';
    $('#result').html(resultHtml + rateHtml);
  });
}

// Search countries using a currency and list them in the div identified by its id
function getCountries(currency, id, comment) {
	let url = 'https://restcountries.eu/rest/v2/currency/' + currency.toLowerCase();
  $.getJSON( url, function( data ) {
		addApiCall(url, data, comment);
    let currencyName;
    let currencySymbol;
    for (let i = 0;i<data[0].currencies.length;i++) {
    	if(data[0].currencies[i].code === currency) {
      	currencyName = data[0].currencies[i].name;
        currencySymbol = data[0].currencies[i].symbol;
        break;
      }
    }
    let content = currencyName + ' (' +...