diff --git "a/\354\240\204\354\261\204\354\235\264/ExchangeRate/README.md" "b/\354\240\204\354\261\204\354\235\264/ExchangeRate/README.md" new file mode 100644 index 0000000..d3e1a32 --- /dev/null +++ "b/\354\240\204\354\261\204\354\235\264/ExchangeRate/README.md" @@ -0,0 +1,22 @@ +## Exchange Rate + +Select countries to get the exchange rate for a specific amount + +## Project Specifications + +- Display UI with 2 select lists for countries and 2 inputs for amounts +- Fetch exchange rates from API (https://api.exchangerate-api.com) +- Display the values for both countries +- Update values on amount change +- Swap country rates + +## Functions + +- changeAmountOne, changeCurrencyOne, changeCurrencyTwo : 바뀐 값을 해당 전역 변수에 담는 역할 +- handleSwap : 두 통화 값을 서로 바꾸는 역할 +- setResultValue : 환율을 업데이트하는 역할 + +## Memo + +처음에 코드를 짤 때는 select, input 값이 바뀔 때마다 setResultValue 함수를 호출해서 이 함수 안에서 모든 변수를 다시 받아와 환율을 나타내게 했는데 이렇게 하니 바뀐 값만 새로 가져오는 것이 아니라 바뀌지 않은 값도 매번 가져오게 되니 효율적이지 않다고 생각해서 코드를 고침. +각 값을 담을 전역 변수를 선언해서 값이 바뀌면 전역 변수에 값을 할당하고 setResultValue 함수에 인자를 넘겨줘서 환율을 나타내게 함. diff --git "a/\354\240\204\354\261\204\354\235\264/ExchangeRate/img/money.png" "b/\354\240\204\354\261\204\354\235\264/ExchangeRate/img/money.png" new file mode 100644 index 0000000..9318522 Binary files /dev/null and "b/\354\240\204\354\261\204\354\235\264/ExchangeRate/img/money.png" differ diff --git "a/\354\240\204\354\261\204\354\235\264/ExchangeRate/index.html" "b/\354\240\204\354\261\204\354\235\264/ExchangeRate/index.html" new file mode 100644 index 0000000..2497b99 --- /dev/null +++ "b/\354\240\204\354\261\204\354\235\264/ExchangeRate/index.html" @@ -0,0 +1,142 @@ + + + + + + + Exchange Rate Calculator + + + + +

Exchange Rate Calculator

+

Choose the currency and the amounts to get the exchange rate

+ +
+
+ + +
+ +
+ +
+
+ +
+ + +
+
+ + + + diff --git "a/\354\240\204\354\261\204\354\235\264/ExchangeRate/script.js" "b/\354\240\204\354\261\204\354\235\264/ExchangeRate/script.js" new file mode 100644 index 0000000..6a27d6e --- /dev/null +++ "b/\354\240\204\354\261\204\354\235\264/ExchangeRate/script.js" @@ -0,0 +1,46 @@ +const $currencyOne = document.querySelector("#currency-one"); +const $currencyTwo = document.querySelector("#currency-two"); +const $amountOne = document.querySelector("#amount-one"); +const $amountTwo = document.querySelector("#amount-two"); +const $swap = document.querySelector("#swap"); +const $rate = document.querySelector("#rate"); + +$amountOne.addEventListener("change", changeAmountOne); +$currencyOne.addEventListener("change", changeCurrencyOne); +$currencyTwo.addEventListener("change", changeCurrencyTwo); +$swap.addEventListener("click", handleSwap); + +let amountOneValue = $amountOne.value; +let currencyOneValue = $currencyOne.options[$currencyOne.selectedIndex].value; +let currencyTwoValue = $currencyTwo.options[$currencyTwo.selectedIndex].value; + +function changeAmountOne() { + amountOneValue = $amountOne.value; + setResultValue(currencyOneValue, currencyTwoValue); +} +function changeCurrencyOne() { + currencyOneValue = $currencyOne.value; + setResultValue(currencyOneValue, currencyTwoValue); +} +function changeCurrencyTwo() { + currencyTwoValue = $currencyTwo.value; + setResultValue(currencyOneValue, currencyTwoValue); +} +function handleSwap() { + const temp = currencyOneValue; + $currencyOne.value = currencyTwoValue; + $currencyTwo.value = currencyOneValue; + currencyOneValue = currencyTwoValue; + currencyTwoValue = temp; + setResultValue(currencyOneValue, currencyTwoValue); +} +function setResultValue(currencyOneValue, currencyTwoValue) { + fetch(`https://api.exchangerate-api.com/v4/latest/${currencyOneValue}`) + .then((rest) => rest.json()) + .then((data) => { + $rate.textContent = `1 ${currencyOneValue} = ${data.rates[currencyTwoValue]} ${currencyTwoValue}`; + $amountTwo.value = ( + data.rates[currencyTwoValue] * amountOneValue + ).toFixed(2); + }); +} diff --git "a/\354\240\204\354\261\204\354\235\264/ExchangeRate/style.css" "b/\354\240\204\354\261\204\354\235\264/ExchangeRate/style.css" new file mode 100644 index 0000000..5a8b1a4 --- /dev/null +++ "b/\354\240\204\354\261\204\354\235\264/ExchangeRate/style.css" @@ -0,0 +1,93 @@ +: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; +} + +h1 { + 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; + /* You may not need these following lines. The arrow did not show for me on MacOS/Chrome so I added it. Just remove it if you would like */ + 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%22292.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; + } +}