在過去的幾天裡，我們接連解鎖了 DOM 抓取元素、事件監聽（Event Listener）還有迴圈。把這些招式單獨拿出來看好像懂了，但要怎麼把它們全部串在一起，變成一個「真正能用」的網頁小工具呢？
今天我們就要來挑戰前端界的「新手村畢業考」——製作一個陽春版的 Todo List（待辦事項清單）！

在動手寫程式前，先拆解 UI 互動邏輯

身為一個做過 UI/UX 的人，我們在畫介面時習慣先拆解功能。一個最基本的 Todo List 其實只需要三個核心元件：

1. 輸入框（Input）： 讓使用者輸入想做的事情（例如：「今天要把鐵人賽文章寫完」）。
2. 送出按鈕（Button）： 點擊後把輸入框的內容送出去。
3. 清單容器（List）： 把新增的任務一筆一筆顯示在畫面上的區塊。
   當使用者點擊按鈕時，背後的 JavaScript 要做的事情其實只有三步：

• 抓取輸入框裡面使用者打的文字。
• 動態建立一個新的 HTML 標籤（例如 <li>）。
• 把文字塞進去，並放到畫面的清單容器裡！

程式碼怎麼寫？三劍客大合體

HTML 結構（舞台與輸入介面）：

<div class="todo-container">
    <h2>我的待辦清單</h2>
    <!-- 輸入框與按鈕 -->
    <input type="text" id="todo-input" placeholder="輸入今天的打怪任務...">
    <button id="add-btn">新增任務</button>
    
    <!-- 顯示清單的容器 -->
    <ul id="todo-list">
        <!-- 動態生成的清單會跑到這裡 -->
    </ul>
</div>

JavaScript 邏輯（讓按鈕活起來）：
// 1. 把畫面的重要元件抓下來
const inputField = document.querySelector('#todo-input');
const addButton = document.querySelector('#add-btn');
const todoList = document.querySelector('#todo-list');

// 2. 幫「新增按鈕」加上點擊事件監聽
addButton.addEventListener('click', function() {
    // 取得輸入框裡使用者打的文字
    const taskText = inputField.value;

    // 如果輸入框是空的，就跳出提示並中斷
    if (taskText === "") {
        alert("請輸入有效的任務內容喔！");
        return;
    }

    // 3. 動態建立一個新的 <li> 標籤
    const newItem = document.createElement('li');
    newItem.textContent = taskText;

    // 4. 把這個新項目塞進清單容器裡！
    todoList.appendChild(newItem);

    // 清空輸入框，方便使用者輸入下一筆
    inputField.value = "";
});

程式碼亮點解析

1. document.createElement('li')：這是一個超好用的 DOM 指令，就像在 Figma 裡用程式「動態複製生出一個新的圖層」，不用先寫死在 HTML 裡。
2. appendChild()：字面上的意思是「把小孩（新任務）放進爸爸（清單容器）的肚子裡」，讓它顯示在畫面上。

今日小結

今天我們把前面學到的 DOM 抓取、事件監聽、if-else 邏輯判斷 全部串聯起來，親手做出了第一個具備互動功能的 Todo List！看著自己打的字變成清單上的項目，是不是有種「我真的在寫程式」的強烈成就感呢？
明天我們繼續挑戰另一個超實用的互動小工具——簡易計數器與抽籤小工具！