Frontend Intermediate Course - 作業七

作業七的 GitHub 連結：走向國際：i18n

這次也是在最後一天做完，還參考（偷看）了兩個同學的作業才寫出來。雖然相較於作業四、五、六簡單，但我還是在後面卡了一下。原本很希望能夠自己解開，最後還是跟胡立老師求救 XD

作業沒有要求用 button 做出切換語言的按鈕，但想要讓畫面好看，所以選擇用 button 然後加了一些 CSS，並且讓當前語言的按鈕有被選取的感覺。可是在切換語言的時候，會出現一個外框，而且已經在 CSS 中設 border: none;，所以一直搞不清楚為什麼會有外框。

如圖：點選英文按鈕出現外框線。

後來看了其中一個同學的 CSS 檔案，才發現還要設 outline: none; 才可以。應該是 HTML 對 button 的原有設定，要是沒有偷看同學的作業我可能會卡關更久 QAQ


之後也是偷看同學的作業才知道大概怎麼寫，流程大概是：
1. 在 HTML 的 button 元件中設定 onclick 事件，然後設成 changeLang('zh-tw') 跟 changeLang('zh-tw') 函式。

2. 在 JavaScript 中宣告語言參數 currentLang 並且放到 API 參數上。然後加入 changeLang 這個函式，函式裡做：
1) 改標題，利用 window.I18N[lang].TITLE 抓取對應的語言。
2) 在選取按鈕上加入 CSS。
3) 把 currentLang 設成 changeLang 函式中的參數 lang。
4) offset 設成 0。
5) 清空 $('.container')。
6) 重新載入新的資料。

正當我以為應該要成功的時候，卻在切換語言時候整個畫面都清空，新資料有載入但沒有跑到畫面上。卡了很久，後來還是要跟胡立老師求救。

原來是因為我在 Ajax 那個部分寫的是

$(getViewbox(streams[i])).insertBefore($('#first_viewbox'));

可是當 $('.container') 被清空後，原本用來占位子維持版面的 <div id="first_viewbox"></div> 也一起被清空了，所以沒有元件可以讓新資料 insertBefore 到畫面上，所以畫面就變空白了。

後來在 Ajax 那裡改用

$container.append(getViewbox(streams[i]));

暫時解決畫面空白的問題，不過這個方法會有跑版的問題。當時胡立老師有給提示，但實在太想睡了，所以先交作業明天再繼續 XD

還有另外一個小 bug 是按切換語言按鈕時，第一次無法轉換 CSS，第二次之後才正常。

所以就先交作業然後備註上註明這兩個 bug，當時已經快凌晨兩點，頭腦無法正常運作了 orz

附上這次作業的 CodePen：
（下篇會附上修改過的版本）

See the Pen HW_7 by Peggy (@pychiang) on CodePen.

備註：作業原本有兩個 script 語言檔，但是 CodePen 上無法附加額外的 script 檔案，所以一起放在 JavaScript 那欄的最底下。