昨天幫自己挖了一個坑：

來做一個「哈納小小記事本」吧！

功能也都想好了。

結果昨天做到最後，

我只有流程圖。

程式本人：

完全還沒出生。

好。

規劃不能規劃一輩子。

今天正式開始動手 XD

今天先完成第一件事情：

輸入內容 → 按新增 → 讓記事真的出現在畫面上

先不要貪心。

至少先讓它活起來再說。

先把 HTML 架起來

先做最基本的結構：

<div class="note-app">
  <h1>哈納小小記事本 🐱</h1>

  <div class="input-area">
    <input
      id="noteInput"
      type="text"
      placeholder="今天想記什麼？"
    >

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

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

目前需要的東西其實很簡單：

輸入框
＋
新增按鈕
＋
顯示記事的地方

看起來還很普通。

但沒事。

功能先活著，外表等等再救。

JavaScript 先把三個人抓出來

前幾天才複習過 querySelector()。

今天馬上叫它回來上班：

const noteInput = document.querySelector("#noteInput");
const addBtn = document.querySelector("#addBtn");
const noteList = document.querySelector("#noteList");

現在 JavaScript 已經知道：

輸入框在哪、

按鈕在哪、

記事清單又在哪。

很好。

至少等等不會又發生：

我要改畫面，但我根本不知道人在哪裡 ==

先準備一個 Array 放記事

昨天有先想過資料結構。

所以今天直接準備：

const notes = [];

之後每新增一篇記事，

就把它放進這個 Array。

例如：

notes.push({
  id: Date.now(),
  text: "記得買哈納的罐罐"
});

會得到類似：

[
  {
    id: 1750000000000,
    text: "記得買哈納的罐罐"
  }
]

這裡先用：

Date.now()

產生一個數字當作簡單的 id。

目前這個小作品夠用了。

哈納：

所以我的罐罐現在有編號了？？？

不是罐罐有編號啦 XD

點下新增，把文字放進 Array

接著監聽按鈕：

addBtn.addEventListener("click", function () {
  const text = noteInput.value.trim();

  if (text === "") {
    return;
  }

  notes.push({
    id: Date.now(),
    text: text
  });

  console.log(notes);
});

這裡先用了：

noteInput.value

取得輸入框的內容。

然後：

.trim()

把前後多餘的空白去掉。

不然如果有人輸入：

也可以新增一篇空白記事。

那個記事的內容大概就是：

《無言》

很有藝術感，

但先不用 ==

所以：

if (text === "") {
  return;
}

空的就不新增。

可是現在資料只活在 Array 裡

按下新增之後，

Console 確實看得到：

[
  {
    id: 123,
    text: "記得買哈納的罐罐"
  }
]

但網頁：

……

還是空的。

又來了。

你們怎麼那麼喜歡躲在 Console 裡啦？？？

所以還需要一個 Function，

把 Array 裡的資料畫到網頁上。

寫一個 renderNotes()

這時候昨天、前天學過的 Function 終於又回來了。

function renderNotes() {
  noteList.innerHTML = "";

  notes.forEach(function (note) {
    const li = document.createElement("li");

    li.textContent = note.text;

    noteList.appendChild(li);
  });
}

這個 Function 做的事情就是：

先把目前畫面上的清單清掉
↓
把 notes 裡的資料一筆一筆拿出來
↓
建立 li
↓
放進畫面

其中：

document.createElement("li");

就是建立一個新的：

<li></li>

然後：

li.textContent = note.text;

把記事內容放進去。

最後：

noteList.appendChild(li);

再把它塞進：

<ul id="noteList">

裡面。

終於。

記事正式從 Array 搬進網頁了。

新增完記得叫 renderNotes()

所以剛剛的按鈕事件要補上：

addBtn.addEventListener("click", function () {
  const text = noteInput.value.trim();

  if (text === "") {
    return;
  }

  notes.push({
    id: Date.now(),
    text: text
  });

  renderNotes();
});

現在輸入：

記得買哈納的罐罐

按下「新增」。

畫面就會出現：

・記得買哈納的罐罐

再輸入：

晚上不要熬夜

就會變成：

・記得買哈納的罐罐
・晚上不要熬夜

第二條又不是寫給哈納的。

是寫給我自己的 QQ

新增完順便把輸入框清空

如果按完新增，

輸入框還留著原本的文字，

每次都還要自己刪掉。

很煩。

所以加一行：

noteInput.value = "";

完整一點就變成：

addBtn.addEventListener("click", function () {
  const text = noteInput.value.trim();

  if (text === "") {
    return;
  }

  notes.push({
    id: Date.now(),
    text: text
  });

  renderNotes();

  noteInput.value = "";
});

這樣新增完成後，

輸入框就會自動清空。

小地方而已，

但用起來舒服很多。

今天終於把前面學的東西串起來了

今天這一小段功能，

其實已經偷偷把前面很多東西抓回來上班：

const notes = [];

Array。

function renderNotes() {}

Function。

document.querySelector()

DOM。

addEventListener()

事件。

notes.push()

陣列操作。

document.createElement()

動態建立 HTML。

突然發現前幾天那些：

「這個到底什麼時候會用到？」

的東西，

開始全部跑出來了。

今天的小心得

昨天還只是一張流程圖。

今天終於真的有一個可以操作的小東西了。

雖然現在功能還非常陽春，

目前只能：

輸入
↓
新增
↓
顯示

但看到自己輸入的內容真的跑到畫面上的時候，

還是有一種：

喔！！！它活了！！！

的感覺 XD

而且這次不是單獨練：

Array

或單獨練：

DOM

而是真的開始把它們接在一起。

至於哈納小小記事本現在最大的問題？

重新整理一下。

啪。

全部又失憶了。

……

好。

這個問題怎麼有點眼熟 ==

Day 27，完成！