Rullst AcademyRullst Academy/Lección
JavaScript e interacción · Lección 09 / 14

Estado y pantalla de acuerdo

La pantalla muestra una vista de la lista. Esa vista no debe destruir el resto del plan.

Rutas de aprendizaje16 min

Vamos a descubrir juntos

  1. 1

    Estado es la información mantenida: tareas y filtro elegido. La interfaz se deriva de ese estado. Filtrar la vista no debe sustituir la lista principal por el resultado filtrado.

  2. 2

    Para alternar finalización, usa map y compara ids; copia el objeto cambiado con {...task, done:!task.done}. Produce una lista nueva sin cambiar ese objeto original. No es una copia profunda general.

  3. 3

    Deriva cuenta y total de la lista actual, en vez de mantener contadores que pueden divergir. El total suma todas las duraciones; el filtro solo cambia filas visibles. Define esto antes de probar.

  4. 4

    La demostración olvida misiones al recargar o cambiar de cuenta. Descargar plan exporta JSON; no guarda código ni sincroniza dispositivos. El borrador del editor y el progreso de la cuenta son mecanismos diferentes.

Del ejemplo a tu propia interacción

Descarga el kit, extráelo y abre index.html en el navegador. Edita lesson.js, guarda y recarga. No necesitas Node ni paquetes. README explica HTTP local cuando sea necesario.

La demostración usa JavaScript preparado. No ejecuta código del editor. Descarga tu cambio aparte para probar en el kit local.

Mis archivos y GitHub
Probar el proyecto que construiremos

Planificador de pequeñas misiones

Crea, completa y revisa un plan de estudio con datos ficticios. Las misiones quedan solo en memoria y desaparecen al recargar.

Usa un título corto sin datos personales y minutos enteros de 1 a 120. Hasta 20 misiones.

Misiones del plan
0
Minutos de todas las misiones
0
Misiones terminadas
0

No hay misiones en este filtro. Añade una o elige otro filtro.

    Laboratorio de sugerencias

    Por defecto los escenarios se simulan en este navegador. No se envían peticiones de sugerencias ni se sustituye tu plan.

    Disponible al abrir el kit por http://127.0.0.1:8768. Consulta README; no necesitas cuenta externa.

      Este JSON contiene solo misiones, no código. La demostración no importa archivos ni sincroniza dispositivos. Descarga el JavaScript editado desde el espacio de archivos.

      Enlaces oficiales y siguiente paso

      ✦
      TU MISIÓN

      Separar datos, filtro y renderizado y actualizar una misión por id.

      Ahora te toca

      Taller de descubrimientos

      Pensar antes de ejecutar

      Dos misiones: id 1 pendiente, 15 min; id 2 terminada, 20 min. El filtro muestra solo pendientes.
      Prepara tus respuestas y comprueba cuando estés listo.
      Una pausa para entender

      ¿Descargar missions.json guarda también el JavaScript editado?

      Necesito una pista

      Predice el resultado, ejecuta tu archivo y explica la diferencia.

      Cargando tu camino…

      Llévatelo contigo

      Añade títulos iguales, termina solo uno y usa los tres filtros. Descarga JSON, recarga y explica qué conserva el archivo y qué desapareció de la pantalla.

      A tu ritmo

      Mis archivos y GitHub

      Cada lección puede convertirse en un registro propio: código, notas o un plan de práctica. Guardar un archivo en GitHub es opcional y no cambia tus XP.

      Manual del alumno

      El editor y las descargas se abren cuando esta lección esté disponible para tu cuenta. Revisa el acceso indicado abajo o vuelve al mapa de la ruta.

      Comprobando tu acceso a esta lección…

      Rullstpetbot

      La IA puede equivocarse. Consulta el material de la lección.