Zenn
🌟

シンプルなTODOアプリを作ります

2023/02/01に公開
初心者
JavaScript
入門
tech

記事を書くきっかけ

HTML,CSS,JavaScriptの基礎的な学習内容を定着させるのにちょうどよい難易度であると考えたためシンプルなTODOアプリを作りました。

ゴール

シンプルなTODOアプリの作成を通じて知識を定着させる。

HTMLとCSS

ひとまずは、HTMLとCSSを使って完成品の見た目を作成する。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>TODOアプリ</title>
</head>
<body>
  <h1>TODOアプリ</h1>
  <div class="input-area">
    <input type="text" placeholder="TODOを入力">
    <button>追加</button>
  </div>
  <div class="list-area">
    <ul>
      <li>
        <p>掃除</p>
        <button>完了</button>
        <button>削除</button>
      </li>
      <li class="completed">
        <p>洗濯</p>
        <button>完了</button>
        <button>削除</button>
      </li>
      <li>
        <p>散歩</p>
        <button>完了</button>
        <button>削除</button>
      </li>
    </ul>
  </div>
  <script src="main.js"></script>
</body>
</html>

TODOを入力するエリアとTODOをリストとして表示するエリアを準備した。

styles.css
body {
  width: 400px;
  margin: 0 auto;
}

h1 {
  color: gray;
  text-align: center;
}

li {
  display: flex;
  align-items: center;
}

p {
  margin-right: 8px;
}

button {
  margin: 0 4px;
  cursor: pointer;
  height: 24px;
  border: none;
  border-radius: 8px;
}


.input-area {
  text-align: center;
  margin-bottom: 16px;
  min-height: 360px;
}

.list-area {
  background-color: aqua;
  text-align: center;
  border-radius: 8px;
  margin: 8px;
  padding: 8px;
}

.completed >  * {
  text-decoration: line-through;
  opacity: 0.8;
}

completedというクラスを作成しておいた。このクラスを付与すると、子要素に打ち消し線が付き、少し表示が薄くなることでTODOが完了したような見た目になるようにしている。

現時点ではこのような見た目になっている。

JavaScriptで機能を追加する

JavaScriptで取得したい要素にidを付与した。また、表示を確認するために記述していたli要素は削除した。

index.html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="styles.css">
  <title>TODOアプリ</title>
</head>
<body>
  <h1>TODOアプリ</h1>
  <div class="input-area">
    <input type="text" placeholder="TODOを入力" id="input-text">
    <button id="input-button">追加</button>
  </div>
  <div class="list-area">
    <ul id="todo-list">
    </ul>
  </div>
  <script src="main.js"></script>
</body>
</html>

いよいよJavaScriptを記述する。

main.js
'use strict'

const onClickAdd = () => {
  //入力したテキストを取得し、初期化する
  const inputText = document.getElementById("input-text").value;
  document.getElementById("input-text").value = "";

  // liタグを生成する
  const li = document.createElement("li");

  // pタグを生成する
  const p = document.createElement("p");
  p.innerText = inputText;

  // 完了ボタンを生成する
  const completeButton = document.createElement("button");
  completeButton.innerText = "完了";

  // 押下されたターゲットにcompletedクラスを付け外しする
  completeButton.addEventListener("click", () => {
    const completeTarget = completeButton.parentNode;
    completeTarget.classList.toggle("completed");
  });

  // 削除ボタンを生成する
  const deleteButton = document.createElement("button");
  deleteButton.innerText = "削除";

  // 押下されたターゲットを削除する
  deleteButton.addEventListener("click", () => {
    const deleteTarget = deleteButton.parentNode;
    document.getElementById("todo-list").removeChild(deleteTarget);
  });

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

  // TODOリストに追加
  document.getElementById("todo-list").appendChild(li);
};

document
  .getElementById("input-button")
  .addEventListener("click", () => onClickAdd());

次のような結果となった。

今回の成果物を私のgithub上に公開しています。

https://github.com/925rycki/zenn-todo

まとめ

HTML,CSS,JacaScriptを使ってシンプルなTODOアプリを作成することができました。
アプリを作成する経験を通じて、基礎的なDOM操作、いくつかのメソッドを使用することができ、知識の整理ができたと思います。

最後まで読んでいただきありがとうございました！

Discussion