今天就是完賽日了，其實我大可寫一個「後記」就結束這一回合（畢竟有前言了有後記也不奇怪嘛），但是我還是決定要善始善終，所以我今天要分享的是今年參加 The F2E 精神時光屋練功活動的第六關通關心得。

為何是第六關？最直接來說當然是因為其他關卡對我來說太難了 XD，但反過來說，這一關很適合剛學完基礎 JavaScript 的人練功，所以我選擇分享這一關，正好是運用了過去這些日子我的筆記中所記錄的技術。

醜話先說在前頭，我並沒有把完整的功能做出來，但這也可以讓一些跟我程度差不多的初心者知道，上完基礎 JS 課之後可以做到什麼程度？

以下我將分享我在實作題目時的心得，包括開發流程、HTML & CSS 複習、對一些 JavaScript 基本概念的再認識、目前還沒掌握的技術，以及結語。

好的，那麼，正文開始。

先上 DEMO（用手機會跑版）及原始碼。

閱讀題目說明

讓我們先從活動官網的題目說明開始。因為本次主題很顯然是以接 API 為練功主軸，所以我就先了解一下有哪些 API 以及使用的方法。

四支 API 分別為：

• [GET] 取得所有房型
• [GET] 單一房型細節
• [POST] 預約房型
• [DELETE] 清除所有預約

在此我第一次知道測試 API 的工具—Postman，還特地搜尋了使用方法；也是第一次使用 API TOKEN，不過是用在 Postman 裡的 Authorization，後來實際要 AJAX 時還卡了一下。經過一番摸索，發現 Postman 裡面有一個 "Code" 按鈕，按下去可以直接複製 JS XHR 語法。

// 如何獲得 API 授權
xhr.setRequestHeader("Authorization", "Bearer xxxxxxxxxxxxxxxxx(自己的 TOKEN)");

挑設計稿

開始實作前當然要挑一張順眼（做得出來）的稿子嘛，我很快地就決定採用建良大大的稿，畫面簡潔俐落，能夠讓我腦中馬上就浮現使用動線以及該如何切版，除此之外我也很喜歡深藍色主題。
順帶一提，真的不得不讚美一下 F2E 的平台，上面真的是匯集了各路好手，有些設計稿看起來真的是巧奪天工，這時真的恨自己的技術還不足以做一些炫砲的動態效果 QQ

切版

根據題目說明以及設計稿，這個訂房網站的結構主要就是分成一個首頁及六個房型介紹頁。
由於首頁要展示的房型資料及個別房型的介紹資訊都是由 API 提供，所以 HTML 部分非常簡單，分出頁首、內容、頁尾、版權聲明就好，個別房型頁有再多一個表單元素，其他大部分都是用 JS 將 API 資料渲染到網頁上。

CSS 部分我是用 SASS 寫的，想到年初的時候在做 RWD 最終作業第一次使用 SASS 管理多頁式網站的樣式，就覺得這次應該也很適合。我使用 VS Code 內部的 Live Sass Compiler 當作編譯器，檔案的結構如下：

• all.scss — 專門匯入所有的 .scss 檔
• _mix.scss — 放變數（字型、字體大小、顏色等等）及 mix-in（常用或難記的語法）
• _reset .scss— 就只放 CSS-Reset
• _index.scss — 首頁的樣式
• _layout.scss — 放所有網頁共通的樣式（頁首、頁尾之類的）
• _module.scss — 專門放表單的樣式
• _room.scss — 六個單一房型介紹頁的樣式

在寫樣式時，我學到了：

• 複習浮動跟清除浮動
• 運用了還沒真正學過的 flex 來處理並排跟間隔
• 裁切圖片的方法
• 游標滑過時隱藏區塊會浮上來的小動畫

JavaScript

這個部分最一言難盡了。我必須說我真的是土法煉鋼，一張網頁就一個 .js 檔，會這樣管理是因為六個房型都有各自的 ID，要帶入單一房型介紹的話，API 後面一定要改成相對應的 ID，所以我想這樣應該是最直觀的方式了吧。

在 JS 部分，我運用的技術大概有幾個：

• AJAX
• 把所有內容都放在 xhr.onload 的回傳函式內，因為我發現我真的無法在該函式外讀取區域變數
• 把 API 的資料取出來之後，再依自己需求拿其中的一小部份另外存成陣列
• 事件監聽
• 函式內跑 for 迴圈，用 innerHTML 渲染字串
• 有做出初始畫面
• 將要渲染的 HTML 區塊拆開，由不同函式去渲染（也就是模組化的概念）
• for in 迴圈：此語法可以讀出一個物件中所有屬性與值，我用來讀單一房型提供的設施及服務項目，並將值另外存成一個陣列，跟下述的 if 判斷式併用
• if 判斷式：設施及服務共有 12 個項目，於是我選取了 12 個 DOM，再用12 個 if 逐一將 DOM 跟上述的陣列做對照，如果 true 就動態加樣式
• jQuery 燈箱插件、Fontawesome

開發遇到的困難

最大的困難就是，我找不到合適的 datepicker 套件，而且我也不知道如何處理使用者輸入的時間值。我本來有找到一個勉強可以用的原生 JS datepicker 套件，說勉強是因為它的主題顏色改不動，但最後讓我放棄的點是因為用它選擇入住時間區間的話，會長這樣：

2019–08–23 – 2019–08–25

但是回傳給後端的資料要長這樣：

"2019–08–23","2019-08-24","2019-08-25"

兩種表現方式之間，我不知道要如何轉換 orz

其次就是我對 Date 物件不熟，不知該如何運用。
總之，不知道如何處理「時間」是我最後沒有實作出下訂功能的主因。
要不然我原本的構想感覺應該可行：

1. 各欄位取值
2. datepicker 取值 -> 區分假日價跟平日價並加總
3. 事件監聽：所有欄位都沒空白 -> 按下按鈕啟動函式 -> 執行 AJAX 傳送資料 -> 執行成功或失敗就回傳訊息

看來我還在 "know" 的階段，還不懂得 "how"，嗚嗚嗚....

上傳到 Github

最後我做出的成品缺少了下訂功能跟取消預定，但我還是決定上傳了。多虧我真知灼見趕著把 Git 學起來，現在才有辦法把網頁分享給大家觀看。雖然操作上還不是很熟練，必須搭配自己做的筆記一個指令一個動作，不過相信之後多上傳幾次應該就會熟了。

結語

我中途卡住的時候也有去看 Kuro 大大的直播存檔，Kuro 行雲流水地解說他做好的成品真心讓我佩服不已，這就是大神風範啊......然後看完之後我只覺得還不會 Vue 真的很吃虧，不懂 Vue 的我根本聽不懂直播，以後學到那邊一定要回頭再看一次這個直播。
投稿時也發現大部分開發者也是用 Vue，我只能看著流口水^^

雖然沒做出完整功能讓我很沮喪，不過想到老師在活動開始前說過，精神時光屋不分程度都可以參加，因為活動的目的就是要讓參加者練功，有練到功就達成目的了。想到這番話，就讓我心裡比較安慰，至少我有複習到 Layout、SASS、並且運用剛學到的 JS 基礎。

希望不久的未來，這些目前難倒我的問題，都能夠迎刃而解。

30 天的旅程結束了，但是我的前端勇者之路還在進行，感謝大家陪我一段，我們下次（？）再見（揮手）～