tags: ItIron2022 Javascript

前言

今天將接續我們昨天完成的ui以及事前規劃，快速的完成這個簡易版的匯率轉換器，過程中你也可以思考如何繼續優化這個專案(比方說開放下拉選單、ui優化等)

Getting started

Step1: 選取所有需要的元素

我們這次的專案會用到許多DOM元素，包含取值以及動態更新的部分，同時我們需要一個額外的物件儲存匯率的資訊，請你先在js檔案的開頭寫入以下的內容。

// 選取顯示匯率、日期的元素
const title = document.querySelector(".title");
const subTitle = document.querySelector(".sub-title");
const date = document.querySelector(".date");

// 選取Select選單元素
const fromSelect = document.querySelector("#fromSelect");
const toSelect = document.querySelector("#toSelect");

// 選取Input欄位元素
const fromInput = document.querySelector("#fromInput");
const toInput = document.querySelector("#toInput");

// 建立匯率物件
const rateMapping = {};

Step2: 完成fetchCurrencyData函數

我們昨天有提到載入頁面一開始我們就需要去請求匯率的資料，並同時做以下兩件事情

• 將請求到的匯率資料存在預先宣告的物件內
• 動態更新頁面上的ui資訊(匯率、日期等)

請你在剛剛的程式碼下補上以下的內容

// 載入js檔案時就先呼叫請求資料的函數
fetchCurrencyData();

async function fetchCurrencyData() {
  const res = await fetch(`https://api.exchangerate-api.com/v4/latest/TWD`);
  const data = await res.json();
  
  // 將請求到的資料存進我們預先宣告的物件中
  rateMapping["JPY"] = data.rates["JPY"];
  rateMapping["TWD"] = (1 / Number(data.rates["JPY"])).toFixed(2);
  
  // 利用得到的資料更新畫面上顯示的匯率資訊
  title.textContent = `${rateMapping["JPY"]} 日圓`;
  
  // 更新畫面上顯示的時間
  date.textContent = Intl.DateTimeFormat("zh-tw", {
    timeStyle: "long",
    dateStyle: "long",
  }).format(new Date());
}

這邊補上一些簡單的說明

• rateMapping
  在我們這樣操作後，rateMapping的值會變得像以下這樣

{
    'JPY' : 4.57
}

如此一來我們之後就可以在程式中隨時使用這個匯率資料而不用一直重新發請求囉！

• Intl.DateTimeFormat

Intl模組可以用來處理語言或是時間之類的物件，你會需要傳入語言的代碼，需要額外設定的話則是傳入他支援的一些選項，詳細的內容可以參考mdn的說明。

Step3: 加入監聽器的設置

最後就是input欄位的監聽器設置了，這個步驟反而相對單純很多，當我們今天在台幣欄位輸入時，我們只要監聽台幣欄位的變化並將變化的值乘以匯率即可，反之亦然。

fromInput.addEventListener("input", (e) => {
  toInput.value = Number(e.target.value) * Number(rateMapping[toSelect.value])
});

toInput.addEventListener("input", (e) => {
  fromInput.value = Number(e.target.value) * Number((1 /rateMapping[toSelect.value]).toFixed(2));
});

記得我們在做日幣轉台幣時需要自行計算反向的匯率，為了與我們得到的匯率資料格式相同將計算的值定在小數點後兩位！ 到這邊基本功能就已經完成了，我們看一下目前的運作情況吧！

Step4: 優化處理

看起來一切雖然運作正確，不過你仔細看的話會發現一旦清空整個輸入匡，另一邊的數值就會變為預設的0

並不是什麼大問題，但看了就是礙眼！ 核心的原因在於我們在做計算時，若e.target.value為空值，計算出的結果就會是0並顯示在另一個欄位上，既然這是兩邊都存在的問題，我們就一起處理吧！ 請你宣告一個新的函數並寫入以下的內容。

function formatValue(value, rate) {
  return !!value ? Number(value) * Number(rate) : null;
}

這個函數我們做的事情很簡單，假設今天傳入的value是空值(0, 空字串之類的)，那麼我們就回傳null讓input欄位不會有任何顯示，最後我們將函數取代之前在監聽器內寫的程式碼就可以囉！

fromInput.addEventListener("input", (e) => {
  toInput.value = formatValue(e.target.value, rateMapping[toSelect.value]);
});

toInput.addEventListener("input", (e) => {
  fromInput.value = formatValue(e.target.value, (1 / rateMapping[toSelect.value]).toFixed(2));
});

最後看一下運作的結果，非常好！一切正常！

總結

我們今天完成了匯率轉換器的剩餘的功能，這是個非常簡單但可以練習到很多東西的專案，仔細去看html/css的部分你也可以發現一些小細節，在js部分更是有配合ajax & DOM的應用操作，我個人是蠻推薦可以玩玩看的！
你也可以用這個專案為基礎繼續完成下拉選單以及圖表的部分，這就交給你自己鑽研囉！ 有什麼問題都歡迎提出，我很樂意協助的！

文章中的範例程式碼可以在這邊取得，歡迎自行取用

轉職Q & A

Danny，投遞的部分我已經開始了，目前陸續有收到一些回信或主動聯繫，不過有些公司有給我一份作業要求我在指定時間內完成，這些作業我都需要做嗎？

很好的問題，一般這種東西我們會稱為前測，前測有線上直接做或是讓你回家做兩種，可以在大致分為類似leetcode的題目測驗或是一個小型專案，讓你帶回家做的以後者居多。先從結論說起，你並不是每一個前測都需要做，收到這種前測我會建議你自己先做個評估，你同時間在面試的公司可能有複數個，每個公司都需要耗費你一些心力去準備，如果開作業的這個職缺你並不是真的這麼感興趣，那麼你自然可以選擇無視！ 不過如果你當下真的很閒...那當練習我覺得也是個選擇，畢竟實作是最好的練習，比起一直看教學影片不知道有用了多少！

本文章同步發布於個人部落格，有興趣的朋友也可以來逛逛~!