系列文章
[Day21] - Geolocation(JS30 x 鐵人 30 x MDN)
做一個網頁羅盤，監聽使用者位置資訊（使用方位及時速改變羅盤） Web 導航器 API：Navigator - Web APIs | MDN 取得地理定位：N...
[Day22] - Follow Along Link Highlighter(JS30 x 鐵人 30 x MDN)
為網頁所有連結做一個會偵測使用者鼠標位置並移動的 highlight 滑鼠事件：Element: mouseenter event 元素上邊緣的偏移量：HT...
[Day23] - Speech Synthesis(JS30 x 鐵人 30 x MDN)
做一個語音閱讀器，可播放使用者輸入的訊息 語音合成 API：SpeechSynthesis - Web APIs 語音改變事件：SpeechSynthesi...
[Day24] - Sticky Nav(JS30 x 鐵人 30 x MDN)
將 nav-bar 固定於網頁上方 黏貼定位：position:sticky 固定定位：position:fixed 要 nav-bar 在視窗滑動超...
[Day25] - Event Capture, Propagation, Bubbling and Once(JS30 x 鐵人 30 x MDN)
認識事件捕獲、冒泡、傳播、單次事件 事件介紹：Introduction to events 事件監聽器：EventTarget: addEventListe...
[Day26] - Stripe Follow Along Nav(JS30 x 鐵人 30 x MDN)
做一個 nav-bar 當使用者 hover 時會展開下拉式清單，搭配動畫緩進緩出 ClassList 新增指定項：DOMTokenList: add()...
[Day27] - Click and Drag(JS30 x 鐵人 30 x MDN)
做一個區塊可以讓使用者左右拖曳顯示的項目 新增事件監聽：EventTarget: addEventListener() method 移除事件監聽器：rem...
[Day28] - Video Speed Controller(JS30 x 鐵人 30 x MDN)
自定義一個影片播放速率控制器 事件（滑鼠移動）：Element: mousemove event 影片元素速率：HTMLMediaElement: play...
[Day29] - Countdown Timer(JS30 x 鐵人 30 x MDN)
做一個網頁倒數裝置，設有 5 種常用快速選項，也可以讓使用者自行輸入，並會將倒數時間顯示於畫面及分頁標籤上 日期物件：Date - JavaScript 週...
[Day30] - Whack A Mole(JS30 x 鐵人 30 x MDN)
做一個打地鼠遊戲網站，按下開始後可以開啟遊戲(約 10 秒)、有計分功能、地鼠會隨機出現，腳本作弊點擊不計分 週期執行：setInterval() globa...