到目前為止，我們的 To-Do List 已經能：

✅ 新增任務
✅ 標記完成
✅ 刪除項目
✅ 儲存資料

但現實生活中，我們常會想：
• 「我想只看還沒完成的任務」
• 「這些都做完了，一鍵清掉就好」
今天，我們就要實作這兩個超實用功能！

🎯 今日目標
1️⃣ 新增「任務分類篩選」功能（全部 / 未完成 / 已完成）
2️⃣ 新增「一鍵清空」按鈕

Step 1：HTML 結構調整

我們先在 index.html 中加上「篩選」與「清空」區塊。

<div class="todo-container">
  <h2>📋 我的待辦清單</h2>

  <div class="input-area">
    <input id="taskInput" type="text" placeholder="輸入待辦事項...">
    <button id="addBtn">新增</button>
  </div>

  //以下是新增段落  
  <div class="filter-area">
    <button class="filter-btn" data-filter="all">全部</button>
    <button class="filter-btn" data-filter="active">未完成</button>
    <button class="filter-btn" data-filter="completed">已完成</button>
    <button id="clearBtn">🧹 清空全部</button>
  </div>
  //以上是新增段落

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

💡 小技巧：
這裡的「data-filter」是一個自訂屬性，
我們可以用它來分辨目前要顯示哪種類型的任務。

Step 2：加點 CSS 美化

.filter-area {
  margin-top: 15px;
}

.filter-btn, #clearBtn {
  margin: 5px;
  padding: 5px 10px;
  border: none;
  background-color: #ddd;
  cursor: pointer;
  border-radius: 5px;
  transition: 0.3s;
}

.filter-btn:hover, #clearBtn:hover {
  background-color: #bbb;
}

.filter-btn.active {
  background-color: #2b6cb0;
  color: white;
}

這樣切換按鈕會有明顯的「被選中」效果，
使用者可以清楚知道目前篩選的狀態。

Step 3：在 JS 裡加上篩選功能

打開 script.js，我們先新增監聽所有篩選按鈕：

const filterBtns = document.querySelectorAll('.filter-btn');

filterBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const filter = btn.getAttribute('data-filter');
    filterTasks(filter);

    // 移除舊的 active 樣式，加入新的
    filterBtns.forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
  });
});

接著，實作篩選的邏輯：

function filterTasks(filter) {
  const tasks = document.querySelectorAll('#taskList li');

  tasks.forEach(li => {
    switch (filter) {
      case 'all':
        li.style.display = 'flex';
        break;
      case 'active':
        li.style.display = li.classList.contains('completed') ? 'none' : 'flex';
        break;
      case 'completed':
        li.style.display = li.classList.contains('completed') ? 'flex' : 'none';
        break;
    }
  });
}

💡 說明：
• 如果是「全部」，顯示所有任務。
• 如果是「未完成」，隱藏有 .completed 的任務。
• 如果是「已完成」，只顯示有 .completed 的項目。

Step 4：新增「清空全部」功能

有時候任務都完成了，想一次清掉全部。
我們可以這樣做：

const clearBtn = document.getElementById('clearBtn');

clearBtn.addEventListener('click', () => {
  if (confirm('確定要清空所有任務嗎？')) {
    taskList.innerHTML = '';
    localStorage.removeItem('tasks');
  }
});

confirm() 是一個瀏覽器內建的確認對話框，
點「確定」就執行刪除，「取消」則什麼都不做。

Step 5：讓畫面更順暢（加點動畫）

可以在 CSS 裡幫清單項目加點進場效果：

#taskList li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f0f0f0;
  padding: 8px;
  margin: 6px 0;
  border-radius: 6px;
  transition: all 0.3s ease;
}

#taskList li.completed span {
  text-decoration: line-through;
  color: gray;
  opacity: 0.7;
}

#taskList li:hover {
  transform: scale(1.02);
}

這樣滑過時會微微放大，使用者體驗更棒！

今日總結

今天我們升級了 To-Do List 的互動性和可讀性：

✅ 分類篩選功能（全部 / 未完成 / 已完成）
✅ 清空全部任務 一鍵完成
✅ 漂亮的動畫與樣式 讓操作更自然

清單網站現在已經擁有完整的任務管理邏輯，
不僅實用，還能展現你對 JavaScript 的理解力😎

明天，我們要幫這個專案來一點「設計美感提升」
• 幫清單加入「主題切換（亮色 / 暗色）」
• 優化整體配色與排版
到時候它就會從「練習作品」變成「真的能用的工具網站」
謝謝你的收看，我是Ting
讓我們明天繼續一起進化可愛的清單網站吧！