JavaScript e interacción · Lección 14 / 14

Misión: un planificador que responde

Tu proyecto debe responder, explicar fallos y conservar evidencias de tus decisiones.

Vamos a descubrir juntos

1
lesson.js del proyecto final implementa la interfaz; core.js reúne reglas compartidas. Lee un camino completo: submit → validar → actualizar tareas → render. Explica por qué el DOM no es la única fuente de datos.
2
Haz tres cambios justificados: un error más claro, un contador derivado adicional y una prueba nueva. Conserva texto, límites, ids y foco. No elimines validación solo para pasar una prueba.
3
Prueba títulos iguales, entrada inválida, filtros, eliminación, teclado, anchura estrecha, sugerencias vacías, fallos HTTP/JSON, cancelación y respuestas antiguas. Completa REVIEW.md con esperado/observado y pendientes; las pruebas no certifican toda la accesibilidad.
4
El ZIP es el modelo inicial: descarga tu JavaScript editado y sustituye lesson.js. GitHub envía un archivo por operación confirmada; envía archivos de apoyo mediante Git o el sitio de GitHub. Esto no activa Pages. Git: cambios en equipo ya está disponible para continuar con propuestas y revisión.

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.

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

Mostrar misiones

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.

Condición para observarUsar HTTP real en el servidor local del kit

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

Entregar un proyecto propio con pruebas de entradas, estado, teclado y carga.

¿Cómo reconocer lo que aprendí?

Usa objetivos y desafío para reflexionar o conversar con alguien que pueda ayudar. Es autoevaluación orientada: no envía respuestas, no da XP ni verifica automáticamente autonomía.

En Fundamentos, modifica un ejemplo, predice, comprueba un caso normal y uno de error, y explica tus decisiones. Si necesitas ayuda, identifica qué practicar otra vez.

Tu desafío de transferencia

Entrega la carpeta, tres cambios explicados y REVIEW.md. Añade una prueba de regresión que falle al retirar tu corrección.

Guarda evidencia: predicción, intento, resultado, cambio propio y lo que aún no explicas. Busca feedback si es posible; si estudias solo, vuelve después sin copiar y compara intentos.

Inténtalo de nuevo en otro momento

Tras una pausa, explica la idea sin abrir la solución y prueba otro ejemplo. Compara con tu primer intento: ¿qué puedes hacer por tu cuenta y dónde necesitas una pista? Puedes escribir, hablar o dibujar; elige una forma de comprobar la misma idea. Registra la ayuda recibida, incluida IA, y vuelve al fragmento necesario. No hay plazo universal ni XP extra por este registro.

Las conclusiones y XP registran evaluaciones de Rullst Academy. Una ruta introductoria puede ayudar en la vida diaria y preparar estudios; sola no demuestra dominio completo ni preparación profesional. Nivel indica profundidad, no edad.

Llévatelo contigo

Entrega la carpeta, tres cambios explicados y REVIEW.md. Añade una prueba de regresión que falle al retirar tu corrección.

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…

Tu camino, paso a paso

Descargar material de la actividad

Descarga el ejemplo de la lección y un cuaderno para tus notas. El ZIP incluye una guía para organizar actividades en uno o varios repositorios. Publicar es opcional; las cuentas habilitadas también pueden usar el botón de envío a GitHub.

Tu archivo de esta lección

Edita el ejemplo o registra lo aprendido. Este espacio no ejecuta código ni corrige respuestas. El borrador se guarda solo en este navegador, separado por cuenta; tú decides cuándo descargar o enviar a GitHub.

El ejemplo puede ser solo un fragmento o una guía. Cambiar la extensión no lo convierte en un programa completo. El ZIP de la actividad contiene material inicial; el botón de archivo editado descarga tu texto.

Mi código o mis notas

