Build a Meeting Note Taker

Why This Project?

Every chapter so far has stored data in the browser. This chapter introduces a new idea: getting data out. The File Download API lets you create a file on the fly from a JavaScript string and trigger a browser download — no server, no file system access, no libraries. Just a Blob, a URL, and an anchor click.

The note taker also introduces keyboard shortcuts via addEventListener('keydown'), structured tagging as a data design pattern, and contenteditable for inline text editing — three patterns that show up in nearly every real productivity tool.

The AI Angle for This Chapter

This chapter has multiple export formats. That's a good AI challenge — generating three different string formats (plain text, Markdown, actions-only) from the same underlying data array. The key skill is telling AI exactly what structure the output should follow, not just "export the notes."

Before writing any export function, write out the exact output format you want by hand. Paste one real example note through the format and show AI what the output should look like. It will get it right on the first pass.

Before You Build — Map the Data

This app's core is a single array of note objects. Design the data structure before touching the UI:

Build It

Build a two-column layout: main pane (flexible) and sidebar (340px).
Main pane contains:
- A meeting meta section: title, date/time, attendees, context inputs
- An entry box: tag buttons toolbar (Note/Action/Decision/Question/Idea),
  a textarea for note text, a footer with keyboard hint and Add button
- An empty notes list div
Sidebar contains: summary count cards (Actions/Decisions/Questions/Ideas),
filter buttons, export buttons, keyboard shortcut reference.
Color palette: #111 background, #e00 red, tag colors coded by type.

Write addNote() that:
1. Reads the textarea value and current selected tag
2. Creates a note object: { id, tag, text, time, ts, done: false }
3. Pushes it to the notes array
4. Clears the textarea and calls renderNotes()

Write renderNotes() that:
1. Filters notes by currentFilter ('all' or a tag name)
2. Reverses the visible array (newest first)
3. Builds HTML for each note: tag pill, editable text, timestamp, delete button
4. Action items also get a toggle-done checkbox button
5. Updates count badges in the sidebar for each tag type

Add a single keydown listener on document:
- (e.metaKey || e.ctrlKey) && e.key === 'Enter' → call addNote()
- e.key === 'Escape' && activeElement is textarea → clear textarea
- e.ctrlKey && e.key === '1' → setTag('note')
- e.ctrlKey && e.key === '2' → setTag('action')
- e.ctrlKey && e.key === '3' → setTag('decision')
- e.ctrlKey && e.key === '4' → setTag('question')
- e.ctrlKey && e.key === '5' → setTag('idea')
Use e.preventDefault() on shortcuts that conflict with browser defaults.

Write exportMd() that:
1. Builds a Markdown string grouping notes by tag
2. Each group has an H2 header and a bullet list
3. Action items use GitHub checkbox syntax: - [ ] or - [x]
4. Each bullet includes timestamp in bold: **[09:02]** Note text
5. Adds meeting metadata (title, date, attendees) at the top

For the download itself:
const blob = new Blob([content], { type: 'text/markdown' });
const url  = URL.createObjectURL(blob);
const a    = document.createElement('a');
a.href = url; a.download = 'meeting-notes.md';
a.click();
URL.revokeObjectURL(url);

Add saveData() that JSON.stringifies { title, date, attendees,
context, notes } into localStorage under key 'it_ch05_notes'.
Call saveData() after every add, delete, toggle, and text edit.

For inline editing:
<div contenteditable="true"
  onblur="updateText(id, this.textContent)"
  onkeydown="if(event.key==='Enter'&&!event.shiftKey){
    event.preventDefault(); this.blur(); }">

The blur fires updateText(id, newText) which finds the note
in the array by id, updates note.text, and calls saveData().

Concepts You Just Used

• new Blob([string], { type }) — create an in-memory file from any string
• URL.createObjectURL(blob) — generate a temporary browser URL pointing to that blob
• URL.revokeObjectURL(url) — release the memory after the download fires
• document.addEventListener('keydown', e => {...}) — intercept all keyboard input globally
• e.metaKey / e.ctrlKey / e.key — identify modifier keys and the specific key pressed
• contenteditable="true" — make any DOM element inline-editable by the user
• onblur — fire when focus leaves an element; the right moment to capture edits
• Structured tagging — storing a tag field on each data object enables filtering, grouping, and format-specific export without extra state

Reflect

Go Further