JavaScript e interação · Lição 14 / 14

Missão: um planejador que responde

Seu projeto agora precisa responder à pessoa, explicar falhas e guardar evidências das suas decisões.

Vamos descobrir juntos

1
O arquivo lesson.js do projeto final contém a implementação da interface; core.js reúne as regras compartilhadas. Leia um caminho completo: submit → validar → atualizar tarefas → render. Explique por que o DOM não é a única fonte dos dados.
2
Faça três mudanças justificadas: por exemplo, uma mensagem de erro mais clara, um contador derivado adicional e um novo teste. Preserve dados como texto, limites, ids e foco. Não remova validações apenas para fazer um teste passar.
3
Teste títulos iguais, entrada inválida, filtros, remoção, teclado, largura estreita, sugestões vazias, HTTP/JSON inválidos, cancelamento e resposta antiga. Complete REVIEW.md com esperado/observado e pendências; os testes fornecidos não certificam toda a acessibilidade.
4
O ZIP é o modelo inicial: baixe seu JavaScript editado e substitua lesson.js. GitHub envia um arquivo por operação com confirmação; envie os arquivos de apoio por Git ou pelo site do GitHub. Isso não ativa Pages. Git: mudanças em equipe já está disponível para continuar com propostas e revisão.

Do exemplo à sua própria interação

Baixe o kit desta atividade, extraia e abra index.html no navegador. Edite lesson.js, salve e recarregue. Você não precisa instalar Node ou pacotes. O README explica HTTP local quando necessário.

A demonstração usa JavaScript preparado. Ela não executa seu código do editor. Baixe sua edição separadamente para testar no kit local.

Meus arquivos e GitHub

Experimentar o projeto que vamos construir

Planejador de pequenas missões

Crie, conclua e revise um plano de estudo com dados fictícios. As missões ficam apenas na memória desta página; ao recarregar, elas somem.

Missões no plano: 0
Minutos de todas as missões: 0
Missões concluídas: 0

Mostrar missões

Nenhuma missão neste filtro. Adicione uma ou escolha outro filtro.

Laboratório de sugestões

Por padrão, os cenários são simulados neste navegador. Nenhuma requisição de sugestões é enviada e seu plano não é substituído.

Condição para observarUsar HTTP real no servidor local do kit

Disponível no kit aberto por http://127.0.0.1:8768. Consulte o README; não precisa de uma conta externa.

Esse JSON contém apenas as missões, não seu código. A demonstração não importa arquivos nem sincroniza aparelhos. O download do JavaScript editado fica no espaço de arquivos da lição.

Links oficiais e próximo passo

✦

SUA MISSÃO

Entregar um projeto autoral com testes de entradas, estado, teclado e carregamento.

Como perceber o que aprendi?

Use os objetivos e o desafio abaixo como uma conversa com você mesmo ou com alguém que possa ajudar. É uma autoavaliação orientada: não envia respostas, não concede XP e não verifica automaticamente sua autonomia.

Em Fundamentos, altere um exemplo, preveja o resultado, confira um caso comum e um caso de erro, e explique suas escolhas. Se precisar de ajuda, identifique o trecho que quer praticar novamente.

Seu desafio de transferência

Entregue a pasta do projeto, três mudanças explicadas e REVIEW.md. Acrescente um teste de regressão que realmente falhe se sua correção for retirada.

Guarde uma evidência: previsão, tentativa, resultado, uma mudança sua e o que ainda não consegue explicar. Quando possível, peça feedback a alguém; se estudar sozinho, retome depois sem copiar e compare suas tentativas.

Tente de novo em outro momento

Depois de uma pausa, explique a ideia sem abrir a solução e tente um exemplo diferente. Compare com sua primeira tentativa: o que consegue fazer sozinho e onde precisa de uma pista? Você pode escrever, falar ou desenhar; escolha uma forma que permita conferir a mesma ideia. Registre ajuda recebida, inclusive de IA, e volte ao trecho necessário. Não há prazo universal nem XP extra por esse registro.

Conclusões e XP registram as avaliações da Rullst Academy. Uma trilha introdutória pode ajudar na vida cotidiana e preparar próximos estudos; sozinha não comprova domínio completo ou preparo profissional. O nível indica profundidade, não idade.

Leve com você

Entregue a pasta do projeto, três mudanças explicadas e REVIEW.md. Acrescente um teste de regressão que realmente falhe se sua correção for retirada.

No seu ritmo

Meus arquivos e GitHub

Toda lição pode virar um registro seu: código, anotações ou um plano de prática. Guardar um arquivo no GitHub é opcional e não altera seu XP.

Manual do aluno

O editor e os downloads abrem quando esta lição estiver liberada para sua conta. Confira o acesso abaixo ou volte ao mapa da trilha.

Conferindo seu acesso à lição…

Seu caminho, passo a passo

Baixar material da atividade

Baixe o exemplo da lição e um caderno para suas anotações. O ZIP inclui um guia para organizar atividades em um ou mais repositórios. Publicar é opcional; contas elegíveis também podem usar o botão de envio ao GitHub.

Seu arquivo desta lição

Edite o exemplo ou registre o que aprendeu. Este espaço não executa código nem corrige respostas. O rascunho é salvo apenas neste navegador, separado por conta; baixar e enviar ao GitHub são ações suas.

O exemplo pode ser apenas um trecho ou roteiro. Mudar a extensão não o transforma em programa completo. O ZIP da atividade contém material inicial; o botão de arquivo editado baixa o seu texto.

Meu código ou minhas anotações

// Missão: um planejador que responde
// Salve como lesson.js na pasta extraída e recarregue 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 do arquivo

Seu texto será guardado neste navegador ao editar. Em computador compartilhado, limpe os rascunhos ao terminar.

O envio direto aceita até 8 KiB de texto em um arquivo. Use o download e o guia manual para projetos com vários arquivos.

Missão: um planejador que responde

Vamos descobrir juntos

Do exemplo à sua própria interação

Planejador de pequenas missões

Laboratório de sugestões

Links oficiais e próximo passo

Agora é a sua vez

Pensar antes de executar

Seu desafio de transferência

Tente de novo em outro momento

Leve com você

Meus arquivos e GitHub

Seu arquivo desta lição

Guardar no meu GitHub

Rullstpetbot