練習來自Wes Bos的JS30
notice: 因為希望有多一點的創作練習，從第八日開始作品不再照著範例練習(但是主要知識的運用是一樣的)，若希望看到原作者的練習可以點上面的連結。
| 挑戰 | 內容 | 筆記 | Demo |
|---|---|---|---|
| Drum Kit | 按下指定按鍵會出現指定聲響，於按下同時產生動畫效果。 運用基本JavaScript，監聽keydown事件，取得e.keyCode，觸發聲音播放與toggle加上動畫效果 |
筆記 | Demo |
| css+JS Clock | 製作大時鐘與放上背景音樂撥放。 指針部分利用transform-origin通一基準點，透過setInterval()讓每一秒都抓一次時間 |
筆記 | Demo |
| Update CSS Variables with JS | 監聽每個input的改變，以動態改變CSS變數 使用forEach: 選取所有的inputs，使用forEach個別監聽 |
筆記 | Demo |
| Array Cardio | 運用filter,map,sort,reduce,from | 筆記 | console運作 |
| Flex Panel Image Gallery | 運用flex特性與transition動畫效果 監聽點擊，toggle加入效果Class呈現。 |
筆記 | Demo |
| Ajax Type Ahead | 利用fetch遠端取資料，並依使用者輸入字符的不同 查找不同的資料，會使用到正規表達式來處理字串。 |
筆記 | Demo |
| HTML5 Canvas | 透過Html的canvas 標籤搭配Javascript做出畫布的效果。 效果包括:顏色/粗細/清除。 |
筆記 | Demo |