Day 69

Day69 (Week10), 2021/06/19 (Saturday)

學習時數：4 hr

Done

[x] 美化 w7 hw3 To Do List

To Do @ this week

[x] 自己做 w9 hw1 留言版
[x] w9 hw2.md
[ ] 修改 w7 to do list
[ ] w9 hw1 留言板心得筆記

學習心得紀錄

Objective 客觀

美化 w7 hw3 To Do List

重做的原因：
第七週都把寫作業時間花在研究 twitch API 跟餐廳抽獎了，所以最後一項作業 To Do List 就只有把功能作出來，所以這次複習週要努力還債，把 To Do List 重新切版，然後嘗試做出自己的樣式，我其實想滿久版型的，也 google 好多 To Do List 設計，還找到喜歡的樣式，不過那個有做分類，比較男一點，有空再慢慢研究增加功能。
不太熟的地方：
今天重新切版一次，發現其實切版還挺不熟的，卡在 flex 滿久的，一開始以為每個巢狀 div 都給他加個 display: flex，結果到真正需要 flex box 來左右分開對齊的 display:flex; 跟 justify-content: space-evenly 時，發現在 dev tool 沒有效果QQ，因為需要分開對齊的地方，在外面那一層 div 也有 flex box，然後就看不懂。使用 dev tool 調整 CSS 真的滿方便的，可以即時觀看樣式效果，而且我每次都會使用 dev tool 來調整 flex box，然後就會跳出這個選項：

看了好幾次都不知道原來這些語法跟 display:flex 是一家人，要一起使用QQ。這也讓我發現對 CSS 是多麼的不熟，有空還是要常常切版，常常吸取經驗！
今天的成果 demo：
JavaScript 事件處理的複習心得：
作業真的值得一再練習跟回味 XD，今天剛開始做的時候，突然有點迷茫，不知所措，就趕緊複習了一下，我發現我還滿喜歡用事件代理的方式來做事件處理，利用滑鼠點到的位置，寫判斷式跟做事件處理的功能。
跟第七週寫的不一樣之處在：勾選待辦事項的時候，會出現刪除線，我是用 CSS 來判斷 checkbox 有被勾選後加的樣式。這次我回想了一下在事件處理學了哪些方式，例如事件代理、toggle 開關，決定來使用看看 toggle 帶上跟消掉 class 的方法，一開始只能做一個動作，因為判斷的是滑鼠點擊時，含有 class A 時，將 class A 去除、class B 加上，所以在第一次點擊完後，Class A 不見、Class B 存在，但是如果我想再點擊第二次的時候，由於 Class A 已經在第一個點擊被消掉，所以進入不了判斷式（含有 Class A時），也就是沒辦法再做一次：開關 Class A、Class B。
這次新的寫法是將判斷式寫成：含有 Class A 「或」 Class B 時，會開關 Class A 和 Class B。這樣不論是 Class A 存在或者 Class B 存在，都可以重複按開關。
所以這次的勾選、沒勾選、刪除線、字體變灰色，都是利用 toggle 的原理去寫的。

感受

切版的感受
第六週開始，每週都有持續切一點版，但是上週可能專注於留言板的 PHP 部分，CSS 切版的地方就又生疏了，原本有一些邏輯，可以像影片那樣 div 的切法，今天自己試切 To Do List，又打回原型了，看來一開始學習，挺需要模仿的，模仿怎麼切（放 div 分區塊）、還要模仿怎麼命名 class name。
toggle
第七週很惱人的 toggle，一開始在餐廳網頁的 FAQ 被我誤打誤撞寫對了 toggle 收合常見問題集答案，但是在寫 To Do List 時就被絆住了，沒辦法用 toggle 寫好功能。這週居然就腦袋浮現一個 idea，然後實作看看，就這麼神奇...一個轉念，就試成功了！
第五週與第十週的複習週比較
可能是第五週的進度比較有跟上，所以那週其實有點焦慮，不知道該選擇什麼方式來複習，就挑選了當時首次接觸的 API 跟發 request 來研究，所以其實第一次複習週算是有處於焦慮不確定要複習什麼的狀態。
第十週複習第六週到第九週的內容，內容明顯增加了許多，也囊括到前面的 CSS 切版，因為第九週留言板的影片太長，有點小偷懶QQ，有點不太集中QQ，然後看影片跟著做 vs. 看完理解後自己思考過程又大不相同，花了許久時間在思考跟紀錄，然後，我還偷看了一下 11~ 14 週的學習內容，大多以前面做的作業（To Do List、留言板等等）為基礎，所以第十週就目標很明確：修正與美化作業，方便未來幾週的銜接，不然未來幾週還要為先前的作業修補，那真的會有點心力交瘁 XD，要顧好前面又要顧好新的內容。總之，這週的複習很充實、很有目標XD。