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

Udemyのセールで気になっていたJSコースを購入し、受講してみた。
その時のアレコレを備忘録として書き記します。

完成イメージ図

codesandboxで作成したのでリンク貼っときます。
リンク切れてたようにスクリーンショットも貼っときます。
f:id:kyamisama:20211112144521j:plain

動作イメージ

TODOを追加する場合

1. タスクを入力し、追加ボタンをクリック
2. 【未完了のTODO】に追加される
f:id:kyamisama:20211112144919j:plain
タスクを追加すると【完了】【削除】ボタンが横に付いてくる

未完了のTODOタスクを削除する場合

1. タスクの横にある【削除】ボタンをクリックすることで消える。

未完了のTODOタスクを完了する場合

1. タスクの横にある【完了】ボタンをクリックすることで下の【完了したTODO】に移動する。
f:id:kyamisama:20211112145342j:plain
2. 【戻す】をクリックすると、未完了のTODO一覧にタスクが移動する

HTML/CSSコード

HTMLコード

<!DOCTYPE html>
<html>
  <head>
    <title>TODO_TASK</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./src/styles.css">
  </head>
  <body>
    <div class="input-area">
      <input id="add-text" placeholder="TODOを入力" />
      <button id="add-button">追加</button>
    </div>
    <div class="incomplete-atea">
      <p class="title">未完了のTODO</p>
      <ul id="incomplete-list">
        <div class="list-row">
          <li>TODOです</li>
          <button>完了</button>
          <button>削除</button>
        </div>
        <div class="list-row">
          <li>TODOです</li>
          <button>完了</button>
          <button>削除</button>
        </div>
      </ul>
    </div>
    <div class="complete-area">
      <p class="title">完了したTODO</p>
      <ul id="complete-list">
        <div class="list-row">
          <li>TODOでした</li>
          <button>戻す</button>
        </div>
      </ul>
    </div>
    <script src="src/index.js"></script>
  </body>
</html>

CSSコード

body {
  font-family: sans-serif;
}
input {
  border-radius: 16px;
  border: none;
  padding: 6px 16px;
  outline: none;
}

button {
  border-radius: 16px;
  border: none;
  padding: 4px 16px;
}
button:hover {
  background-color: #ff7fff;
  color: #fff;
  cursor: pointer;
}

li {
  margin-right: 8px;
}

.input-area {
  background-color: #c1ffff;
  width: 400px;
  height: 30px;
  padding: 8px;
  margin: 8px;
  border-radius: 8px;
}
.incomplete-atea {
  background-color: #c6ffe2;
  width: 400px;
  min-height: 200px;
  padding: 8px;
  margin: 8px;
  border-radius: 8px;
}
.complete-area {
  background-color: #ffffe0;
  width: 400px;
  min-height: 200px;
  padding: 8px;
  margin: 8px;
  border-radius: 8px;
}

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

.list-row {
  display: flex;
  align-items: center;
  padding-bottom: 4px;
}

HTMLコードのポイント

ポイントとしては、【未完了のTODO】と【完了したTODO】に既にタスクが記述されている。
理由として、JSは仮想DOM上のHTMLタグを使って追加や削除をを行う事で画面描画を行っているそうだ。
なので、JSで作成/削除するタグの見本を記述しているだけである。最終的には削除する。

次からJSのコードの内容を操作と共に見ていく。