javascriptでtodoアプリを作成する方法 - 介護とか経済とか（雑記版）

JavaScriptでTodoアプリを作成するには、次の手順を実行します。

HTMLでTodoリストのレイアウトを作成する。

JavaScriptでDOMを操作して、Todoリストに入力や削除などの機能を追加する。

CSSでTodoリストの外観を整える。

HTMLでTodoリストのレイアウトを作成する

まずは、TodoリストのレイアウトをHTMLで作成します。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Todoアプリ</title>
</head>
<body>
  <h1>Todoリスト</h1>
  <ul id="todo-list">
    </ul>
  <input type="text" id="todo-input">
  <button id="add-button">追加</button>
</body>
</html>

このコードでは、次の要素を定義しています。

h1要素：Todoリストのタイトルを表示します。

ul要素：Todoアイテムのリストです。

input要素：新しいTodoアイテムを入力するためのフィールドです。

button要素：新しいTodoアイテムを追加するためのボタンです。

JavaScriptでDOMを操作する

次に、JavaScriptでDOMを操作して、Todoリストに入力や削除などの機能を追加します。

// Todoアイテムをリストに追加する関数
function addTodo() {
  // 入力されたテキストを取得する
  let text = document.getElementById("todo-input").value;
  // 新しいTodoアイテムを作成してリストに追加する
  let todoItem = document.createElement("li");
  todoItem.textContent = text;
  document.getElementById("todo-list").appendChild(todoItem);
}

// ボタンをクリックしたときにaddTodo()関数を実行する
document.getElementById("add-button").addEventListener("click", addTodo);

このコードでは、次の関数を定義しています。

addTodo()：新しいTodoアイテムをリストに追加する関数です。

addTodo()関数は、次の処理を行います。

入力されたテキストを取得します。

新しいTodoアイテムを作成して、リストに追加します。

ボタンをクリックしたときに、addTodo()関数が実行されます。

CSSでTodoリストの外観を整える

最後に、CSSでTodoリストの外観を整えます。

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0 0 10px 0;
  padding: 10px;
  border: 1px solid black;
}

input {
  width: 100%;
  height: 30px;
}

button {
  width: 100px;
  height: 30px;
  background-color: #000;
  color: #fff;
  border: none;
}

このコードでは、次のスタイルを定義しています。

ul要素：リストのスタイルを定義します。

li要素：Todoアイテムのスタイルを定義します。

input要素：入力フィールドのスタイルを定義します。

button要素：ボタンのスタイルを定義します。

このコードを適用すると、次のようになります。

このコードを参考に、自分の好みに合わせてTodoリストをカスタマイズしてみてください。