專案功能:
- 點擊月亮圖標可以切換至dark-mode
- 勾選checkbox能夠改變當列背景顏色
- 勾選第一個checkbox能夠選取全部列
- 表格header置頂增加使用者體驗
專案開發時間:
這次專案開發，課程有指定兩個功能，分別為廣告被選擇的樣式和固定 table header，自己新增的功能為全選checkbox
- 廣告被選擇的樣式(3hr)
HTML:
新增class=”checkbox”至第一個以外的checkbox上
CSS:
新增row被選取時的橘色背景樣式
JS:
使用querySelectoAll選取所有input type=checkbox的元素(取得類陣列)
使用迴圈加if else判斷式將被選取的checkbox新增或移除橘色背景樣式 - 固定 table header (1hr)
HTML:
新增table__container當作position的判斷點 - CSS:
將表格寬度設為1200px，避免縮放時壓縮表格
使用position:sticky和z-index層級將header固定在最上方
因為要看出header固定在最上方的效果，限制table__container的最高為80%並設置卷軸，
但覺得卷軸太醜，於是把它隱藏。 - 優化-全選checkbox (3hr) :
選取第一個checkbox時能夠選取全部的廣告並改變背景顏色
專案開發時遇到的問題:
廣告被選擇的樣式:
第一次出手時只能做到單選一列，無法再加選其他列
如何解決:
1. 查閱先前製作的類似案例，是不是拆解製作流程時漏了什麼
2. 估狗關鍵字查看其他人是怎麼去寫這種功能
3. console.log驗證自己每段程式碼的結果
綜合以上發現是自己在第一段選取checkbox時只有選擇到第一個checkbox，於是後來改用querySelectorAll選取checkbox的類陣列並搭配迴圈完成功能
固定 table header (1hr)
第一次出手遇到header一直在表單最上方且文字排版被打亂且寬度和下方的列不同
如何解決:
1. 查閱position相關文件
翻閱資料後發現使用fixed時會造成內部子元素的位置有變動，於是後來 改用sticky、新增HTML父容器完成這個功能
優化-全選checkbox :
第一次出手時在使用checked / onclick時不是很清楚到底該用哪個，製作這個功能時，比較多時間是花在反覆試驗哪個功能可行，哪種寫法OK
如何解決:
卡關時觀摩了許多線上教學者的code，比較自己和他們的code差別在哪，進而優化自己的寫法，綜合許多參考資料得知checkbox可以用boolean來判斷，當被勾選時是true，不被勾選時是false，得知這點後就順利的完成這個功能了QQ
專案可優化的部分:
- 表單框架可使用JS動態渲染
- 表單內容是不是可以用API的方式串接..?
- CSS可改用Sass的方式管理
- 畫面中可以點選的元件可以參考線上網站新增一些互動功能，例如排序、刪除表單、完成表單(資料會跑到左邊資料夾的icon內)
自己可以需要加強的部分:
1. 對於input type的使用
2. 對於event的操作
3. 開發速度提升，例如這個專案我自己認為應該要能夠1小時內完成
