Tu primera aplicación
Una lista de tareas es una de las primeras aplicaciones que se hacen. Escribes algo, lo añades, lo marcas como hecho y lo borras.
Parece poco, pero lleva todo lo que has aprendido: el DOM, los eventos y las listas de objetos.
Palabras clave
| Palabra | Qué significa | Ejemplo |
|---|---|---|
| Datos | La lista de tareas guardada en una variable. Es la verdad de la aplicación. | const tasks = [...] |
| Pintar | Dibujar la lista en la página a partir de los datos. | render() |
| Tarea | Un objeto con el título y si está hecha. | { title: 'Pan', done: false } |
| Depurar | Buscar por qué un programa no hace lo que esperas. | console.log(tasks) |
| localStorage | Un lugar del navegador donde guardar texto aunque cierres la página. | localStorage.setItem('a', 'b') |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
La idea: los datos mandan
Para no liarte, sigue una regla. No cambies la página directamente. Cambia los datos, y después vuelve a pintar la página entera desde ellos.
Así la lista y la página nunca se contradicen. Cada acción hace dos pasos: cambiar los datos y llamar a render.
Pruébalo: pintar y marcar tareas
<h1>Pendiente hoy</h1>
<ul id="list"></ul>
<p id="left"></p>
Ejemplo resuelto: los pasos del proyecto
| Paso | Qué haces | Qué usas |
|---|---|---|
| 1 | Pintar la lista | for, createElement, appendChild |
| 2 | Añadir una tarea | submit, preventDefault, push |
| 3 | Borrar una tarea | Un botón, un clic y la lista de datos |
| 4 | Contar las pendientes | Un bucle y un contador |
| 5 | Guardar para después | JSON y localStorage |
Las celdas que rellenan los estudiantes quedan en blanco en esta vista previa.
Repaso rápido: el ciclo
Inténtalo
Repaso rápido: el ciclo
3 preguntasTus respuestas se corrigen aquí y no se guardan. Una cuenta guarda tus resultados.
Cuando no funciona: depurar
Habrá fallos. Es normal. Un buen programador no se desespera: investiga.
Pulsa F12 y abre la pestaña Consola. Ahí salen los errores con su línea. Pon console.log(tasks) para ver qué hay dentro de una variable. Si sale undefined, el nombre que pides no existe en ese dato.
Pruébalo: encuentra el fallo
<h1>Mis tareas</h1>
<ul id="list"></ul>