完了/未完了を切り替える

// HTML要素を取得
const form = document.getElementById('todo-form');
const input = document.getElementById('todo-input');
const list = document.getElementById('todo-list');
 
// タスクを保存する配列
let todos = [];
 
// 次のタスクに割り当てるID
let nextId = 1;
 
// タスクを削除する関数
function deleteTodo(id) {
  todos = todos.filter((todo) => todo.id !== id);
  renderTodos();
}
 
// 完了状態を切り替える関数
function toggleComplete(id) {
  todos = todos.map((todo) => {
    if (todo.id === id) {
      return { ...todo, completed: !todo.completed };
    }
    return todo;
  });
  renderTodos();
}
 
// タスクを画面に表示する関数
function renderTodos() {
  list.innerHTML = '';
 
  todos.forEach((todo) => {
    const li = document.createElement('li');
    li.className = 'todo-item';
 
    li.innerHTML = `
      <input type="checkbox" ${todo.completed ? 'checked' : ''}>
      <span>${todo.text}</span>
      <button type="button">削除</button>
    `;
 
    // チェックボックスにイベントを設定
    const checkbox = li.querySelector('input[type="checkbox"]');
    checkbox.addEventListener('change', () => {
      toggleComplete(todo.id);
    });
 
    // 削除ボタンにイベントを設定
    const deleteButton = li.querySelector('button');
    deleteButton.addEventListener('click', () => {
      deleteTodo(todo.id);
    });
 
    list.appendChild(li);
  });
}
 
// フォーム送信時の処理
form.addEventListener('submit', (e) => {
  e.preventDefault();
 
  const text = input.value.trim();
 
  if (!text) {
    return;
  }
 
  todos.push({ id: nextId, text, completed: false });
  nextId++;
 
  renderTodos();
  input.value = '';
});

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
 
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding: 40px 20px;
}
 
.container {
  max-width: 480px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
 
h1 {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}
 
/* フォーム */
#todo-form {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
 
#todo-input {
  flex: 1;
  padding: 12px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
}
 
#todo-input:focus {
  outline: none;
  border-color: #0066ff;
}
 
#todo-form button {
  padding: 12px 20px;
  font-size: 16px;
  background-color: #0066ff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
 
#todo-form button:hover {
  background-color: #0052cc;
}
 
/* タスク一覧 */
#todo-list {
  list-style: none;
}
 
.todo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid #eee;
}
 
.todo-item:last-child {
  border-bottom: none;
}
 
.todo-item input[type="checkbox"] {
  width: 20px;
  height: 20px;
  cursor: pointer;
}
 
.todo-item span {
  flex: 1;
  font-size: 16px;
}
 
/* 完了したタスクのスタイル */
.todo-item input[type="checkbox"]:checked + span {
  text-decoration: line-through;
  color: #888;
}
 
.todo-item button {
  padding: 4px 8px;
  font-size: 14px;
  background: none;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  color: #666;
}
 
.todo-item button:hover {
  background-color: #fee;
  border-color: #f66;
  color: #c00;
}