Exchange Rate Calculator
Choose the currency and the amounts to get the exchange rate
 
  AED ARS AUD BGN BRL BSD CAD CHF CLP CNY COP CZK DKK DOP EGP EUR FJD GBP GTQ HKD HRK HUF IDR ILS INR ISK JPY KRW KZT MXN MYR NOK NZD PAB PEN PHP PKR PLN PYG RON RUB SAR SEK SGD THB TRY TWD UAH USD UYU VND ZAR   
 
  Swap  
 
 
  AED ARS AUD BGN BRL BSD CAD CHF CLP CNY COP CZK DKK DOP EGP EUR FJD GBP GTQ HKD HRK HUF IDR ILS INR ISK JPY KRW KZT MXN MYR NOK NZD PAB PEN PHP PKR PLN PYG RON RUB SAR SEK SGD THB TRY TWD UAH USD UYU VND ZAR   

:root {
	--primary-color: #5fbaa7;
}
* {
	box-sizing: border-box;
}
body {
	background-color: #f4f4f4;
	font-family: Arial, Helvetica, sans-serif;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	margin: 0;
	padding: 20px;
}
h2 {
	color: var(--primary-color);
}
p {
	text-align: center;
}
.btn {
	color: #fff;
	background: var(--primary-color);
	cursor: pointer;
	border-radius: 5px;
	font-size: 12px;
	padding: 5px 12px;
}
.money-img {
	width: 150px;
}
.currency {
	padding: 40px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.currency select {
	padding: 10px 20px 10px 10px;
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	border: 1px solid #dedede;
	font-size: 16px;
	background: transparent;
	background-image: url('data:image/svg+xml;
	charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2229 2.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%20000002%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E');
	background-position: right 10px top 50%, 0, 0;
	background-size: 12px auto, 100%;
	background-repeat: no-repeat;
}
.currency input {
	border: 0;
	background: transparent;
	font-size: 30px;
	text-align: right;
}
.swap-rate-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.rate {
	color: var(--primary-color);
	font-size: 14px;
	padding: 0 10px;
}
select:focus,
input:focus,
button:focus {
	outline: 0;
}
@media (max-width: 600px) {
	.currency input {
	width: 200px;
}
}

// 獲取貨幣1對象
let currencyEl_one = document.getElementById("currency-one");
// 獲取貨幣2對象
let currencyEl_two = document.getElementById("currency-two");
// 獲取貨幣1對應(yīng)的匯率對象
let amountEl_one = document.getElementById("amount-one");
// 獲取貨幣2對應(yīng)的匯率對象
let amountEl_two = document.getElementById("amount-two");
// 獲取提示框?qū)?yīng)的對象
let rateEl = document.getElementById("rate");

// 檢查初始狀態(tài)下 是否需要換算匯率
getData();

// 貨幣2發(fā)生變化時 觸發(fā)的事件
currencyEl_two.onchange = getData;

// 貨幣1發(fā)生變化時 觸發(fā)的事件
currencyEl_one.onchange = getData;

// 獲取按鈕 貨幣1和貨幣2是否都有值
let btn = document.getElementById("swap");

// 點(diǎn)擊交換按鈕時 觸發(fā)的事件
btn.onclick = function() {
  // console.log("!!!");
  let currency_one = currencyEl_one.value;
  let currency_two = currencyEl_two.value;
  // 定義臨時變量
  let temp = currency_one;
  // 交換貨幣1和貨幣2的value
  currencyEl_one.value = currency_two;
  currencyEl_two.value = temp;
  // 并且交換貨幣1和貨幣2對應(yīng)的匯率
  currency_one = currency_two;
  currency_two = temp;

  fetch(`https://api.exchangerate-api.com/v4/latest/${currency_one}`)
    .then(res => res.json())
    .then(data => {
      const rate = data.rates[currency_two];
      rateEl.innerText = `1 ${currency_one} = ${rate} ${currency_two}`;
      amountEl_two.value = (amountEl_one.value * rate).toFixed(2);
    });

};

// 得到匯率
function getData() {
    let currency_one = currencyEl_one.value;
    let currency_two = currencyEl_two.value;
    fetch(`https://api.exchangerate-api.com/v4/latest/${currency_one}`)
      .then(res => res.json())
      .then(data => {
        const rate = data.rates[currency_two];
        rateEl.innerText = `1 ${currency_one} = ${rate} ${currency_two}`;
        amountEl_two.value = (amountEl_one.value * rate).toFixed(2);

      });
}