居然真的來到 Day 30 了。

一開始只是想給自己一個：

「好啦，來重新整理一下 Web 前端好了。」

的挑戰。

結果一路寫著寫著，

HTML 被我做成美味蟹堡、

CSS 跟我吵了不知道幾次、

Flexbox 還出了一份方向感測驗，

最後連哈納都被抓來當 JavaScript 測試資料。

然後今天。

真的最後一天了。

突然有點：

蛤？？？

我寫完了？？？

最後一天，先來看看哈納小小記事本 🐱

這幾天把前面學過的東西慢慢串起來，

最後做成了一個很簡單的：

「哈納小小記事本」

目前可以做到：

• 輸入記事
• 點擊按鈕新增
• 按 Enter 新增
• 將記事顯示在畫面上
• 使用 LocalStorage 保存資料
• 重新整理後記事不會消失
• 刪除不要的記事
• 手機畫面也可以正常使用

功能沒有到多複雜，

但至少不是：

console.log("哈納");

了。

哈納：

謝謝，我終於從 Console 畢業了。

從一個輸入框，慢慢變成真的可以用

一開始的記事本其實只有：

<input>
<button>

然後慢慢補上：

輸入內容
↓
JavaScript 取得資料
↓
加入 Array
↓
render 到畫面
↓
存進 LocalStorage
↓
重新整理後讀回資料
↓
可以刪除指定記事

做到這裡才發現，

前面那些單獨看的語法其實不是各玩各的。

像：

querySelector()
addEventListener()
push()
filter()
localStorage
JSON.stringify()
JSON.parse()

以前一個一個看的時候，

比較像：

好，我知道你是什麼。

但真的放進作品後，

才變成：

喔！！！原來你是要用在這裡。

這個差別還滿大的。

這 30 天到底寫了什麼？

回頭看才發現，

好像真的碰了滿多東西。

前面先從 HTML、CSS 開始，

重新整理：

HTML 結構
CSS 置中
Flexbox
Box Model
CSS Grid
RWD
CSS 單位
Hover / Transition / Transform

後來進到 JavaScript：

let / const
Array
map / filter / find
Function
DOM
Event
Event Bubbling
Event Delegation
LocalStorage
Fetch
async / await
錯誤處理
DevTools

最後再把其中一部分真的拿來做小作品。

如果 Day 1 的我看到這串，

可能會先：

蛤？？？我要寫這麼多喔？？？

所以還好當初沒有真的把 30 天全部排死 XD

我覺得最大的差別不是「背了多少語法」

其實寫到最後，

要我現在完全不查資料，

直接把每一個語法完整默寫出來？

……

先不要考我 ==

但我覺得這 30 天比較有感的是：

以前碰到問題很容易先想：

這個語法怎麼寫？

現在會比較先想：

我要解決的是什麼問題？

例如記事重新整理會消失。

問題不是：

「我要用 LocalStorage！」

而是：

「我要讓資料重新整理後還存在。」

所以才找到 LocalStorage。

要刪除記事也是。

不是因為今天想練：

filter()

而是：

「我需要把某一筆資料從 Array 裡移除。」

結果 filter() 就回來上班了。

突然覺得這樣學東西比較有意義。

還有一個變化：出錯沒有那麼想逃跑了

這 30 天最常出現的畫面大概就是：

怎麼沒反應？

然後：

？？？？？

最後：

喔。

有時候只是少一個：

<style>

有時候是：

border

被我打成：

boder

有時候 JavaScript 根本沒抓到元素，

有時候 API 回來的東西又跟想像不一樣。

以前看到沒反應很容易直接：

壞了。

現在至少比較會先：

F12
↓
看 Console
↓
看 Elements
↓
看 Network
↓
確認資料到底跑去哪

雖然還是會跟程式碼互瞪。

但至少現在比較知道要瞪哪裡 XD

Day 1 VS Day 30

如果要幫這 30 天做一個最簡單的對比：

Day 1

好，我來挑戰 30 天。

Day 30

哈納有自己的記事本了？？？

中間到底發生什麼事 XD

但從原本一個一個複習概念，

到最後可以自己把：

HTML + CSS + JavaScript + LocalStorage

串成一個真的能操作的小東西，

這個過程還是滿有成就感的。

▲ 這裡可以放「Day 27 初版 vs Day 30 完整版」對比圖

真的推薦放對比。

因為自己每天看可能沒什麼感覺，

但一把前後版本擺在一起：

欸，好像真的有差耶。

30 天結束，不代表前端學完了

這 30 天比較像是把一些原本知道、碰過、用過的東西，

重新整理一次。

順便逼自己每天真的寫一點。

當然還有很多東西沒碰。

也還有很多地方是：

看得懂，但不一定能秒寫出來。

但至少現在比較不會覺得所有東西都是散的。

HTML 負責結構。

CSS 負責畫面。

JavaScript 處理互動跟資料。

API 負責跟外面的資料交流。

DevTools 在出事的時候負責抓人。

然後哈納負責……

加班。

最後的小心得

本來只是想挑戰自己的 Web 前端力。

寫到最後反而覺得，

30 天真正練到的除了前端之外，

還有一件事情：

把「我知道」變成「我真的有寫過」。

看懂跟自己打出來，

真的還是兩回事。

而且我很慶幸當初沒有把這 30 天排得死死的。

因為很多題目其實都是：

今天寫到這裡，

發現：

欸？那這個呢？

隔天就繼續挖下去。

最後才一路挖出哈納小小記事本。

好啦。

從 HTML 美味蟹堡開始，

到 JavaScript、

API、

LocalStorage，

最後真的做出一個小作品。

30 天，

沒有變成前端大神。

但至少再看到：

const notes = [];

不會只想問：

你哪位？？？

Day 30，完成！

30 / 30 🎉

這次是真的沒有明天見了。

……

至少這個系列沒有啦 XD