Jot

CodeWorks Unit 03 checkpoint — a note-taking app built with JavaScript MVC and localStorage persistence.

Run locally

Option A — npm script (recommended):

npm install
npm start

Option B — one-off (note the space before .):

npx http-server . -p 8080

Option C — CodeWorks CLI (requires global install: npm i -g bcw):

bcw-serve

Then open http://127.0.0.1:8080 (or the URL printed in the terminal).

Inkwell edition (alternate UI, same features):

npm run start:inkwell

Open http://127.0.0.1:8081 — uses separate localStorage (inkwell_jots).

Common mistake: http-server. with a dot after the package name causes a 404. The . is the folder to serve and must be separate: http-server .

Architecture

Layer	Responsibility	Files
Model	Jot shape and defaults	app/models/Jot.js
State	Observable app data	app/AppState.js
Service	CRUD + persistence	app/services/JotsService.js
Controller	Events + DOM rendering	app/controllers/JotsController.js
View	Markup + styles	index.html, assets/css/style.css
Shared	Config, validation, helpers	app/constants/, app/utils/

Checkpoint checklist

• Notes can be created
• Title limited to 3–15 characters (HTML + service validation)
• Color picker with 6 options (single source in jotConfig.js)
• List with numerical count
• One note in focus at a time
• Body editable and saved
• Notes can be deleted
• createdAt on create
• updatedAt on save
• Delete confirmation (window.confirm)
• UI aligned with design mock
• localStorage persistence (jot_jots key)