HTMLでの実装

HTMLは簡単な部分の実装です。

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>To-doアプリ</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">未完了</p>
      <ul id="incomplete-list">
        <div class="list">
          <li>TODOです</li>
          <button>完了</button>
          <button>削除</button>
        </div>
      </ul>
    </div>
    <div class="complte-area">
      <p class="title">完了</p>
      <ul>
        <div class="list-row">
          <li>TODOでした</li>
          <button>戻す</button>
        </div>
      </ul>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

JavaScriptの実装

追加機能を足すだけでcssや削除機能などはここでは実装しないです。
参考にしてください。

import "./styles.css";

const ClickAdd = () => {
  //テキストボックスの値を取得し、初期化する
  const Text = document.getElementById("add-text").value;

  //alert(inputText); //　アラートで入力欄の内容が出てくる
  document.getElementById("add-text");

  //div生成
  const div = document.createElement("div");
  div.className = "list";
  //console.log(div);

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

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

  //未完了追加
  document.getElementById("incomplete-list").appendChild(div);
};

document
  .getElementById("add-button")
  .addEventListener("click", () => ClickAdd());

画像

完了を追加すると未完了の部分に完了が追加されます。

削除機能実装

JavaScriptで削除機能を実装していきます。

index.js

//省略
//押された削除ボタンdivを未完了から削除
    const deleteTaret = deleteButton.parentNode;
    //console.log(deleteTaret);
    document.getElementById("incomplete").removeChild(deleteTaret);
  });
  //console.log(deleteButton);
  //省略

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

parentNodeは親ノードを取得します。
getElementByIdは指定したIDにマッチする要素を取得します。
removeChildはノードを削除します。
appendChildは動的にWebサイトに要素を追加したい時に使います。

index.html

#省略
<div class="incomplete-area">
      <p class="title">未完了のTODO</p>
      <ul id="incomplete">
        <div class="list">
          <li>TODO</li>
          <button>完了</button>
          <button>削除</button>
        </div>
#省略

削除ボタンを押すと消えます。

追加機能のボタン実装

追加機能のボタン実装をしていきます。参考にしてみてください。

index.js

//button(完了)タグ生成
  const completeButton = document.createElement("button");
  completeButton.innerText = "完了";
  completeButton.addEventListener("click", () => {
    alert("完了");
  });
  //console.log(completeButton);

  //button(削除)タグ生成
  const deleteButton = document.createElement("button");
  deleteButton.innerText = "削除";
  deleteButton.addEventListener("click", () => {
    alert("削除");
  });

index.html

<div class="incomplete">
      <p class="title">未完了のTODO</p>
      <ul id="incomplete-list">
        <div class="list">
          <li>TODOです</li>
          <button>完了</button>
          <button>削除</button>
        </div>
        <div class="list">
          <li>TODOです</li>
          <button>完了</button>
          <button>削除</button>
        </div>
      </ul>
    </div>

これで追加ボタンを押すと追加したいTODOが追加されます。