# [Note] 實戰練習：廣告排期系統

###### tags: `專案練習` `AC`

[TOC]

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

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

## 成果展示
<iframe height="300" style="width: 100%;" scrolling="no" title="AC S2-3 HW A21 Campaign" src="https://codepen.io/a2623212/embed/BawJamy?default-tab=html%2Cresult" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
See the Pen <a href="https://codepen.io/a2623212/pen/BawJamy">
AC S2-3 HW A21 Campaign</a> by a2623212 (<a href="https://codepen.io/a2623212">@a2623212</a>)
on <a href="https://codepen.io">CodePen</a>.
</iframe>

## 溝通能力鍛鍊
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 的差異；在查資料的過程還有看到其他的作法，但未成功，因為受限於時間，還在研究中。

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

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