JavaScriptsでTODOアプリを作ってみた時の備忘録2

前回からの続きです。
本稿からはJavaScriptsメインで動作の備忘録となります。

タスクの追加について

追記ボタンのクリックアクションを実装する

【追加】ボタンをクリックした際に、入力した値を【createIncompleteList】に渡し、入力した値を初期化します。

const onClickAdd = () => {
  const inputText = document.getElementById("add-text").value;
  document.getElementById("add-text").value = "";

  createIncompleteList(inputText);
};
document
  .getElementById("add-button")
  .addEventListener("click", () => onClickAdd());

【createIncompleteList】関数

タスクを追加した際のHTMLタグを用意する

const createIncompleteList = (text) => {
  const div = document.createElement("div");
  div.className = "list-row";
  console.log(div);

  // liタグ生成
  const li = document.createElement("li");
  li.innerText = text;

  // divタグの子要素に各要素を設定
  div.appendChild(li);

適当に文字を入れて【追加】ボタンを押してみると下記HTMLタグが生成される。

<div class="list-row">
  <li>ああ</li>
</div>

追加したタスクに【完了】と【削除】ボタンが必要なので、そのタグも追加していく。

// button(完了)タグ生成
  const completeButton = document.createElement("button");
  completeButton.innerText = "完了";
  div.appendChild(completeButton);

続いて【削除】ボタン

// button(削除)タグ生成
  const deleteButton = document.createElement("button");
  deleteButton.innerText = "削除";
  div.appendChild(deleteButton);

生成してみると・・・？

<div class="list-row">
  <li>あああ</li>
  <button>完了</button>
  <button>削除</button>
</div>

生成したHTMLタグを【未完了リスト】に追加する

未完了リストのタグは【incomplete-list】なので、そのタグ配下に上記で生成したdivタグを追加する

//未完了リストに追加
  document.getElementById("incomplete-list").appendChild(div);

下記のように追加されていればOK

一旦今日はここまで！！