系列文章
[Day1] - Drum Kit(JS30 x 鐵人 30 x MDN)
今天我們來做一個可以演湊鼓聲的網頁 新增事件監聽：EventTarget: addEventListener() method 節點選取：Document:...
[Day2] - JS and CSS Clock(JS30 x 鐵人 30 x MDN)
今天我們來做一個網頁時鐘 節點選取：Document: querySelector() method 重複執行：setInterval() global f...
[Day3] - CSS Variables(JS30 x 鐵人 30 x MDN)
實做一個網頁讓使用者能調整照片像框的粗度、顏色、模糊度 節點選取：Document: querySelector()、Document: querySelec...
[Day4] - Array Cardio part1(JS30 x 鐵人 30 x MDN)
今天來玩玩 Array method，並印出結果吧-趴萬 陣列篩選：Array.prototype.filter() 陣列排序：Array.prototyp...
[Day5] - Flex Panel Gallery(JS30 x 鐵人 30 x MDN)
實做一個圖片畫廊，當使用者點擊圖片時畫面會聚焦那張圖片(圖片佔比增加)，再次點擊會恢復 CSS 彈性盒子排版：CSS flexible box layout...
[Day6] - Type Ahead(JS30 x 鐵人 30 x MDN)
實作一個網頁可以搜尋美國的城市/州，並將搜尋結果渲染出來並標示匹配字樣 請求資料：Fetch API 請求的回覆：Response 數字格式：In...
[Day7] - Array Cardio part2(JS30 x 鐵人 30 x MDN)
今天來玩玩 Array method，並印出結果吧-趴兔 陣列判斷(其中之一元素符合)：Array.prototype.some() 陣列判斷(每個元素...
[Day8] - Fun with HTML5 Canvas(JS30 x 鐵人 30 x MDN)
實做一個 Canvas 畫布，會隨著使用者滑鼠軌跡自動變換畫筆顏色及粗度 網頁畫布 API:Canvas API 網頁畫布 2D 渲染接口：CanvasRe...
[Day9] - Dev Tools Domination(JS30 x 鐵人 30 x MDN)
活用 console API 幫助開發除錯 瀏覽器控制台調試：console APIs 不知道大家是不是跟我一樣都用一招console.log()打天下呢...
[Day10] - Hold Shift and Check Checkboxes(JS30 x 鐵人 30 x MDN)
實做一個表單，按著 shift 點擊可區間全選/取消功能 滑鼠事件-shift 鍵與否屬性：MouseEvent: shiftKey property 輸入...