Вывести все задачи из 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);
}
});