JavaScript and interaction · Lesson 14 / 14

Mission: a planner that responds

Your project now needs to respond, explain failures and preserve evidence of your decisions.

Let's discover together

1
Final-project lesson.js contains the interface implementation; core.js contains shared rules. Read a complete path: submit → validate → update tasks → render. Explain why the DOM is not the sole data source.
2
Make three justified changes: for example, a clearer error, an additional derived counter and a new test. Preserve text handling, limits, ids and focus. Do not remove validation just to make a test pass.
3
Test duplicate titles, invalid input, filters, removal, keyboard, narrow layout, empty suggestions, HTTP/JSON failures, cancellation and stale responses. Complete REVIEW.md with expected/observed and pending work; supplied tests do not certify all accessibility.
4
The ZIP is the starter template: download your edited JavaScript and replace lesson.js. GitHub sends one file per confirmed operation; send supporting files using Git or GitHub’s website. This does not enable Pages. Git: team changes is already available to continue with proposals and review.

From the example to your own interaction

Download this activity kit, extract it and open index.html in a browser. Edit lesson.js, save and reload. You do not need Node or packages. README explains local HTTP when needed.

The demonstration uses supplied JavaScript. It does not execute your editor code. Download your edit separately to test in the local kit.

My files and GitHub

Try the project we will build

Small mission planner

Create, complete and review a study plan using fictional data. Missions stay only in this page’s memory and disappear on reload.

Missions in the plan: 0
Minutes across all missions: 0
Completed missions: 0

Show missions

No missions in this filter. Add one or choose another filter.

Suggestion lab

Scenarios are simulated in this browser by default. No suggestion request is sent and your plan is not replaced.

Condition to observeUse real HTTP on the kit local server

Available in the kit opened at http://127.0.0.1:8768. See README; no external account is needed.

This JSON contains only missions, not your code. The demonstration does not import files or synchronize devices. Download edited JavaScript from the lesson file workspace.

Official links and next step

✦

YOUR MISSION

Deliver your own project with input, state, keyboard and loading tests.

How can I tell what I learned?

Use the objectives and challenge below for reflection or a conversation with someone who can help. This is guided self-assessment: it sends no answers, awards no XP and does not automatically verify independence.

In Foundations, change an example, predict results, check a normal case and an error case, and explain your choices. If you need help, identify what to practice again.

Your transfer challenge

Submit the project folder, three explained changes and REVIEW.md. Add a regression test that fails if your fix is removed.

Keep evidence: prediction, attempt, result, an original change and what you still cannot explain. Seek feedback when possible; if studying alone, return later without copying and compare attempts.

Try again another time

After a break, explain the idea without opening the solution and try a different example. Compare with your first attempt: what can you do independently, and where do you need a hint? You may write, speak or draw; choose a way to check the same idea. Record help received, including AI, and revisit the part you need. There is no universal deadline or extra XP for this record.

Completions and XP record Rullst Academy assessments. An introductory track can help everyday life and prepare further study; alone it does not prove complete mastery or professional readiness. Level indicates depth, not age.

Take it with you

Submit the project folder, three explained changes and REVIEW.md. Add a regression test that fails if your fix is removed.

At your own pace

My files and GitHub

Every lesson can become your own record: code, notes or a practice plan. Saving a file to GitHub is optional and does not change your XP.

Student guide

The editor and downloads open when this lesson is available to your account. Check access below or return to the track map.

Checking your access to this lesson…

Your path, step by step

Download activity materials

Download the lesson example and a workbook for your notes. The ZIP includes a guide to organizing activities in one or more repositories. Publishing is optional; eligible accounts can also use the GitHub upload button.

Your file for this lesson

Edit the example or record what you learned. This space does not run code or grade answers. The draft is saved only in this browser, separately per account; you choose when to download or upload to GitHub.

The example may be only a snippet or outline. Changing the extension does not make it a complete program. The activity ZIP contains starting material; the edited-file button downloads your text.

My code or notes

// Mission: a planner that responds
// Save as lesson.js in the extracted folder and reload 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');
})();

File format

Your text will be saved in this browser when you edit it. On a shared computer, clear your drafts when finished.

Direct upload accepts up to 8 KiB of text in one file. Use downloads and the manual guide for projects with multiple files.

Mission: a planner that responds

Let's discover together

From the example to your own interaction

Small mission planner

Suggestion lab

Official links and next step

Now it's your turn

Think before running

Your transfer challenge

Try again another time

Take it with you

My files and GitHub

Your file for this lesson

Save to my GitHub

Rullstpetbot