自學日記

學習程式相關知識及學習法

0%

作品練習-Exchange Rate Calculator

發表於 更新於

03實作練習 Exchange Rate Calculator

HTML

設定圖片

1
2
3
<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>

製作基準匯率下拉式表單及基準的幣值輸入框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
    <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>
<!--設置selected為預設值  -->
                <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>

製作轉換匯率按鈕

1
2
3
4
5
6
7
8
        <div class="swap-rate-container">
            <button class="btn" id="swap">
                Swap
            </button>
            
<!-- 此處會反映出匯率 -->
            <div class="rate" id="rate"></div>
        </div>

製作比對的匯率下拉式表單及比對的幣值輸入(出)框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
        <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>
<!--這裡對比上方，沒有value，因為value由上方輸入決定其比對後轉換的匯率值  -->
            <input type="number" id="amount-two" placeholder="0">
        </div>
    </div>

HTML完成圖

CSS

基礎body設定、萬用字源選取器*及根目錄選取器:root

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
/*根目錄選取器 ，此處建立變數，ex:--name-color: #fff */
/*此處希望正個頁皆可使用所以設置於此，如果只希望一部分用到就寫在該物件選取器中，ex: p {
	--name-title-red: #fff;
} */
:root{
    --primary-color: #5fbaa7;
}
/* 表示選擇頁面中所有元素（標籤）。萬用字元選擇器不需要呼叫，自動就給所有元素使用樣式。 */
*{
/* box-sizing 的作用是控制 width 與 height，Border-box 為寬高設定作用在邊框外緣的範圍內  */
    box-sizing: border-box;
}

body{
    background-color: #f4f4f4;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', 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;
}

參考資料:
:root 根目錄選取器 - 叫你阿爸出來講
CSS常見選擇器
Box-sizing - 金魚都能懂的CSS必學屬性

設置swap按鈕樣式及圖片寬度

1
2
3
4
5
6
7
8
9
10
11
12
.btn {
    color: #fff;
    background: var(--primary-color);
    cursor: pointer;
    border-radius: 5px;
    font-size: 12px;
    padding: 5px 12px;
}

.money-img {
    width: 150px;
}

設置貨幣選項及輸入框

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.currency {
    padding: 40px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.currency select {
    padding: 10px 20px 10px 10px;
/*將select預設樣式清除，進而重新設定，設定三個appearance是為了符合各家瀏覽器  */
    -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%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;
}

設定匯率顯示區樣式

  • focus外框消除，按鈕、選單滑鼠滑過時有預設的藍或黑外框，這裡設定將它消除。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    .swap-rate-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .rate {
        color: var(--primary-color);
        font-size: 14px;
        padding: 0 10px;
    }
    /* 消除預設的focus外框(點擊時呈現藍色或黑色的border) */
    select:focus,
    input:focus,
    button:focus {
        outline: 0;
    }
    /* 在拉縮時畫面不會變形*/
    @media (max-width: 600px) {
        .currency.input {
            width: 200px;
        }
    }
    參考資料:
    CSS 的元件狀態
    CSS Media Queries

JavaScript

宣告

  • 利用const宣告，因為匯率會改變
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    // 基準的幣值(ex.TWD)
    const currencyEl_one = document.getElementById ('currency-one');
    // 基準幣值的價格總數
    const amountEl_one = document.getElementById ('amount-one');
    // 轉換的幣值(ex.USD)
    const currencyEl_two = document.getElementById ('currency-two');
    // 轉換幣值的價格總數
    const amountEl_two = document.getElementById ('amount-two');
    // 顯示的匯率
    const rateEl = document.getElementById('rate');
    //  swap的按鈕
    const swap = document.getElementById('swap');

    取得匯率更新(fetch)& 取得資料更新(DOM)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    // Fetch exchange rates and update the DOM

    function caclulate() {
        const currency_one = currencyEl_one.value;
        const currency_two = currencyEl_two.value;
    // 取得此網址api
        fetch(`https://api.exchangerate-api.com/v4/latest/${currency_one}`)
            // 取得json檔案格式，以json()方法處理
            .then(res => res.json())
            .then(data =>{
                // console.log(data);
                const rate = data.rates[currency_two];

                rateEl.innerText = `1${currency_one} = ${rate} ${currency_two}`;

                // toFixed 取第幾位四捨五入
                amountEl_two.value = (amountEl_one.value * rate).toFixed(2);
            });
    }
    參考資料:
    JavaScript Fetch API 使用教學
    JavaScript toFixed() 方法

事件監聽

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Event listeners
// 依據幣值的改變，匯率顯示也跟著改變，轉換的匯率輸入框也會改變
currencyEl_one.addEventListener('change',caclulate);
// 基準幣值輸入框，在輸入之後或者利用滑鼠上下調整數字，也會影響轉換匯率輸入框的變化
amountEl_one.addEventListener('input',caclulate);
// 幣值改變，匯率顯示改變，轉換匯率的輸入框也會改變
currencyEl_two.addEventListener('change',caclulate);
amountEl_two.addEventListener('input',caclulate);

// swap鍵交換匯率 & 使用temp變數
swap.addEventListener('click', () =>{
    const temp = currencyEl_one.value;
    currencyEl_one.value = currencyEl_two.value;
    currencyEl_two.value = temp;
    caclulate();
});

caclulate();

匯率轉換(currency & amout)示意圖

用文字說明比較籠統，放上圖示比較清楚(以顏色及箭頭區隔與說明影響範圍)

參考資料:
事件處理
Events: change, input, cut, copy, paste