前面一路從 HTML、CSS，

寫到 JavaScript、API、LocalStorage、DevTools。

哈納也已經：

被塞進 Array、

被 find() 找過、

被存進 LocalStorage、

還被我抓出來改畫面。

……

牠真的很忙。

所以今天突然覺得：

是不是該把前面這些東西真的組成一個小作品了？

不然學到 Day 26，

每天都在：

console.log("哈納");

哈納本人應該也很想下班 ==

今天先不急著寫程式

這次反而想先做一件以前很容易跳過的事情：

先想清楚我要做什麼。

因為以前很常：

好！我要做一個網頁！

打開 VS Code。

然後……

我要做什麼？？？

所以今天先不急著開寫。

先把功能想清楚。

想做一個簡單的小作品

這次想做的東西不要太大。

畢竟剩下也沒幾天了，

如果現在突然說：

我要做一個完整電商平台！

嗯。

30 天挑戰可能直接變成 300 天挑戰 XD

所以先做一個簡單的：

哈納小小記事本 🐱

主要功能先抓這幾個：

• 可以輸入一段文字
• 按下新增後顯示在畫面上
• 可以刪除不要的內容
• 重新整理後資料還在
• 畫面不要太醜

嗯。

要求很樸實。

先求能用，再求美麗。

把前面學過的東西抓回來上班

這個小作品其實剛好可以把前面學過的東西串起來。

HTML

先負責基本結構：

<input id="noteInput" type="text" placeholder="輸入今天想記的事情">

<button id="addBtn">
  新增
</button>

<ul id="noteList"></ul>

CSS

負責讓它不要長得像 2005 年的網頁。

至少：

• 排版整理一下
• 按鈕有 Hover
• 手機不要爆版
• 間距不要全部黏在一起

前面學的：

display: flex;
gap: 10px;

終於可以正式來上班了。

JavaScript

這次的主角。

要處理：

按新增
↓
取得輸入內容
↓
加入陣列
↓
更新畫面
↓
存進 LocalStorage

突然發現，

前面每天學一點的東西，

好像真的開始可以接起來了。

先把資料想清楚

記事本的資料可以先用 Array 存：

const notes = [
  "記得餵哈納",
  "買貓砂",
  "不要再熬夜"
];

等等。

最後一條跟哈納沒關係。

是寫給我自己的 ==

如果之後要刪除某一筆，

可能就需要知道每筆資料是哪一個。

所以也可以改成物件：

const notes = [
  {
    id: 1,
    text: "記得餵哈納"
  },
  {
    id: 2,
    text: "買貓砂"
  }
];

這樣之後要找資料、刪資料，

就比較方便。

欸？

前幾天的 Array、Object、find()、filter()，

突然全部開始有用了。

今天先把流程畫出來

不然寫到一半又迷路。

先簡單整理：

使用者輸入內容
      ↓
點擊「新增」
      ↓
把資料加入 Array
      ↓
重新顯示記事清單
      ↓
存進 LocalStorage

重新整理頁面時：

讀取 LocalStorage
      ↓
取得之前的資料
      ↓
重新顯示記事清單

如果按刪除：

找到指定資料
      ↓
從 Array 移除
      ↓
更新 LocalStorage
      ↓
重新顯示畫面

嗯。

這樣看起來至少知道自己下一步要幹嘛。

不像以前：

先寫再說。

寫到一半：

我現在在幹嘛？？？

今天反而沒寫很多程式

但我覺得這也是今天想記下來的東西。

以前很容易覺得：

今天沒寫很多 Code = 今天沒進度。

但真的開始做一個完整一點的東西後，

先把：

• 要做什麼
• 要有哪些功能
• 資料怎麼放
• 操作流程怎麼走

想清楚，

後面寫起來應該會少一點：

寫了半天又全部砍掉重來。

至少希望是這樣啦 XD

今天的小心得

前面 25 天比較像是在一個一個撿工具。

HTML 一把。

CSS 一把。

JavaScript 一把。

LocalStorage 一把。

今天開始才比較像是：

好，工具都有了，現在來真的做個東西。

所以 Day 26 先不急著衝。

先把需求跟流程整理好。

明天再正式開始動手做。

希望不要到時候打開 VS Code，

又坐在那邊發呆十分鐘 ==

好啦。

Day 26，完成！