sksk000

Tags

1 minute read

学んだこと

TODO アプリを作成する

  • html は以下の通りに実装する
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>TODOJS</title>
  </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"></ul>
    </div>
    <div class="complete-area">
      <p class="title">完了のTODO</p>
      <ul id="complete-list"></ul>
    </div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>
  • CSS は以下の通り
body {
  font-family: sans-serif;
  color: #666;
}

input {
  border-radius: 8px;
  border: none;
  padding: 6px 16px;
}

button {
  border-radius: 8px;
  border: none;
  padding: 4px 16px;
  margin: 0px 2px;
}

button:hover {
  background-color: #c6e5d9;
  color: white;
  cursor: pointer;
}

.input-area {
  background-color: #c6e5d9;
  width: 400px;
  height: 30px;
  padding: 8px;
  margin: 8px;
  border-radius: 8px;
}

.incomplete-area {
  border: 2px solid #aacfd0;
  width: 400px;
  min-height: 200px;
  padding: 8px;
  margin: 8px;
  border-radius: 8px;
}

.complete-area {
  border: 2px solid #aacfd0;
  width: 400px;
  min-height: 200px;
  padding: 8px;
  margin: 8px;
  border-radius: 8px;
  background-color: #c9dede;
}

.title {
  text-align: center;
  margin-top: 0;
  font-weight: bold;
}

.list-row {
  display: flex;
  align-items: center;
}

.todo-item {
  margin: 6px;
}
  • JS は以下の通り
import './style.css';

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

  //未完了リストに追加
  createIncompleteTodo(inputText);
};

const createIncompleteTodo = (todo) => {
  // li生成
  const li = document.createElement('li');

  // div生成
  const div = document.createElement('div');
  div.className = 'list-row';

  // p生成
  const p = document.createElement('p');
  p.className = 'todo-item';
  p.innerText = todo;

  // ボタン生成
  const completeButton = document.createElement('button');
  completeButton.innerText = '完了';
  completeButton.addEventListener('click', () => {
    const moveTarget = completeButton.closest('li');
    // 完了ボタンの次にかかれている要素を取得し、削除する
    completeButton.nextElementSibling.remove();
    completeButton.remove();

    // 戻すボタン作成
    const backButton = document.createElement('button');
    backButton.innerText = '戻す';
    moveTarget.firstElementChild.appendChild(backButton);
    backButton.addEventListener('click', () => {
      // 戻すボタンの前の要素である文字列を取得する。
      const todoText = backButton.previousElementSibling.innerText;
      createIncompleteTodo(todoText);

      // liタグを削除
      backButton.closest('li').remove();
    });

    // 完了リストに移動する
    document.getElementById('complete-list').appendChild(moveTarget);
  });

  const deleteButton = document.createElement('button');
  deleteButton.innerText = '削除';
  deleteButton.addEventListener('click', () => {
    // 一番最初に見つかったliタグを取得する
    const deleteTarget = deleteButton.closest('li');
    document.getElementById('incomplete-list').removeChild(deleteTarget);
  });

  // liタグにdivを追加する
  div.appendChild(p);
  div.appendChild(completeButton);
  div.appendChild(deleteButton);
  li.appendChild(div);

  //未完了リストに追加する
  document.getElementById('incomplete-list').appendChild(li);
};

document.getElementById('add-button').addEventListener('click', onClickAdd);
  • このような Todo リストを作成できた。 alt text

新しく覚えたこと

オブジェクト.previousElementSibling

  • 自身の要素の前の要素を取得する。

オブジェクト.nextElementSibling

  • 自身の要素の次の要素を取得する。

オブジェクト.closest(‘タグ名’)

  • 自身の要素または親要素を対象に、引数で指定したタグ名と一致する最も近い要素を検索し、最初に見つかった要素を取得する。

You May Also Enjoy