Estoy tratando de crear una lista de tareas pendientes y me pregunto cómo haría para evitar que las tareas completas desaparezcan cada vez que agrego una nueva tarea. Soy consciente de que esto está sucediendo porque borro mi div cada vez que se agrega una nueva tarea, sin embargo, no estoy seguro de cómo proceder para seguir usando matrices en esto y aún mostrar tareas completadas junto con tareas nuevas.
Codepen: https://codepen.io/martinkariuki7-the-looper/pen/OJvQXRW
const newToDo = document.getElementById('todo-new') const addBtn = document.getElementById('addToDo') const main= document.getElementById('toDoList') const taskDone = document.getElementsByClassName('task') let toDoList = [] // populate to do list function populateToDo(){ let todo = newToDo.value todo !== null && todo !== '' ? toDoList.push(todo) : alert('You must write something') updateDOM() } //Update DOM function updateDOM(){ // Clear main div main.innerHTML = `<h1>To do list </h1>` // Show tasks on the front toDoList.forEach(item =>{ let task = document.createElement('div') task.classList.add('task') task.innerHTML = `<label><input type="checkbox" >${item}</label><br>` main.append(task) task.addEventListener('change', () => task.classList.toggle('task-complete')) newToDo.value = '' }) } // Event listeners // Add Tasks addBtn.addEventListener('click', populateToDo) newToDo.addEventListener('keydown', (e) => { if(e.code === 'Enter'){ e.preventDefault() populateToDo() } })Si desea usar una matriz para actualizar la lista, debe comparar lo que tiene con lo que se cambiará.
Si no hay elementos con el mismo texto, puede hacer algo como esto:
function updateNodes() { const nodesMap = new Map(); [...document.querySelectorAll('div label')] .forEach(node => { nodesMap.add(node.innerText, node); }); const nodesUpdate = []; toDoList.forEach(item => { if (nodesMap.has(item)) { nodesUpdate.push(nodesMap[item]); } else { const newNode = document.createElement('div'); newNode.classList.add('task'); newNode.innerHTML = `<label><input type="checkbox" >${item}</label>`; nodesUpdate.push(newNode); } }); return nodesUpdate; }De lo contrario, cada elemento (o tarea) debe tener una identificación. De lo contrario, si hay dos elementos con el mismo nombre, no sabrá cuál se eliminó o movió. Además, sin identificaciones, no puede saber si se cambió el nombre de un elemento.
El código aquí no fue probado y, por supuesto, debe adaptarlo a sus necesidades.