前言

這不是一個好的作品，因為我已經遲交很久了，所以這是一個大概也不會有人 review 的作業，完全是自主學習。

這個「廣告排期系統」，不涉及後端的資料輸出，而是著重在 HTML 的 table 元素以及 CSS 語法練習，以及利用 JavaScript 完成事件監聽的效果，可以產生 menu、切換夜間模式、以及改變選取列之顏色。

成果展示

See the Pen AC S2-3 HW A21 Campaign by a2623212 (@a2623212) on CodePen.

---

溝通能力鍛鍊

Dear Wendell,

本周廣告排期系統的兩個任務實作已完成，說明如下：

• 廣告被選擇時， table row 的背景顏色會轉為橘色樣式 (約 30 分鐘)

1. 新增一個 class 樣式 (.checked)
2. 利用 addEventListener 監聽 tbody 上 change 的行為
3. 利用 classList.add /remove 改變底色。

• 當表單向下滑動時，固定 table header 讓使用者清楚知道資訊所代表的意義 (約 2 小時)

1. 將 <thead>、<tbody> 改成 display: block;
2. 給 <tbody> 一個高度 70vh
3. 給 <tbody> 一個 overflow-y: scroll;

回頭檢視流程與成果時，我認為自己還有優化空間：

1. 讓使用者點選表頭的 checkbox，可以一次選取到所有項目
2. 在實作任務一的時候，目前使用的方式是用 .parentElement.parentElement 選取，可以參考 sample code 用 .closet(‘.table-row’)，以及直接用 classList.toggle 而非目前採用的 add / remove 方式，會更簡化程式碼。
3. 在實作任務二的時候，sample code 加了一個 div 包住 table，這裡尚未比較新增元素與改變原 table display 的差異；在查資料的過程還有看到其他的作法，但未成功，因為受限於時間，還在研究中。

有任何建議與指教，請隨時讓我知道。

Best Regards,

CY

---

結論

這是一個還債的過程，也因此觀摩了許多同學的作業，在此對每一個準時繳交的同學獻上誠摯的尊重與感謝。同是同一期的訓練生，卻不如他人的努力，實在汗顏！

請收下我的膝蓋 🙇‍♀️🙇‍♀️🙇‍♀️