Mini proyecto — Lista de tareas interactiva
Cuando la tarea ya está hecha, la fila dice done: buy tea. Mientras sigue abierta, dice buy tea. Llegas a esas dos lecturas con una lista corta: metes buy tea, la marcas hecha y después la quitas.
Aquí la lista es la página
La página anterior se quedó en los nombres de las destrezas y no mostró ninguna lista. Esta página es la lista. Trabajas con un arreglo, un formulario, textContent y un clic. Añadir no puede recargar la página.
Cada tarea es un objeto
tasks guarda objetos. Cada uno trae text y done. El recién llegado nace con done en false. addTask pasa las palabras por trim. Si no queda nada, no hay push y el objeto no se guarda.
const tasks = [];
function addTask(text) {
const clean = text.trim();
if (!clean) {
return;
}
tasks.push({ text: clean, done: false });
}
addTask("buy tea");
console.log(tasks[0].text);
console.log(tasks[0].done);
Los dos registros salen así: primero buy tea, luego false. addTask(" ") se queda sin letras tras trim, no guarda nada y la longitud sigue en 0.
La recarga tira la memoria
Enviar un formulario recarga el documento. El arreglo solo vive en memoria, así que la recarga lo suelta y la lista parece vacía. event.preventDefault() corta esa recarga. Luego entras el texto, vacías el campo y dibujas otra vez.
const form = document.querySelector("#add-form");
const input = document.querySelector("#task-text");
form.addEventListener("submit", (event) => {
event.preventDefault();
addTask(input.value);
input.value = "";
render();
});
El documento se queda. El campo queda vacío. render corre. Un campo de solo espacios no agrega ninguna fila.
Dos botones que no envían
render vacía #tasks y arma un li por elemento. Lo abierto muestra text. Lo hecho muestra done: y a continuación el texto. Cada fila lleva dos botones, los dos con type="button", para que no envíen el formulario. Done voltea el booleano. Quitar usa splice. Los dos dibujan de nuevo, porque los índices viejos apuntarían al elemento equivocado.
function toggleTask(index) {
tasks[index].done = !tasks[index].done;
}
function removeTask(index) {
tasks.splice(index, 1);
}
function render() {
const list = document.querySelector("#tasks");
list.textContent = "";
tasks.forEach((task, index) => {
const item = document.createElement("li");
item.textContent = task.done ? "done: " + task.text : task.text;
const doneButton = document.createElement("button");
doneButton.type = "button";
doneButton.textContent = "Done";
doneButton.addEventListener("click", () => {
toggleTask(index);
render();
});
const removeButton = document.createElement("button");
removeButton.type = "button";
removeButton.textContent = "Remove";
removeButton.addEventListener("click", () => {
removeTask(index);
render();
});
item.append(doneButton, removeButton);
list.append(item);
});
}
La secuencia es addTask("buy tea"), toggleTask(0), render. La fila pasa a done: buy tea. Otro volteo y vuelve a buy tea. removeTask(0) deja la longitud en 0 y el dibujo siguiente no tiene filas. Las palabras del campo entran con textContent. No las pegues en la página como HTML.
El índice nace en esa pasada
forEach se queda con el índice de esa pasada. Después de splice, los números viejos señalan la tarea equivocada. Dibujar otra vez tira los botones anteriores y fabrica otros con los índices de ahora. Sin ese segundo dibujo, Remove borra la fila que no era.
Tres oficios
El formulario añade. La lista dibuja. Done y Remove solo tocan tasks y luego dibujan otra vez.
<!DOCTYPE html>
<html>
<body>
<form id="add-form">
<input id="task-text" type="text">
<button type="submit">Add</button>
</form>
<ul id="tasks"></ul>
<script>
const tasks = [];
function addTask(text) {
const clean = text.trim();
if (!clean) return;
tasks.push({ text: clean, done: false });
}
function toggleTask(index) {
tasks[index].done = !tasks[index].done;
}
function removeTask(index) {
tasks.splice(index, 1);
}
function render() {
const list = document.querySelector("#tasks");
list.textContent = "";
tasks.forEach((task, index) => {
const item = document.createElement("li");
item.textContent = task.done ? "done: " + task.text : task.text;
const doneButton = document.createElement("button");
doneButton.type = "button";
doneButton.textContent = "Done";
doneButton.addEventListener("click", () => {
toggleTask(index);
render();
});
const removeButton = document.createElement("button");
removeButton.type = "button";
removeButton.textContent = "Remove";
removeButton.addEventListener("click", () => {
removeTask(index);
render();
});
item.append(doneButton, removeButton);
list.append(item);
});
}
document.querySelector("#add-form").addEventListener("submit", (event) => {
event.preventDefault();
addTask(document.querySelector("#task-text").value);
document.querySelector("#task-text").value = "";
render();
});
</script>
</body>
</html>
Escribe buy tea y pulsa Add. La fila es buy tea y el campo se limpia. Pulsa Done y la fila es done: buy tea. Pulsa Remove y la lista queda vacía. Add con el campo en blanco no añade nada.
Cinco pasos en la mesa
- Llama a addTask("buy tea"). El primer text es buy tea y done es false.
- Envía el formulario. La página no se recarga y la fila aparece.
- Pulsa Done. La fila dice done: buy tea.
- Pulsa Remove. tasks.length queda en 0.
- Envía solo espacios. La lista no crece.
Fallos que sí pasan
- saltarte preventDefault y dejar morir el arreglo al enviar
- hacer push de una cadena vacía
- poner type="submit" en Done o en Remove
- borrar la fila en pantalla y olvidar splice, de modo que el siguiente dibujo la devuelve
- saltarte render después de splice
- escribir el campo en la página como HTML
Qué te llevas
- Una tarea es { text, done } y done empieza en false
- addTask("buy tea") guarda buy tea; un campo en blanco no guarda nada
- preventDefault mantiene la página y render dibuja las filas
- Done muestra done: buy tea y Remove deja la longitud en 0
- Dibuja de nuevo después de cada cambio
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior