【JavaScript】JavaScriptでTodoリストを作成する #JavaScript

はじめに

　本記事は、プログラミング初学者が、学習を進めていて疑問に思った点について調べた結果を備忘録も兼ねてまとめたものです。
　そのため、記事の内容に誤りが含まれている可能性があります。ご容赦ください。
　間違いを見つけた方は、お手数ですが、ご指摘いただけますと幸いです。

JavaScriptでTodoリスト

index.html

<!DOCTYPE html>
<html>

<head>
    <title>JSTodoList</title>
    <meta charset="UTF-8" />
</head>

<body>
  <!-- 追加フォーム -->
  <div class="input-area">
    <input id="add-text"  placeholder="TODOを入力" />
    <button id="add-button">追加</button>
  </div>
  <!-- 未完了一覧 -->
  <div class="incomplete-area">
    <p class="title">未完了のTODO</p>
    <ul id="incomplete-list">
      <li>
        <div class="list-row">
          <p>タスク</p>
          <button>完了</button>
          <button>削除</button>
        </div>
      </li>
      <li>
        <div class="list-row">
          <p>タスク</p>
          <button>完了</button>
          <button>削除</button>
        </div>
      </li>
    </ul>
  </div>
  <!-- 完了済み一覧 -->
  <div class="complete-area">
    <p class="title">完了したTODO</p>
    <ul>
      <li>
        <div class="list-row">
          <p>完了タスク</p>
          <button>戻す</button>
        </div>
      </li>
    </ul>
  </div>
    <script src="src/index.js">
    </script>
</body>

</html>

index.js

import "./styles.css";

const onClickAdd = () => {
  // 入力値を取得する
  const inputText = document.getElementById("add-text").value;
  // フォームを空にする
  document.getElementById("add-text").value = "";

  // divを生成
  const div = document.createElement("div");
  console.log(div);
  // <div></div>

  // クラス名を追加
  div.className = "list-row";
  console.log(div);
  // <div class="list-row"></div>

  // liタグ生成
  const li = document.createElement("li");
  console.log(li);
  // <li></li>
  // liの中にinputTextの内容を取得
  li.innerText = inputText;
  // <li>テスト</li>

  // divの子要素に各要素を設定する
  div.appendChild(li);
  /*
    <div class="list-row">
      <li>テスト</li>
    </div>
  */

  // 未完了リストにタスクを追加
  document.getElementById("incomplete-list").appendChild(div);
  // 未完了リストの一番下にフォームに入力した内容が表示される
};

// 追加ボタンをクリックした際にonClickAddを実行
document.getElementById("add-button").addEventListener("click", () => onClickAdd());