Zenn
👻

[Webアプリ] ToDoアプリ

2023/07/11に公開
HTML
tech

[Webアプリ] ToDoアプリ

HTML・CSS・JSを使ったToDoアプリを作ってみます。

目次

0. 完成品
1. HTML
2. CSS
3. JS
4. code

0.完成品

https://mi-ri-nae.com/

1.HTML

サイトの表示するコンテンツの構造を定義するためのものです。

まずは、分かりやすい場所に"Todo"というフォルダを作成してください。

VScode等のエディターで、作成したフォルダを開いてください。そして、"index.html"というファイルを作成して次の内容を記入してください。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

今回作成するサイトの構成を確認します。

大きく分けると、背景が肌色の部分と白色の２つに分けることができます。下記のような構成で作製してください。

<body>
  <!--肌色の部分-->
  <header>
    <h1>ToDo</h1>
  </header>

  <!--白色の部分-->
  <main>
    <h1>YOUR TODO LIST</h1>

    <!--入力フォーム-->
    <div id="addForm">
      <input id="addText" type="text" placeholder="Make your TODO list!" autocomplete="off">
      <input id="addBtn" type="button" value="enter">
    </div>

    <!--リスト表示-->
    <ul id="TodoList">
    </ul>
  </main>
</body>

2.CSS

各自で頑張ってみてください笑

時間があれば少し触れようと思います。

3.JS

まず、ToDoアプリに必要になる機能を整理します。

  • ToDoリストの追加
    • 文字の入力
    • 登録機能
    • ToDoリストの表示
  • ToDo達成（削除）
    • 表示の削除

一つずつ作成していきます。

4.code

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Todo list</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!--１番上の表示部分-->
  <header>
    <h1>ToDo</h1>
  </header>

  <!--主コンテンツ表示部分-->
  <main>
    <h1>YOUR TODO LIST</h1>

    <!--入力フォーム-->
    <div id="addForm">
      <input id="addText" type="text" placeholder="Make your TODO list!" autocomplete="off">
      <input id="addBtn" type="button" value="enter">
    </div>

    <!--リスト表示-->
    <ul id="TodoList">
    </ul>
  </main>

  <!--１番下の表示部分-->
  <footer>
  </footer>
  
  <script src="/makeTodo.js"></script>
</body>
</html>

CSS

JS

const addText = document.getElementById("addText");
const TodoList = document.getElementById("TodoList");

let ToDo = [];

const addTodo = () => {
  ToDo.push(addText.value);
  localStorage.setItem("TodoList", JSON.stringify(ToDo));
  makeTodo(addText.value);
  addText.value = "";
}

const deleteTodo = (event) => {
  event.target.parentElement.remove();
  ToDo = ToDo.filter((toDo) => toDo !== event.target.id);
  localStorage.setItem("TodoList", JSON.stringify(ToDo));
}

const makeTodo = (newTodo) => {
  // li作製＋id付与
  const li = document.createElement("li");
  li.innerText = newTodo;

  // input作製（button）
  const button = document.createElement("button");
  button.id = newTodo;
  button.type = "button";
  button.innerText = "Done";
  button.addEventListener("click", deleteTodo);

  // 場所の指定
  li.appendChild(button);
  TodoList.appendChild(li);
}

const setTodo = () => {
  ToDo = JSON.parse(localStorage.getItem("TodoList"));

  for (let i=0; i<ToDo.length; i++) {
    makeTodo(ToDo[i]);
  }
}

// 最初の挙動
const firstTodo = () => {
  // localstorageに保存された情報を取得
  localStorage.getItem("TodoList") && setTodo();
}



addBtn.onclick = addTodo;
window.onload = firstTodo;

Discussion