習作4 - 完成答案版

✓ 1a 答案

CSS 代碼：

.task.completed {
  text-decoration: line-through;
  color: #999;
  opacity: 0.6;
}

說明： 使用 text-decoration 添加刪除線，改變顏色和透明度以表示已完成狀態。

✓ 1b 答案

.task:hover {
  background-color: #f0f0f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  padding-left: 8px;
}

說明： 使用 :hover 偽類在滑鼠懸停時改變背景顏色、添加陰影和調整內距。

✓ 2a 答案

let completedCount = 0;
for (let i = 0; i < tasks.length; i++) {
  if (tasks[i].completed) {
    completedCount++;
  }
}
console.log(completedCount);  // 1

或使用 filter()：

let completedCount = tasks.filter(t => t.completed).length;

✓ 2b 答案

function markTaskCompleted(tasks, id) {
  for (let i = 0; i < tasks.length; i++) {
    if (tasks[i].id === id) {
      tasks[i].completed = true;
      break;
    }
  }
}

// 調用
markTaskCompleted(tasks, 2);

✓ 2c 答案

let incompleteTasks = [];
for (let i = 0; i < tasks.length; i++) {
  if (!tasks[i].completed) {
    incompleteTasks.push(tasks[i]);
  }
}
console.log(incompleteTasks);

或使用 filter()：

let incompleteTasks = tasks.filter(t => !t.completed);