Study Queue

Turn a list of study topics into explicit application state, then render that state into the page.

Pair this exercise with the JavaScript notes.

Start your own copy

1. On GitHub, click Use this template → Create a new repository.
2. Choose whether your repository will be public or private.
3. Clone your new repository, then make changes in your own copy.

Lesson milestone: Session 3 — arrays, objects, map/filter/reduce, and event delegation

Time-box: 60–75 minutes

Dependencies: none

Run it

From this repository's root, start a local server:

python3 -m http.server 8000

Open http://127.0.0.1:8000/.

Build steps

1. Render every object in topics as one list item.
2. Add a topic object from the form.
3. Handle complete and remove buttons through one list click listener.
4. Filter the visible list with All, Open, and Done.
5. Derive summary minutes with reduce instead of storing a second total.

Acceptance checklist

• A valid title and minute estimate adds one topic.
• Empty titles and non-positive minutes are rejected by the form.
• Complete toggles a topic without deleting it.
• Remove deletes only the selected topic.
• All, Open, and Done filters show the correct objects.
• The summary is recalculated from the current array.
• An empty filter has a clear message and no console error.

Stretch

Sort open topics by estimated minutes without mutating the original array. Explain why slice or toSorted is useful.

Try the stretch task only after the acceptance checklist passes.

Get your automatic project grade

1. Create your own copy from this template.

2. Read MASTERY.md, then create an attempt branch:

   git switch -c attempt/my-project

3. Build the project and run the same check GitHub uses:

   node --test test/mastery.test.mjs

4. Commit and push the attempt branch:

   git add .
   git commit -m "Complete project attempt"
   git push -u origin attempt/my-project

GitHub Actions grades every pushed attempt automatically. PASS — NAILED IT means every required check passed. REVISE — KEEP BUILDING means the run shows what to fix before you push again. You do not need the KODE Ń VIBE owner to review or start anything; the template's main branch stays quiet on purpose.

The free grading guide explains the result and its limits.