# JS練習_匯率轉換器
手切匯率轉換器模板，帶入匯率API，使輸入金額即呈現轉換後的金額。

## 成品畫面

## 功能
- 可以選擇想要的幣別帶入當下匯率
- 互換幣別，轉換結果

## HTML
- 利用select與option標籤做出下拉選單的樣式。並在每個選項有加入代表匯率幣值的值value。

## CSS
- 利用變數的形式，讓元素在取用顏色上面更方便

:root {
  --primary-color: #5fbaa7;
}
/* background: var(--primary-color); 需要使用時填入*/

- 利用設定RWD的變化，讓畫面可以隨著螢幕的伸縮而跟著轉換。

@media (max-width: 600px) {
  .currency input {
    width: 200px;
  }
}

## JS

### 1. 事件
利用change/ click 事件讓使用者可以透過
- 輸入金額按下`enter`就可以得到已乘上匯率後的金額
- 按下swap執行幣別轉換，並更新金額
### 2. 套入API
#### 觀察API
發現我們要的匯率資料在`rates`
在javascript是利用fetch()方法套入API，輸入你要做的事。
[fetch 筆記](https://hackmd.io/@chrislinlin/HktlQpuEO)
這裡我們要執行兩件事：

- 將rate的值更改。
- 因為點擊swap而修改
- 因為輸入金額的修正而更改
- input的amount值修正。帶入更新後的rate與amount-one相乘

function calculate() {
    const currency_one = $('#currency-one').val();
    const currency_two = $('#currency-two').val();

    fetch(`https://api.exchangerate-api.com/v4/latest/${currency_one}`)
    // 
    .then(function(res) {
    //回傳 參數的json值
        return res.json();
    })
    .then(function(data) {
        const rate = data.rates[currency_two];
        $('#rate').text(`1 ${currency_one} = ${rate} ${currency_two}`);

        $('#amount-two').val(($('#amount-one').val() * rate).toFixed(4)); 
    });
}

### 3. val()
在javascript裡要取得value，我們會透過 **物件/元素.value**來取值和賦予值。

// get value
var value1 = document.getElementById('currency-one').value;
var value2 = document.getElementById('currency-two').value;

// assign new value
document.getElementById('currency-one').value = "new value 123";
document.getElementById('currency-two').value = "new value 456"

但在jQuery裡要透過 **.val()** 獲取值且利用 **val(填入要改變值)**，將值改變。

// get value
var value1 = $('.currency-one').val();
var value2 = $('.currency-two').val();

// assign new value
$('.currency-one').val("new value 123");
$('.currency-two').val("new value 456");

本次例子
- 我們利用val()取值，將匯率1的值 賦予給temp
- 將匯率1的值 改為匯率2的值。在jQuery裡是利用`val()`裡賦值
- 再將原來`temp`變數中儲存的匯率1的值賦予給匯率2
- 最後在呼叫函式進行重新計算

    $('#swap').click(function(){
        var temp =  $('#currency-one').val();
        $('#currency-one').val($('#currency-two').val());
        $('#currency-two').val(temp);
        var currency_one =  $('#currency-one').val();
        var curreㄟncy_two =  $('#currency-two').val();
        calculate();

###### tags: `javascript` `jQuery`