👏

【ToDoアプリ】を作ってみた！！

2023/09/08に公開

todoapp

idea

今回はシンプルなToDoアプリを作成しました。youtubeの勉強しながら作成してみました。
意外とデザインがモダンでいい感じ。

アプリの概要

このアプリは基本的なToDoアプリで、新しいタスクの追加と、タスクの完了・削除が行えます。更に、タスクの状態はローカルストレージに保存され、ブラウザをリロードしてもタスクの状態が保持されます。

では、コードの解説に移りましょう。

コードの構成

このアプリは主に3つのファイルで構成されています：

index.html : HTMLファイルで、アプリの基本構造を定義します。
style.css : CSSファイルで、アプリのスタイルを定義します。
script.js : JavaScriptファイルで、アプリの機能を定義します

index.html

HTMLファイルはアプリの基本的な構造を定義します。以下の要素が含まれます：

タイトルとスタイルシート、スクリプトのリンク
フォーム要素、入力フィールド、ToDoリストの領域
タスク操作の説明
コードは以下のようになります。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, 
    initial-scale=1.0"
    />
    <title>ToDo App</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <h1>todos</h1>
    <form id="form">
      <input
        type="text"
        id="input"
        class="input"
        placeholder="タスクを入力"
        autocomplete="off"
      />
      <ul class="todos" id="todos"></ul>
    </form>
    <small
      >左クリックでタスクを完了<br />
      右クリックでタスクを消去</small
    >
  </body>
</html>

style.css

CSSファイルではアプリのデザインとレイアウトを定義します。以下のスタイルが適用されています：

フォントスタイル
バックグラウンドカラー
フォームとリスト項目のスタイリング
コードは以下のようになります。

@import url("https://fonts.googleapis.com/css?family=Poppins:wght@200;400;600&display=swap");

* {
  box-sizing: border-box;
}

body {
  background-color: #f5f5f5;
  font-family: "Poppins", "sans-serif";
  margin: 0;
  align-items: center;
  margin-bottom: 40px;
  min-height: 100vh;
  flex-direction: column;
  color: #444;

}

h1 {
  color: rgb(179, 131, 226);
  font-size: 10rem;
  text-align: center;
  opacity: 0.4;
  margin-bottom: 40px;
}

form {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  margin: auto;
  max-width: 100%;
  width: 400px;
}

.input {
  
  border: none;
  padding: 1rem 2rem;
  display: block;
  width: 100%;
  font-size: 2rem;
  color: #444;
}

.input::placeholder{
  color: #d5d5d5;
}

.todos {
  background-color: #fff;
  padding: 0;
  margin: 0;
  list-style: none;
}

.todos li {
  border-top:1px solid #e5e5e5;
  cursor:pointer;
  font-size:1.5rem;
  padding: 1rem 2rem;
}

.todos li.completed {
  text-decoration: line-through;
  color:#b6b6b6;
}

small{
  color: #b5b5b5;
  margin-top: 3rem;
  text-align: center;
  display: block;
}

script.js

JavaScriptファイルはアプリの動的な機能を定義します。以下の機能が含まれます：

ローカルストレージからのタスクの読み込み

新しいタスクの追加

タスクの完了と削除

ローカルストレージへのタスクの保存

コードは以下のようになります。

const form = document.getElementById("form");
const input = document.getElementById("input");
const todosUL = document.getElementById("todos");

const todos = JSON.parse(localStorage.getItem("todos")) 

if (todos) {
  todos.forEach((todo) => {
    addTodo(todo);
  })
}


form.addEventListener("submit", (e) => {
  e.preventDefault();

  addTodo();

});


function addTodo(todo) {
  let todoText = input.value;

  if (todo){
    todoText = todo.txet;

  }

      if (todoText) {
        const todoEl = document.createElement("li");
        if(todo && todo.completed){
          todoEl.classList.add("completed");
        }
      todoEl.innerText = todoText;

      todoEl.addEventListener("click", () => {
      todoEl.classList.toggle("completed");
      });

      updateLS();

      todoEl.addEventListener("contextmenu", (e) => {
      e.preventDefault();
      todoEl.remove();

      updateLS();
      });

      todosUL.appendChild(todoEl);

    
      input.value = "";
      }

      updateLS();
  
  
}
function updateLS(){
    const todosEL =document.querySelectorAll("li");

    const todos=[];
    
    todosEL.forEach((todoEL) => {
      todos.push({
        text:todoEL.innerText,
        completed: todoEL.classList.contains("completed")
      })
    });

    localStorage.setItem("todos",JSON.stringify(todos));
}

まとめ

シンプルですがモダンで、日常の小さいタスクを管理にするにはいいのかなという感じのToDoアプリですね。
ぜひ参考にしてみてください！!