介紹CSS Diner 是一個輸入選擇器來破關的小遊戲，前一陣子再學習其他技術，一段時間沒使用 css 語法後，就忘記了許多，推薦大家可以來這邊練習。 這邊會記錄我觀念不熟，或是不知道該如何解決關卡! CSS Diner - Where we feast on CSS Selectors!

學習到的知識點 querySelector 與純陣列的差異 dataset 的使用方法 document.documentElement 為網頁的根元素 事件監聽 change 與 mousemove CSS 變數，( 宣告：--名稱：值 )

學習到的知識點 透過 CSS 選擇元素 (querySelector) Date 時間物件 取得日期物件的本地時間 (getHours，getSeconds，getMinutes) 透過 JS 控制 CSS (style.transform) JS 計時器 (setInterval，setTimeout，requestAnimationFrame)

學習到的知識點 事件監聽 (addEventListener(event,function)) 按鍵事件 (keydown，keyup，keypress) 透過 CSS 選擇元素 (querySelector，querySelectorAll) 音效控制（element.play( )，element.currentTime)

鍵盤的操作網頁中鍵盤的操作分為三種，keydown，keypress，keyup。 可以在此網站查詢鍵值。

data-* attribute 這個東西很常出現，但卻常常搞不清楚他到底是什麼？ 解釋屬性

什麼是 Hoisting?Hoisting 就是「提升」的意思。

認識 XHRXMLHttpRequest（XHR）是 Javascript 較古老的 API，取得伺服器資料，卻不需要頁面重整(reload)。

Bootstrap5 快速簡介

學習到的知識點Jquery slideToggle siblings