// Misión: un planificador que responde
// Guarda como lesson.js en la carpeta extraída y recarga index.html.
/* This is the supplied project, not an interpreter for the lesson editor. */
(() => {
  'use strict';
  const root = document.querySelector('[data-js-studio]');
  if (!root) return;
  const model = globalThis.AcademyMissions;
  const find = key => root.querySelector('[data-js-'+key+']');
  const text = key => root.querySelector('[data-js-text="'+key+'"]').textContent;
  const examples = [
    {id:1, title:text('example_one'), minutes:15, done:false},
    {id:2, title:text('example_two'), minutes:20, done:false}
  ];
  let tasks = [], nextId = 1, version = 0, controller;
  const local = root.hasAttribute('data-js-local') && location.protocol === 'http:' && ['127.0.0.1','localhost','[::1]'].includes(location.hostname);
  find('real').disabled = !local;
  find('real-note').hidden = local;
  const button = (label, action) => {
    const element = document.createElement('button');
    element.type = 'button'; element.textContent = label;
    element.addEventListener('click', action); return element;
  };
  function render(focusId) {
    const list = find('list'); list.replaceChildren();
    const selected = model.select(tasks, find('filter').value);
    for (const task of selected) {
      const item = document.createElement('li'); item.dataset.taskId = String(task.id);
      const label = document.createElement('span'); label.textContent = task.title+' · '+task.minutes+' min';
      const toggle = button(text(task.done ? 'undo' : 'done')+' · '+task.title, () => { tasks = model.toggle(tasks,task.id); render(task.id); });
      toggle.setAttribute('aria-pressed',String(task.done)); toggle.dataset.toggle = String(task.id);
      const remove = button(text('remove')+' · '+task.title, () => { tasks = tasks.filter(value => value.id !== task.id); render(); find('title').focus(); });
      remove.dataset.remove = String(task.id); item.append(label,toggle,remove); list.append(item);
    }
    find('empty').hidden = selected.length !== 0;
    find('count').textContent = String(tasks.length);
    find('total').textContent = String(model.total(tasks));
    find('completed').textContent = String(tasks.filter(task => task.done).length);
    if (focusId) (root.querySelector('[data-toggle="'+focusId+'"]') || find('filter')).focus();
  }
  function add(value, duration) {
    if (tasks.length >= 20) throw Error('limit');
    const task = {id:nextId, title:model.title(value), minutes:model.minutes(duration), done:false};
    nextId++; tasks = [...tasks,task]; render(); find('feedback').textContent = text('added');
  }
  find('form').addEventListener('submit', event => {
    event.preventDefault();
    find('title').removeAttribute('aria-invalid');find('minutes').removeAttribute('aria-invalid');
    try { add(find('title').value,find('minutes').value); find('title').value = ''; find('title').focus(); }
    catch (error) { const key = ['title','minutes','limit'].includes(error.message) ? error.message : 'error'; find('feedback').textContent = text(key); if(key !== 'limit'){const field=find(key === 'minutes' ? 'minutes' : 'title');field.setAttribute('aria-invalid','true');field.focus();} }
  });
  find('filter').addEventListener('change', () => render());
  function state(value) {
    root.dataset.jsState = value; find('load-status').textContent = text(value);
    find('suggestions').setAttribute('aria-busy',String(value === 'loading'));
    find('cancel').disabled = value !== 'loading';
  }
  function cancel() { version++; controller?.abort(); state('idle'); find('suggestions-list').replaceChildren(); }
  async function load() {
    controller?.abort(); controller = new AbortController();
    const signal = controller.signal, current = ++version, mode = find('scenario').value;
    state('loading'); find('suggestions-list').replaceChildren();
    const active = controller;
    const timer = setTimeout(() => controller === active && active.abort(), 4000);
    try {
      if (!['ready','empty','http','json','shape','network','slow','timeout'].includes(mode)) throw Error('shape');
      const request = local && find('real').checked
        ? () => fetch('/api/missions?case='+mode,{signal,credentials:'omit',mode:'same-origin',redirect:'error'})
        : () => model.simulate(mode,examples,signal);
      const values = await model.load(request);
      if (current !== version) return;
      for (const value of values) {
        const li = document.createElement('li');
        li.append(button(text('use')+' · '+value.title, () => { try { add(value.title,value.minutes); } catch(error) {find('feedback').textContent=text(error.message === 'limit' ? 'limit' : 'error');} }));
        find('suggestions-list').append(li);
      }
      state(values.length ? 'ready' : 'empty');
    } catch(error) {
      if (current !== version) return;
      state('error'); find('load-status').textContent = text('error')+' '+text(error.name === 'AbortError' ? 'timeout' : ['http','json','shape'].includes(error.message) ? error.message : 'network');
    } finally { clearTimeout(timer); }
  }
  find('load').addEventListener('click',load);
  find('cancel').addEventListener('click',cancel);
  find('scenario').addEventListener('change',cancel);
  find('real').addEventListener('change',cancel);
  function reset() { cancel(); tasks=[]; nextId=1;find('form').reset();find('title').removeAttribute('aria-invalid');find('minutes').removeAttribute('aria-invalid');find('filter').value='all';render();find('feedback').textContent=''; }
  find('reset').addEventListener('click', () => { reset(); find('feedback').textContent=text('reset'); });
  find('download').addEventListener('click', () => {
    const url=URL.createObjectURL(new Blob([JSON.stringify(tasks,null,2)+'\n'],{type:'application/json'}));
    const link=document.createElement('a');link.href=url;link.download='missions.json';link.click();setTimeout(()=>URL.revokeObjectURL(url),1000);
  });
  let owner;
  window.addEventListener('academy:account', event => {
    if (!event.detail?.loaded) return;
    const nextOwner = event.detail.user?.username || '~guest';
    if (owner !== undefined && owner !== nextOwner) reset();
    owner = nextOwner;
  });
  render(); state('idle');
})();

Formato del archivo

Tu texto se guardará en este navegador al editarlo. En un equipo compartido, borra los borradores al terminar.

El envío directo acepta hasta 8 KiB de texto en un archivo. Usa las descargas y la guía manual para proyectos con varios archivos.

Misión: un planificador que responde

Vamos a descubrir juntos

Del ejemplo a tu propia interacción

Planificador de pequeñas misiones

Laboratorio de sugerencias

Enlaces oficiales y siguiente paso

Ahora te toca

Pensar antes de ejecutar

Tu desafío de transferencia

Inténtalo de nuevo en otro momento

Llévatelo contigo

Mis archivos y GitHub

Tu archivo de esta lección

Guardar en mi GitHub

Rullstpetbot