App development classes for teens in Germany

// The heart of a homework-planner app: every change to the data goes through one function (our own example)
function reducer(state, action) {
  switch (action.type) {
    case 'add':
      return { ...state, tasks: [...state.tasks, { id: state.nextId, subject: action.subject, due: action.due, done: false }], nextId: state.nextId + 1 };
    case 'done':
      return { ...state, tasks: state.tasks.map(t => t.id === action.id ? { ...t, done: true } : t) };
    case 'remove':
      return { ...state, tasks: state.tasks.filter(t => t.id !== action.id) };
    default:
      return state;
  }
}

// What the screen shows is worked out from the state, never stored separately
function screen(state, today) {
  const open = state.tasks.filter(t => !t.done).sort((a, b) => a.due.localeCompare(b.due));
  const late = open.filter(t => t.due < today).length;
  return { open: open.map(t => t.due + ' ' + t.subject), late };
}

let state = { tasks: [], nextId: 1 };
const actions = [
  { type: 'add', subject: 'Mathe: Aufgabe 4', due: '2026-11-05' },
  { type: 'add', subject: 'Englisch: essay', due: '2026-11-04' },
  { type: 'add', subject: 'Informatik: loop task', due: '2026-11-02' },
  { type: 'done', id: 2 },
  { type: 'remove', id: 99 },
];
for (const a of actions) state = reducer(state, a);
console.log(screen(state, '2026-11-03'));

It prints the open tasks '2026-11-02 Informatik: loop task', '2026-11-05 Mathe: Aufgabe 4' and late: 1.

// Undo keeps every earlier state. A shortcut that edits a task in place breaks it (our own example)
function doneShortcut(state, id) {
  const task = state.tasks.find(t => t.id === id);
  task.done = true;               // changes the old state too
  return { ...state };
}
function doneCopy(state, id) {
  return { ...state, tasks: state.tasks.map(t => t.id === id ? { ...t, done: true } : t) };
}

for (const done of [doneShortcut, doneCopy]) {
  const start = { tasks: [{ id: 1, subject: 'Mathe: Aufgabe 4', done: false }] };
  const history = [start, done(start, 1)];
  const undone = history[0];       // the user presses undo
  console.log(done.name, '-> after undo, task done?', undone.tasks[0].done);
}

It prints doneShortcut -> after undo, task done? true and doneCopy -> after undo, task done? false.