技術 [Day10] - Hold Shift and Check Checkboxes(JS30 x 鐵人 30 x MDN)

實做一個表單，按著 shift 點擊可區間全選/取消功能 滑鼠事件-shift 鍵與否屬性：MouseEvent: shiftKey property 輸入...

技術 [Day9] - Dev Tools Domination(JS30 x 鐵人 30 x MDN)

活用 console API 幫助開發除錯 瀏覽器控制台調試：console APIs 不知道大家是不是跟我一樣都用一招console.log()打天下呢...

技術 [Day8] - Fun with HTML5 Canvas(JS30 x 鐵人 30 x MDN)

實做一個 Canvas 畫布，會隨著使用者滑鼠軌跡自動變換畫筆顏色及粗度 網頁畫布 API:Canvas API 網頁畫布 2D 渲染接口：CanvasRe...

技術 [Day7] - Array Cardio part2(JS30 x 鐵人 30 x MDN)

今天來玩玩 Array method，並印出結果吧-趴兔 陣列判斷(其中之一元素符合)：Array.prototype.some() 陣列判斷(每個元素...

技術 [Day6] - Type Ahead(JS30 x 鐵人 30 x MDN)

實作一個網頁可以搜尋美國的城市/州，並將搜尋結果渲染出來並標示匹配字樣 請求資料：Fetch API 請求的回覆：Response 數字格式：In...

技術 [Day5] - Flex Panel Gallery(JS30 x 鐵人 30 x MDN)

實做一個圖片畫廊，當使用者點擊圖片時畫面會聚焦那張圖片(圖片佔比增加)，再次點擊會恢復 CSS 彈性盒子排版：CSS flexible box layout...

技術 [Day4] - Array Cardio part1(JS30 x 鐵人 30 x MDN)

今天來玩玩 Array method，並印出結果吧-趴萬 陣列篩選：Array.prototype.filter() 陣列排序：Array.prototyp...

技術 [Day3] - CSS Variables(JS30 x 鐵人 30 x MDN)

實做一個網頁讓使用者能調整照片像框的粗度、顏色、模糊度 節點選取：Document: querySelector()、Document: querySelec...

技術 [Day2] - JS and CSS Clock(JS30 x 鐵人 30 x MDN)

今天我們來做一個網頁時鐘 節點選取：Document: querySelector() method 重複執行：setInterval() global f...

技術 [Day1] - Drum Kit(JS30 x 鐵人 30 x MDN)

今天我們來做一個可以演湊鼓聲的網頁 新增事件監聽：EventTarget: addEventListener() method 節點選取：Document:...