<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>ToDoリスト</title>
</head>
<body>
  <div id="app">
    <h1>ToDoリスト</h1>
    <div id="todo-container">
      <div id="todo-form">
        <input type="text" id="todo-input" placeholder="新しいToDoを追加">
        <button onclick="addTodo()">追加</button>
      </div>
      <ul id="todo-list"></ul>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
}

#app {
  text-align: center;
}

#todo-container {
  max-width: 400px;
  margin: 20px auto;
}

#todo-form {
  display: flex;
  margin-bottom: 10px;
}

#todo-input {
  flex: 1;
  padding: 8px;
}

button {
  padding: 8px 16px;
  cursor: pointer;
}

// ToDoリストのデータ
let todos = [];

// DOM要素の取得
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');

// ToDoを表示する関数
function renderTodos() {
  todoList.innerHTML = ''; // リストをクリア

  // 各ToDoを表示
  todos.forEach((todo, index) => {
    const li = document.createElement('li');
    li.innerHTML = `
      <span>${todo}</span>
      <button onclick="editTodo(${index})">編集</button>
      <button onclick="deleteTodo(${index})">削除</button>
    `;
    todoList.appendChild(li);
  });
}

// ToDoを追加する関数
function addTodo() {
  const todoText = todoInput.value.trim();
  if (todoText !== '') {
    todos.push(todoText);
    todoInput.value = '';
    renderTodos();
  }
}

// ToDoを編集する関数
function editTodo(index) {
  const newTodoText = prompt('ToDoを編集', todos[index]);
  if (newTodoText !== null) {
    todos[index] = newTodoText.trim();
    renderTodos();
  }
}

// ToDoを削除する関数
function deleteTodo(index) {
  if (confirm('本当に削除しますか？')) {
    todos.splice(index, 1);
    renderTodos();
  }
}

// 最初の表示
renderTodos();
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.