【JS / Local Storage】To-Doリストを実装してみた

<p>To-Do List</p>
<input type="text" id="new-todo" placeholder="New task...">
<button id="add-btn">Add</button>
<button id="clear-btn">Clear</button>
<ul id="todo-list"></ul>

p {
  font-size: 24px;
  font-weight: bold;
}

input, button {
  height: 24px;
  margin-right: 10px;
  font-size: 18px;
}

#todo-list {
  list-style-type: none;
  padding: 0;
}

#todo-list li {
  padding: 8px;
  border-bottom: 1px solid #aaa;
  display: flex;
  align-items: center;
}

#todo-list li.completed {
  text-decoration: line-through;
  color: grey;
}

#todo-list li input[type="checkbox"] {
  margin-right: 10px;
}

document.addEventListener('DOMContentLoaded', function() {
    const todoList = document.getElementById('todo-list'); // ToDoリストを表示するための要素
    const addBtn = document.getElementById('add-btn'); // ToDoを追加するためのボタン
    const clearBtn = document.getElementById('clear-btn'); // ToDoリストをクリアするためのボタン
    const newTodoInput = document.getElementById('new-todo'); // 新しいToDoを入力するための入力フィールド

    // Local StorageからToDoを読み込む
    let todos = JSON.parse(localStorage.getItem('todos')) || [];

    // ToDoを表示する関数
    function renderTodos() {
        todoList.innerHTML = ''; // ToDoリストをクリア
        todos.forEach((todo, index) => {
            const li = document.createElement('li'); // ToDoのリスト項目を作成
            const checkbox = document.createElement('input'); // 完了状態を示すチェックボックスを作成
            checkbox.type = 'checkbox';
            checkbox.checked = todo.completed; // ToDoの完了状態を設定
            checkbox.addEventListener('change', () => toggleComplete(index)); // チェックボックスの状態が変わったときの処理を追加
            li.appendChild(checkbox);

            const span = document.createElement('span'); // ToDoの内容を表示する要素を作成
            span.textContent = todo.text;
            if (todo.completed) {
                li.classList.add('completed'); // 完了したToDoには線を引く
            }
            li.appendChild(span);
            todoList.appendChild(li); // ToDoリストにリスト項目を追加
        });
    }

    // 新しいToDoを追加する関数
    function addTodo() {
        const text = newTodoInput.value.trim(); // 入力フィールドからテキストを取得
        if (text !== '') {
            todos.push({ text, completed: false }); // 新しいToDoを配列に追加
            newTodoInput.value = ''; // 入力フィールドをクリア
            saveTodos(); // ToDoをLocal Storageに保存
            renderTodos(); // ToDoを再表示
            newTodoInput.focus(); // カーソルを入力フィールドに戻す
        }
    }

    // ToDoの完了状態を切り替える関数
    function toggleComplete(index) {
        todos[index].completed = !todos[index].completed; // ToDoの完了状態を反転
        saveTodos(); // ToDoをLocal Storageに保存
        renderTodos(); // ToDoを再表示
    }

    // 全てのToDoをクリアする関数
    function clearTodos() {
        if (confirm('To Do リストをすべてクリアします。よろしいですか？')) {
            todos = []; // ToDoの配列を空にする
            saveTodos(); // ToDoをLocal Storageに保存
            renderTodos(); // ToDoを再表示
            newTodoInput.focus(); // カーソルを入力フィールドに戻す
        } else {
            newTodoInput.focus(); // カーソルを入力フィールドに戻す
        }
    }

    // ToDoをLocal Storageに保存する関数
    function saveTodos() {
        localStorage.setItem('todos', JSON.stringify(todos)); // ToDoの配列を文字列に変換して保存
    }

    // イベントリスナーを設定
    addBtn.addEventListener('click', addTodo); // Addボタンをクリックしたときの処理
    clearBtn.addEventListener('click', clearTodos); // Clearボタンをクリックしたときの処理
    newTodoInput.addEventListener('keypress', function(event) {
        if (event.key === 'Enter') { // Enterキーを押したときの処理
            addTodo();
        }
    });

    // 初期表示
    renderTodos(); // ページ読み込み時にToDoを表示
    newTodoInput.focus(); // 初期表示時にカーソルを入力フィールドに設定
});