diff --git a/hyewon/4-exchangeRate/README.md b/hyewon/4-exchangeRate/README.md new file mode 100644 index 0000000..0edd771 --- /dev/null +++ b/hyewon/4-exchangeRate/README.md @@ -0,0 +1,58 @@ +# 목차 +- `fetch()` +- swap + +## `fetch()` +- - - +- Fetch API 를 이용하면 Request/Response 를 조작하는 것이 가능하다. +- fetch() 메소드는 첫번째 인자로 URL, 두번째 인자로 option 객체를 받고, Promise 객체를 반환한다.
+반환된 객체는 API 호출이 성공했을 경우에는 response 객체를 resolve 하고, 실패했을 경우에는 error 객체를 reject 한다. + +### 내 코드 +```javascript +fetch("https://v6.exchangerate-api.com/v6/0c8fbd2c3ca43caf99612cff/latest/USD") + .then((response) => { return response.json() }) + .then((response) => { + // 생략 + }) +``` +그런데 왜 첫번째 then() 에서 바로 response.json() 을 사용하지 않고 그 다음 then() 으로 넘겨줘야만 하는지 잘 모르겠다... + +## swap +- - - +```javascript +//JavaScript program to swap two variables + +//take input from the users +let a = prompt('Enter the first variable: '); +let b = prompt('Enter the second variable: '); + +//using destructuring assignment +[a, b] = [b, a]; + +console.log(`The value of a after swapping: ${a}`); +console.log(`The value of b after swapping: ${b}`); +``` +↑ 구조 분해 할당을 이용한 변수 값 교환 + +### 내 코드 +```javascript +function swap() { + const firIndex = $firstSelect.selectedIndex + const secIndex = $secondSelect.selectedIndex + $firstSelect.options[secIndex].selected = true + $secondSelect.options[firIndex].selected = true + [$firstSelect, $secondSelect] = [$secondSelect, $firstSelect] + calculate() +} +``` + +## 참조 +- - - +- `fetch()`
+https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch
+https://developer.mozilla.org/en-US/docs/Web/API/fetch
+https://www.daleseo.com/js-window-fetch/
+- swap
+https://www.programiz.com/javascript/examples/swap-variables
+https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
\ No newline at end of file diff --git a/hyewon/4-exchangeRate/img/money.png b/hyewon/4-exchangeRate/img/money.png new file mode 100644 index 0000000..9318522 Binary files /dev/null and b/hyewon/4-exchangeRate/img/money.png differ diff --git a/hyewon/4-exchangeRate/index.html b/hyewon/4-exchangeRate/index.html new file mode 100644 index 0000000..63b4043 --- /dev/null +++ b/hyewon/4-exchangeRate/index.html @@ -0,0 +1,142 @@ + + + + + + + Exchange Rate Calculator + + + + +

Exchange Rate Calculator

+

Choose the currency and the amounts to get the exchange rate

+ +
+
+ + +
+ +
+ +
+
+ +
+ + +
+
+ + + + \ No newline at end of file diff --git a/hyewon/4-exchangeRate/script.js b/hyewon/4-exchangeRate/script.js new file mode 100644 index 0000000..3960314 --- /dev/null +++ b/hyewon/4-exchangeRate/script.js @@ -0,0 +1,29 @@ +const $firstSelect = document.getElementById('currency-one') +const $secondSelect = document.getElementById('currency-two') +const $rate = document.getElementById('rate') +const $amount1 = document.getElementById('amount-one') +const $amount2 = document.getElementById('amount-two') + +calculate() + +function calculate() { + const firstCountry = $firstSelect.options[$firstSelect.selectedIndex].value + const secondCountry = $secondSelect.options[$secondSelect.selectedIndex].value + + fetch("https://v6.exchangerate-api.com/v6/0c8fbd2c3ca43caf99612cff/latest/USD") + .then((response) => { return response.json() }) + .then((response) => { + const rate = ((response.conversion_rates[secondCountry]) / (response.conversion_rates[firstCountry])).toFixed(3) + $rate.textContent = `1 ${firstCountry} = ${rate} ${secondCountry}` + $amount2.value = (parseFloat($amount1.value) * rate).toFixed(2) + }) +} + +function swap() { + const firIndex = $firstSelect.selectedIndex + const secIndex = $secondSelect.selectedIndex + $firstSelect.options[secIndex].selected = true + $secondSelect.options[firIndex].selected = true + [$firstSelect, $secondSelect] = [$secondSelect, $firstSelect] + calculate() +} \ No newline at end of file diff --git a/hyewon/4-exchangeRate/style.css b/hyewon/4-exchangeRate/style.css new file mode 100644 index 0000000..8c5a6db --- /dev/null +++ b/hyewon/4-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; + } + } \ No newline at end of file