0
248
ViewsLista de tareas pendientes html css js con almacenamiento local
Busqué mucho sobre la lista de tareas pendientes js con almacenamiento local, pero no encontré lo que quiero.
¿Cómo puedo crear una lista de tareas pendientes y poner datos antes de escribir algo? En esta foto, no puse nada y muestro tarea:
·
Juan Pablo Isaza
1 answers
Answer question0
Primero debe obtener datos de localStorage. En el siguiente ejemplo, uso una matriz de datos porque no puedo usar en Stackoverflow el almacenamiento local. Luego itere la matriz y cree para cada fila un nuevo elemento de lista y agréguelo a su lista de tareas pendientes.
ejemplo de trabajo
const form = document.querySelector("form"); const input = document.querySelector("#input"); const list = document.querySelector("ul"); const data = ["task 1", "task 2"]; function init() { data.forEach(e => { let li = document.createElement('li'); li.innerHTML = e; const delBtn = document.createElement("button"); delBtn.innerText = 'x' li.append(' ',delBtn); list.append(li) }) } init(); /// form.addEventListener("submit", function(e) { e.preventDefault(); toDoLine(); input.value = ""; }); list.addEventListener('click', function(e){ if (e.target.nodeName === 'BUTTON') { e.target.closest('LI').remove(); } }) function toDoLine() { if (input.value !== '') { const toDo = input.value; const newLi = document.createElement("li"); newLi.innerText = toDo; const delBtn = document.createElement("button"); delBtn.innerText = 'x' newLi.append(' ', delBtn); list.append(newLi); } else { alert('add something to the list!') } } body { text-align: center; } #list { display: inline-block; } li { text-align: left; } <h1>To Do List</h1> <div> <form> <input action ='/test' id="input" type="text" placeholder="task"> <button id='submit'>submit</button> </form> </div> <div id='listdiv'> <ul id="list"></ul> </div>
·
Juan Pablo Isaza
Report
Answer question