CAMPAIGN EXPLORER — CONSTRUCTION L04 TO L06

Open stage_01/index.html, then stage_02/index.html, then stage_03/index.html.
Each is a complete offline application. Double-click its HTML file in a modern browser.
Keep the folder structure together. No account, server, download or package install is required.
The code makes no fetch calls and uses ordinary deferred scripts, not modules.

Stage 1: choose one campaign; submit; inspect its record.
Stage 2: choose a channel; submit; inspect every matching campaign.
Stage 3: combine channel, name text and minimum enquiries; sort; inspect honest totals.

The book explains how the pieces are selected, connected and executed.
The under-the-surface message follows the path of the most recent submission.
Controls do not apply until submitted. This is intentional and stated on the pages.

PRACTICE
Open exercises/L04/index.html, exercises/L05/index.html or exercises/L06/index.html.
These are complete starting programs with an unfinished feature marked TODO.
Their data and styles are local copies, so editing exercises does not alter the reference stages.
Read each TASK.txt and predict the result before editing.
Answers are separate in solutions/L04.md, L05.md and L06.md.

DATA
Fictional September 2026 records; all spend is EUR.
Search Spring / Search / 300 / 12
Search Local / Search / 180 / 9
Social Launch / Social / 240 / 8
Social Retargeting / Social / 120 / 0
Newsletter / Email / 60 / 6
All-record totals: spend 900; enquiries 35; combined cost per enquiry 25.71.
Enquiries are recorded campaign-attributed enquiries, not sales or qualified enquiries.

FILES
index.html describes page content and controls.
styles.css controls appearance.
data.js supplies the saved example records.
app.js defines functions, starts the first display where applicable, and registers the submit handler.
Ordinary scripts with defer run after document parsing and in the listed order: data, then app.

OPTIONAL MAINTAINER CHECK
With Node.js installed, run: node --test explorer.test.cjs
This checks actual app functions and event-handler wiring using a small simulated DOM.
It does not prove browser layout or screen-reader behaviour.

ACCESSIBILITY CHECK FOR A PERSON
Use Tab to reach every control, arrow keys in selects, and Enter/Space on the real buttons.
Check visible focus, readable labels, scrolling tables on a narrow screen, and status announcements
with your screen reader. These manual checks complement the automated checks.
