HTML,CSS,JavaScriptで作るtodoリスト(4)

今回はタスクの完了処理の実装工程をメモしていきます。
前回の記事はこちらから
yuu104.hatenablog.com

目標の確認

下記画像のように、チェックボックスをクリックするとタスクがToDo欄から完了欄に表示されるようにします。

前回までのjavascriptファイル

const todoForm = document.getElementById('todo_form');
const add = document.getElementById('add');
const taskUl = document.getElementById('task_ul');
const taskTitle = document.querySelector('.task_title');
let tasks = []; //タスクを配列として保管
let compedTasks = [];  //完了したタスクを配列として保管

function addTask(doMessage) {
  //タスク要素作成・・・
  taskTitle.style.display = 'inline-block';
  tasks.push(doMessage);
  let li = document.createElement('li');
  let input = document.createElement('input');
  input.type = "checkbox";
  let div = document.createElement('div');
  let span = document.createElement('span');
  span.innerHTML = doMessage;
  let a = document.createElement('a');
  a.innerHTML = '削除';
  li.appendChild(input);
  li.appendChild(div);
  div.appendChild(span);
  div.appendChild(a);
  taskUl.appendChild(li);
  //・・・タスク要素作成

  a.addEventListener('click', () => {  //タスクを削除
      li.remove();
      tasks = tasks.filter(task => {
      return task !== doMessage;
      });
      if(!tasks.length) taskTitle.style.display = 'none';
  });
}


todoForm.addEventListener('submit', (e) => {
  e.preventDefault();
  let doMessage = add.value; 
  if(doMessage !== '') {
    addTask(doMessage);
  }
  document.todo_form.reset();
});

タスク完了処理の手順

1. タスク内容の文字列を完了用の配列に格納
2. 完了したタスクを表示するための要素をjavascriptで作成
3. タスク内容の文字列をtodo用の配列から削除
4. todo欄から完了したタスクの要素を削除

コード解説

input.addEventListener('change', () => {  //タスク完了
      addComp(doMessage);　//①
　  //②〜
      tasks = tasks.filter(task => {
        return task !== doMessage;
      });
      li.remove();
      //〜②
      if(!tasks.length) taskTitle.style.display = 'none'; //③
});

このコードをaddTask()関数内に書きます。
理由は前回の削除機能の実装のときと同じで、タスクをtodo欄に表示するための要素をaddTask()関数内で作成しているためです。
①部分は新たに関数を用いて手順の1〜2までの処理を行っています。
②部分は手順の3〜4までの処理を行っています。この処理は前回のタスクの削除機能の処理と同じです。
③部分は、もしtodo欄にあるタスクが１つも存在しない時、todo欄を非表示にする処理を行っています。

addComp()関数内のコード解説

function addComp(doMessage) {
    compTitle.style.display = 'inline-block';
    compedTasks.push(doMessage); //配列に完了したタスクを追加

　//完了したタスクを表示するための要素を作成〜
    let li = document.createElement('li');
    let input = document.createElement('input');
    input.type = "checkbox";
    input.checked = "checked";
    let div = document.createElement('div');
    let span = document.createElement('span');
    span.innerHTML = doMessage;
    li.appendChild(input);
    li.appendChild(div);
    div.appendChild(span);
    compUl.appendChild(li);
    //〜完了したタスクを表示するための要素を作成

    input.addEventListener('change', () => {  //todoに戻す
      addTask(doMessage);
      compedTasks = compedTasks.filter(compedTask => {
        return compedTask !== doMessage;
      });
      li.remove();
      if(!compedTasks.length) compTitle.style.display = 'none';
    });
 }

この関数内で手順3〜4までとその他の処理を書いています。

アコーディオン機能の実装

const taskTitle = document.querySelector('.task_title');
const compTitle = document.querySelector('.comp_title');

taskTitle.addEventListener('click', () => {
    taskUl.classList.toggle('close');
    taskTitle.classList.toggle('close');
    document.querySelector('.tasks').classList.toggle('close');
  });

  compTitle.addEventListener('click', () => {
    compUl.classList.toggle('close');
    compTitle.classList.toggle('close');
    document.querySelector('.comps').classList.toggle('close');
  });

メッセージ

以上でtodoリストの作成過程のメモは終了です。