Mission 06 / DOM and interaction

Forms and Data

Validate form values, create one mission object and render it into the interface.

Medium100 XPFormsObjectslocalStorage

Pattern

Input → validate → object → array → render

The submit handler prevents the browser's default refresh, reads each field, checks the values and pushes a new object into the shared practice array. That same array appears in Missions 7 and 8.

const newMission = {
  id: Date.now(),
  title: title,
  difficulty: difficulty,
  xp: xp,
  completed: false
};

practiceMissions.push(newMission);

Interactive task

Input → validate → object → array → render

Create a practice mission