Events and form submission

What you will build

Handle one submit, read form data, validate it, add a record, and rerender.

Understand the idea first

Handle one submit, read form data, validate it, add a record, and rerender.

Build it step by step

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const data = new FormData(form);
  const topic = String(data.get('topic') ?? '').trim();
  const minutes = Number(data.get('minutes'));
  if (!topic || !Number.isFinite(minutes) || minutes <= 0) return;
  sessions.push({ id: Date.now(), topic, minutes, done: false });
  renderSessions(sessions);
  form.reset();
});

1. Open the project from the previous lesson and record its current result.
2. Type and run the example, then complete this task: Submit valid, empty-topic, zero-minute, and nonnumeric cases; only valid data is added.
3. Change at least one input, predict the result, and verify it.
4. Create and repair this lesson's typical failure: Do not register the same listener twice; one submit must add one record.

Read the important lines

• Handle one submit, read form data, validate it, add a record, and rerender.
• Read the code as input, processing, and output; point to each part.
• A first successful run is not enough; verify a different input and an edge case.

Common mistakes and what to check

Practice without copying

Submit valid, empty-topic, zero-minute, and nonnumeric cases; only valid data is added.

Completion check

• I produced the required visible result
• I can explain the input, processing, and output
• I tested normal, edge, and failure cases