tags: ItIron2022 Javascript

前言

我們昨天完成了最主要的核心功能，今天剩餘的時間我們就來做一些剩餘的優化，就跟之前幾個專案一樣，我也留了一些作業讓你們嘗試 :D 那我們就開始吧！

Getting started

Step1: 開啟/隱藏難度選擇表單

目前我們在每次答題時都是會加時5秒，不過這樣一視同仁的行為可能會讓人覺得太難/太簡單，因此加入個難度設定會讓使用上更親民一些吧！ UI的部分我們在前兩天做好了，我們現在只要加上邏輯處理的部分就可以了，首先我們自然需要先選取所有相關的元素，請你在昨天的基礎上補上以下的程式碼

// select DOM elements
const settingBtn = document.getElementById("setting-btn");
const setting = document.getElementById("setting");
const difficultySelect = document.getElementById("difficulty");

對照一下我們目前的ui應該你會更有感覺

接著我們需要在settingBtn上加入監聽器，點擊settingBtn會開啟/隱藏整個setting元素
，隱藏用的class我們也在之前寫好了，那麼剩下的自然就很簡單囉！

.setting.hide {
  transform: translateY(-100%);
}

請你在js檔案中監聽器的部分新增一個監聽器

// Setting btn click
settingBtn.addEventListener("click", () => {
  setting.classList.toggle("hide");
});

這麼一來在點擊時就會自動toggle "hide"這個class，選單便會根據狀態開啟/隱藏。

Step2: 儲存使用者選擇的難度

這邊你可能會想，這有什麼難的？ 不就一個變數就能解決的問題嗎？ 你說對了！ 但這邊我想動點小手腳，我會希望使用者每次打開這個頁面時就繼續他上次選擇的難度，於是我們會需要一種更長久的儲存方式，像這種情況localStorage就是個很好的選擇，請你將以下的程式碼
加入js檔案中。

// init difficulty
let difficulty =
  localStorage.getItem("difficulty") === null
    ? "medium"
    : localStorage.getItem("difficulty");

// set diffculty value
difficultySelect.value = difficulty;

我們首先建立一個difficulty變數，這個變數的值會先試著從localStorage中找是否有過去的紀錄，如果沒有的話就預設為"medium"字串(注意localStorage.getItem在指定的key不存在時會回傳null)，最後再將這個值給畫面上的difficultySelect元素做呈現。

Step3: 根據困難度調整增加的時間

最後就是答對題目時的調整了，我們之前有說過這個遊戲會在你答對題目時增加可用的時間，當時我們先設定為每次答題後+5秒，現在我們可以根據困難度做更細部的調整了，稍稍調整一下input監聽器的部分吧！

inputEl.addEventListener("input", (e) => {
  const insertText = e.target.value;
  if (insertText === randomWord) {
    addWord();
    updateScore();
    // 加入以下的判斷
    switch (difficulty) {
      case "easy":
        time += 5;
        break;
      case "medium":
        time += 3;
        break;
      case "hard":
        time += 1;
        break;
    }
    updateTime();
    e.target.value = "";
  }
});

Step4: 細部優化

到這邊包含難易度設定的部分就已經全部完成了，不過有個小地方挺礙眼的。尤其是頁面一打開遊戲就開始了，為了讓使用者可以快速輸入，一開始就應該要指向輸入的位置，這麼一來就可以直接打字而不需要手動選擇輸入框囉！ 一行搞定的東西我們就不用跟他客氣了，請在程式碼中加入這一行。

// focus text on start
inputEl.focus();

總結

這麼一來一個簡易的打字遊戲就結束了，篇幅雖有點長但實際上程式碼的部分並不算太多，多半的篇幅都是一些說明，這個遊戲自然還有很多地方可以優化的，比方說你可以有個開始遊戲的按鈕、或是答對時給予一些畫面提示等！ sky's the limit! 行有餘力的話可以自由發揮創意修改！ 明天我們將進入新的主題！

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

轉職Q & A

Danny，我目前已經跑了幾個面試了，但後續都完全沒有消息，我該怎麼辦？

很好的問題，有些人會在收到拒絕或無聲卡後感到沮喪或是不安，你當然可以有這樣的情緒，我認為這很正常! 不過很多時候這樣的結果並不是你能力不足所造成的，可能對方想找的就是一個只會泡茶的工程師，而剛好你會的不只泡茶而已!

面試這種事情有太多的變數，而許多因素都不在你自己的掌握中(團隊其實沒缺人、面試題目不合理或流程亂七八糟等)。既然問題不見得出在你身上，每一次的得失心不用放太重，你要做的只是了解自己不足的地方並加以補強，將這樣的經驗活用在下次面試即可。塞翁失馬的故事你也很熟，誰說你錯過這個offer一定是件壞事的，對吧?

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