Todoリスト②

## ToDoリスト
プログラムにとっても計画性が一番大事です。なのでToDoリストを作りました。順を追って作り方を説明しましょう。
## 全体のプログラム
```html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>ToDo リスト</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
  }
  .container {
    max-width: 600px;
    margin: 0 auto;
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    animation: fadeIn 0.5s ease-in-out;
  }
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  #task-form {
    margin-bottom: 20px;
  }
  #task-list {
    list-style: none;
    padding: 0;
  }
  #task-list li {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideIn 0.5s ease-in-out;
  }
  @keyframes slideIn {
    from { transform: translateX(-100px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
  }
  #task-list li:last-child {
    border-bottom: none;
  }
  .delete-button {
    background-color: #ff6b6b;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }
  .delete-button:hover {
    background-color: #ff5252;
    animation: shake 0.5s ease-in-out;
  }
  @keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
  }
  .description {
    font-size: 0.9em;
    color: #777;
    margin-top: 5px;
    transition: color 0.3s ease;
  }
  #task-list li:hover .description {
    color: #555;
  }
</style>
</head>
<body>

<div class="container">
  <h1>ToDo リスト</h1>
  <form id="task-form">
    <input type="text" id="task-input" placeholder="タスクを入力" required>
    <input type="text" id="description-input" placeholder="説明を入力" required> 
    <button type="submit">追加</button>
  </form>
  <ul id="task-list"></ul>
</div>

<script>
  document.getElementById('task-form').addEventListener('submit', function(event) {
    event.preventDefault();
    var taskInput = document.getElementById('task-input');
    var descriptionInput = document.getElementById('description-input');
    var newTask = taskInput.value.trim();
    var description = descriptionInput.value.trim(); 
    if (newTask) {
      var listItem = document.createElement('li');
      listItem.textContent = newTask;
      var descElem = document.createElement('div');
      descElem.textContent = description;
      descElem.className = 'description';
      var deleteButton = document.createElement('button');
      deleteButton.textContent = '削除';
      deleteButton.className = 'delete-button';
      deleteButton.onclick = function() {
        if(confirm('このタスクを削除してもよろしいですか？')) {
          listItem.remove();
        }
      };
      listItem.appendChild(descElem);       listItem.appendChild(deleteButton);
      document.getElementById('task-list').appendChild(listItem);
      taskInput.value = '';
      descriptionInput.value = ''; 
      }
    saveTasks(); 
  });

  function saveTasks() {
    var tasks = [];
    document.querySelectorAll('#task-list li').forEach(function(taskItem) {
      var task = taskItem.firstChild.textContent;
      var description = taskItem.querySelector('.description').textContent;
      tasks.push({ task: task, description: description });
    });
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }

  // ローカルストレージからタスクを復活させる
  function loadTasks() {
    var tasks = JSON.parse(localStorage.getItem('tasks'));
    if (tasks) {
      tasks.forEach(function(task) {
        var listItem = document.createElement('li');
        listItem.textContent = task.task;
        var descElem = document.createElement('div');
        descElem.textContent = task.description;
        descElem.className = 'description';
        var deleteButton = document.createElement('button');
        deleteButton.textContent = '削除';
        deleteButton.className = 'delete-button';
        deleteButton.onclick = function() {
          if(confirm('このタスクを削除してもよろしいですか？')) {
            listItem.remove();
            saveTasks();
          }
        };
        listItem.appendChild(descElem);
        listItem.appendChild(deleteButton);
        document.getElementById('task-list').appendChild(listItem);
      });
    }
  }

  window.onload = loadTasks;
</script>

</body>
</html>

```
上のにあるcssはおわかりの通りレイアウトを考えています。

jsは、Todoリストの主なシステムを設定しおります。

## ローカルストレージに保存する方法
* まずローカルストレージに保存する見ていきましょう。
```js
 function saveTasks() {
    var tasks = [];
    document.querySelectorAll('#task-list li').forEach(function(taskItem) {
      var task = taskItem.firstChild.textContent;
      var description = taskItem.querySelector('.description').textContent;
      tasks.push({ task: task, description: description });
    });
    localStorage.setItem('tasks', JSON.stringify(tasks));
  }

```
* 説明することはないので、自分で解読してください。（ここに書くと長くなる。）

## ローカルストレージからデータを呼び起こす。
```js
function loadTasks() {
    var tasks = JSON.parse(localStorage.getItem('tasks'));
    if (tasks) {
      tasks.forEach(function(task) {
        var listItem = document.createElement('li');
        listItem.textContent = task.task;
        var descElem = document.createElement('div');
        descElem.textContent = task.description;
        descElem.className = 'description';
        var deleteButton = document.createElement('button');
        deleteButton.textContent = '削除';
        deleteButton.className = 'delete-button';
        deleteButton.onclick = function() {
          if(confirm('このタスクを削除してもよろしいですか？')) {
            listItem.remove();
            saveTasks(); // タスクを削除した後にローカルストレージを更新するプログラムです。
          }
        };
        listItem.appendChild(descElem);
        listItem.appendChild(deleteButton);
        document.getElementById('task-list').appendChild(listItem);
      });
    }
  }
```
上のプログラムはデータ呼び押しプログラムです。
その中の呼び起こしたデータを消すためのプログラムはその下です。
```js
 if(confirm('このタスクを削除してもよろしいですか？')) {
            listItem.remove();
            saveTasks();
```
で消した内容を保存するプログラムです。
## 読み込んだデータをTodoリストに反映させる。
``` js
  window.onload = loadTasks;
```
はい以上です。（説明することないので）

# 最後に
HTMLでデータを保存したいときにこのプログラムを使うといいでしょう。
以上です。