Project: an interactive study checklist

This project combines form structure, DOM selection, events, and arrays into a modest interaction.

What you will learn

Create a labelled form
Prevent default submission when handling it in JavaScript
Add a text-safe list item

Define the user task

The checklist lets a learner type one topic and add it to a visible list. Keep the first version in the current page only; refreshing the browser will clear it. Clear scope makes it possible to focus on event handling without implying that data is permanently saved.

Connect form and script

Give the text input a visible label and place a submit button inside a form. Listen for the form's submit event so keyboard users can submit with Enter as well as clicking. Call preventDefault when the page should not perform its ordinary navigation-based form submission.

Create a safe list item

Create a list item element, set its textContent from the input, and append it to the list. This treats the entered topic as text rather than markup. If the field is empty or only whitespace, show a clear prompt instead of adding a blank task.

Test useful paths

Try a normal topic, an empty value, keyboard submission, and a topic containing angle brackets. The text should stay text rather than turning into a new element. These checks examine both the expected interaction and an input that might otherwise expose unsafe HTML handling.

Be honest about this version's limits

The list exists only in the current document and is not shared with a server or saved across refreshes. A production checklist would need a persistence decision, input limits, an accessible way to announce updates, and a plan for failure. Add those features one at a time only after the simple interaction behaves correctly.

const form = document.querySelector('#topic-form');
const input = document.querySelector('#topic');
const list = document.querySelector('#topic-list');

form.addEventListener('submit', (event) => {
  event.preventDefault();
  const topic = input.value.trim();
  if (!topic) return;
  const item = document.createElement('li');
  item.textContent = topic;
  list.append(item);
  input.value = '';
});

Practice exercise

Extend the checklist with a message for an empty submission and a button that removes a completed item.

Show a hint

Create real buttons and attach a click listener to each item.

Show one possible solution

Check topic before creating the item; for removal, create a button with clear text and call item.remove() from its click handler.

Quick check

Why listen to the form's submit event instead of only a button click? It also supports keyboard form submission A form cannot contain buttons

Frequently asked questions

Will this checklist keep items after a refresh?

<p>No. This version stores items only in the current document. Persistence requires a deliberate storage design, which should be taught separately rather than implied by this example.</p>