Вывести все задачи из todolist в один таб

Подскажите, пожалуйста, как вывести все задачи (и активные и завершенные) во вкладку all? Задачи добавляются через поле ввода, переходы из одной категории в другую работают, а вот как их все вывести не понимаю

Код

document.addEventListener('DOMContentLoaded', () => {
    var addButton = document.getElementById('btn-add');
    var inputTask = document.querySelector('.input-task');
    var activeTasks = document.querySelector('.list-group.active');
    var allTasks = document.querySelector('.all');
    var completedTasks = document.querySelector('.completed');
    console.log(addButton);
    console.log(allTasks);
    console.log(inputTask);
    console.log(activeTasks);
    console.log(completedTasks);


    function createNewElement(task, finished) {
        var listItem = document.createElement('li');
        listItem.className = "list-group-item d-flex align-items-center border-0 mb-2 rounded";
        var checkbox = document.createElement('input');
        checkbox.className = "form-check-input me-2";
        checkbox.type = "checkbox";
        var span = document.createElement('span');
        span.innerText = task;
        var input = document.createElement('input');
        input.type = "text";
        
        if(finished){
            checkbox.checked = true;
            span.className = "s";
        }else {
            checkbox.checked = false;
        }

        listItem.appendChild(checkbox);
        listItem.appendChild(span);

        return listItem;
    }

    function addTask() {
        if (inputTask.value) {
            var listItem = createNewElement(inputTask.value, false);
            activeTasks.appendChild(listItem);

            bindTaskEvents(listItem, finishTask);
            inputTask.value = "";
        }
        save();
    }
    addButton.onclick = addTask;

    function finishTask() {
        var listItem = this.parentNode;
        var checkbox = listItem.querySelector('.form-check-input');

        var span = listItem.querySelector('span');
        span.className = "s";

        completedTasks.appendChild(listItem);
        bindTaskEvents(listItem, unfinishTask);
        save();
    }

    function unfinishTask() {
        var listItem = this.parentNode;
        var checkbox = listItem.querySelector('.form-check-input');
        var span = listItem.querySelector('span');
        span.className = "";
        activeTasks.appendChild(listItem);
   
        bindTaskEvents(listItem, finishTask)
        save();
    }

    function bindTaskEvents(listItem, checkboxEvent) {
        var checkbox = listItem.querySelector('.form-check-input');
        checkbox.onclick = checkboxEvent;
    }

    function save() {
        var activeTasksArr = [];
        for (var i = 0; i < activeTasks.children.length; i++) {
            console.log(activeTasks.children[i]);
            activeTasksArr.push(activeTasks.children[i].innerText);
        }

        var completedTasksArr = [];
        for (var i = 0; i < completedTasks.children.length; i++) {
            completedTasksArr.push(completedTasks.children[i].innerText);
        }
        
        localStorage.removeItem('todo');
        localStorage.setItem('todo', JSON.stringify({
            activeTasks: activeTasksArr,
            completedTasks: completedTasksArr
        }));
        // localStorage.clear();

    }

    function load(){
        return JSON.parse(localStorage.getItem('todo'));
    }

    var data=load();

    for(var i=0; i<data.activeTasks.length;i++){
        var listItem=createNewElement(data.activeTasks[i], false);
        activeTasks.appendChild(listItem);
        bindTaskEvents(listItem, finishTask);
    }


    for(var i=0; i<data.completedTasks.length; i++){
        var listItem=createNewElement(data.completedTasks[i], true);
        completedTasks.appendChild(listItem);
        bindTaskEvents(listItem, unfinishTask);
    }

});

Ответы (0 шт):