Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[채이] 4-ExchangeRate #20

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

[채이] 4-ExchangeRate #20

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
072ba9c
feat: source
chaeiJeon Apr 3, 2022
8179768
feat: html
chaeiJeon Apr 3, 2022
c9f016d
feat: css
chaeiJeon Apr 3, 2022
f99be90
feat: js
chaeiJeon Apr 3, 2022
ed4a7f2
feat: README
chaeiJeon Apr 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 22 additions & 0 deletions 전채이/ExchangeRate/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 함수에 인자를 넘겨줘서 환율을 나타내게 함.
Binary file added 전채이/ExchangeRate/img/money.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
142 changes: 142 additions & 0 deletions 전채이/ExchangeRate/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,142 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Exchange Rate Calculator</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<img src="img/money.png" alt="" class="money-img" />
<h1>Exchange Rate Calculator</h1>
<p>Choose the currency and the amounts to get the exchange rate</p>

<div class="container">
<div class="currency">
<select id="currency-one">
<option value="AED">AED</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="BGN">BGN</option>
<option value="BRL">BRL</option>
<option value="BSD">BSD</option>
<option value="CAD">CAD</option>
<option value="CHF">CHF</option>
<option value="CLP">CLP</option>
<option value="CNY">CNY</option>
<option value="COP">COP</option>
<option value="CZK">CZK</option>
<option value="DKK">DKK</option>
<option value="DOP">DOP</option>
<option value="EGP">EGP</option>
<option value="EUR">EUR</option>
<option value="FJD">FJD</option>
<option value="GBP">GBP</option>
<option value="GTQ">GTQ</option>
<option value="HKD">HKD</option>
<option value="HRK">HRK</option>
<option value="HUF">HUF</option>
<option value="IDR">IDR</option>
<option value="ILS">ILS</option>
<option value="INR">INR</option>
<option value="ISK">ISK</option>
<option value="JPY">JPY</option>
<option value="KRW">KRW</option>
<option value="KZT">KZT</option>
<option value="MXN">MXN</option>
<option value="MYR">MYR</option>
<option value="NOK">NOK</option>
<option value="NZD">NZD</option>
<option value="PAB">PAB</option>
<option value="PEN">PEN</option>
<option value="PHP">PHP</option>
<option value="PKR">PKR</option>
<option value="PLN">PLN</option>
<option value="PYG">PYG</option>
<option value="RON">RON</option>
<option value="RUB">RUB</option>
<option value="SAR">SAR</option>
<option value="SEK">SEK</option>
<option value="SGD">SGD</option>
<option value="THB">THB</option>
<option value="TRY">TRY</option>
<option value="TWD">TWD</option>
<option value="UAH">UAH</option>
<option value="USD" selected>USD</option>
<option value="UYU">UYU</option>
<option value="VND">VND</option>
<option value="ZAR">ZAR</option>
</select>
<input type="number" id="amount-one" placeholder="0" value="1" />
</div>

<div class="swap-rate-container">
<button class="btn" id="swap">
Swap
</button>
<div class="rate" id="rate"></div>
</div>

<div class="currency">
<select id="currency-two">
<option value="AED">AED</option>
<option value="ARS">ARS</option>
<option value="AUD">AUD</option>
<option value="BGN">BGN</option>
<option value="BRL">BRL</option>
<option value="BSD">BSD</option>
<option value="CAD">CAD</option>
<option value="CHF">CHF</option>
<option value="CLP">CLP</option>
<option value="CNY">CNY</option>
<option value="COP">COP</option>
<option value="CZK">CZK</option>
<option value="DKK">DKK</option>
<option value="DOP">DOP</option>
<option value="EGP">EGP</option>
<option value="EUR" selected>EUR</option>
<option value="FJD">FJD</option>
<option value="GBP">GBP</option>
<option value="GTQ">GTQ</option>
<option value="HKD">HKD</option>
<option value="HRK">HRK</option>
<option value="HUF">HUF</option>
<option value="IDR">IDR</option>
<option value="ILS">ILS</option>
<option value="INR">INR</option>
<option value="ISK">ISK</option>
<option value="JPY">JPY</option>
<option value="KRW">KRW</option>
<option value="KZT">KZT</option>
<option value="MXN">MXN</option>
<option value="MYR">MYR</option>
<option value="NOK">NOK</option>
<option value="NZD">NZD</option>
<option value="PAB">PAB</option>
<option value="PEN">PEN</option>
<option value="PHP">PHP</option>
<option value="PKR">PKR</option>
<option value="PLN">PLN</option>
<option value="PYG">PYG</option>
<option value="RON">RON</option>
<option value="RUB">RUB</option>
<option value="SAR">SAR</option>
<option value="SEK">SEK</option>
<option value="SGD">SGD</option>
<option value="THB">THB</option>
<option value="TRY">TRY</option>
<option value="TWD">TWD</option>
<option value="UAH">UAH</option>
<option value="USD">USD</option>
<option value="UYU">UYU</option>
<option value="VND">VND</option>
<option value="ZAR">ZAR</option>
</select>
<input type="number" id="amount-two" placeholder="0" />
</div>
</div>

<script src="script.js"></script>
</body>
</html>
46 changes: 46 additions & 0 deletions 전채이/ExchangeRate/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이벤트 리스너를 개인적으로 선언된 함수 아래에 적는게 나을 것 같다고 생각해요!
함수 선언식으로 작성해서 함수들이 호이스팅 되어서 사용 가능한 부분이라서 지금처럼 작성하면 상관 없지만
그래도 함수 선언부 아래에서 호출하는게 나을 것 같다는 개인적인 생각입니다!

https://joshua1988.github.io/web-development/javascript/function-expressions-vs-declarations/

$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) {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

callback도 있고, async await으로 할 수도 있을 거 같아요

fetch(`https://api.exchangerate-api.com/v4/latest/${currencyOneValue}`)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 👍 👍 배워감니다

.then((rest) => rest.json())
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rest라고 작성 되어 있는데 res에 대한 오타인지 아니면 일부러 rest로 했는지 궁금해요

.then((data) => {
$rate.textContent = `1 ${currencyOneValue} = ${data.rates[currencyTwoValue]} ${currencyTwoValue}`;
$amountTwo.value = (
data.rates[currencyTwoValue] * amountOneValue
).toFixed(2);
});
}
93 changes: 93 additions & 0 deletions 전채이/ExchangeRate/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}