Este proyecto se utiliza como hilo conductor de las sesiones de TeachT3ch 2021:
| Número | Nombre | Objetivo principal | Avance en la lista de tareas | Conceptos introducidos | Vídeo |
|---|---|---|---|---|---|
| 1 | Esqueleto HTML | Estructura de un documento HTML, etiquetas básicas, cómo escribir uno y verlo con el navegador. | Lista de tareas hardcodeadas, campo y botón para añadir, botón para eliminar. Todo sin formato. | HTML | Resumen de los vídeos temáticos |
| 2 | CSS | Sintaxis de CSS, propiedades más comunes | Lista de tareas hardcodeadas, campo y botón para añadir, botón para eliminar. Todo formateado. | CSS | HTML y CSS |
| 3 | DOM (1) | Elementos básicos del DOM, consola de desarrollo, eventos. | Que pueda escribir una nueva tarea, le pueda dar al botón de añadir y le aparezca un alert pidiendo confirmación. | DOM, Variables y tipos | DOM, Variables y tipos |
| 4 | DOM (2) | Selectores. Encontrar un elemento con JS y añadir un elemento nuevo a continuación. | Que se pueda añadir la tarea previa confirmación. Ejercicio: Que se pueda eliminar una tarea previa confirmación. | Condicionales y funciones | Condicionales y funciones |
| 5 | JavaScript (1) | Utilizar un array en memoria para gestionar las listas. | Mostrar el contenido del array como lista. No se puede añadir ni borrar. | Bucles, arrays. | Bucles, arrays. |
| 6 | JavaScript (2) | Implementar la nueva lógica de agregar, eliminar y repintar la lista. Añadimos estado a las tareas. | De nuevo una lista funcional. | Diccionarios -> objetos | Diccionarios -> objetos |
| 7 | JavaScript (3) | Guardar el estado de la lista en LocalStorage. Ordenación. Resumen... | Lista persistente. | JSON, localStorage, ordenación. | JSON, LocalStorage, ordenación. |