Vibe Coding for Beginners: From Zero to App/Create something valuable
Lesson 3 / 4 · 45 min · 0 / 2 exercises
Course contents
Project · 2 hands-on exercises

Build a PDF invoice generator

Use your instruction file and a short spec to build an invoice tool with line items, correct totals, and a PDF made in the browser with pdfmake.

Here's where context pays off. The owner takes catering orders and writes invoices by hand. You'll build her a page that takes the client's details and line items, calculates the totals, and downloads a professional PDF. Everything happens in the browser: no invoice data is sent anywhere, so there's nothing to leak. Your instruction file already tells the agent the stack, the style and the rules, so the prompt can focus on the invoice itself.

What an invoice needs

  • Your details: business name, address and contact.
  • The client: name and address.
  • A number and dates: a unique invoice number, the issue date and the due date.
  • Line items: description, quantity, unit price and line total.
  • Totals: subtotal, tax and total due.
  • Payment terms: how and by when to pay.
The agent doesn't know your tax rules
What an invoice must show varies by country and region: tax rates, tax ID numbers, required wording. The agent will guess if you let it. Find out what yours needs and put it in the spec. The 8% rate used here is only an example.

Money math: count in cents

Computers store numbers in binary, and some decimals can't be stored exactly. In JavaScript, 0.1 + 0.2 gives 0.30000000000000004. On an invoice, that's how a total ends up a cent off. The standard fix: do all the math in whole cents ($4.50 is 450), round once per line, and format as dollars only when you display the result.

Quick checkExercise 1 of 2

Why should the invoice code do its money math in whole cents?

Spot the problemsExercise 2 of 2

The agent's first draft of the totals has two bugs. Click the lines that are wrong.

invoice.js0 of 2 found

The PDF library: pdfmake

You'll use pdfmake, a free, open-source library that builds PDFs in the browser. It's actively maintained: version 0.3.14 was published on November 8, 2026. Instead of placing text at coordinates, you describe the document as data (paragraphs, tables, styles), which is easy for you to read and for the agent to get right. The page loads two files, pdfmake.min.js and vfs_fonts.js, and one line makes the download: pdfMake.createPdf(docDefinition).download("invoice.pdf").

The shape of a pdfmake document (simplified)
const docDefinition = {
  content: [
    { text: "Invoice INV-0042", style: "header" },
    { text: "Crumb & Co. · 14 Elm Street" },
    {
      table: {
        widths: ["*", "auto", "auto", "auto"],
        body: [
          ["Item", "Qty", "Price", "Total"],
          ["Cardamom buns", "24", "$4.50", "$108.00"],
        ],
      },
    },
    { text: "Total due: $116.64", bold: true },
  ],
  styles: { header: { fontSize: 18, bold: true } },
}

pdfMake.createPdf(docDefinition).download("INV-0042.pdf")
Prefer jsPDF?
jsPDF (version 4.2.1 as of November 2026) is the other popular choice. It places text by coordinates and adds tables through the jspdf-autotable plugin. Either works; this lesson uses pdfmake because its documents read like a description of the page.

The spec

Notice what the spec leaves out: the stack, the colors and the security rules. They're in your instruction file, and the agent loads them on its own. That's the payoff from the last lesson. The spec spends its words on the invoice: fields, math, the PDF layout, privacy, and a test with a known answer.

Invoice spec
Build an invoice generator page, invoice.html, for the owner's catering orders. Follow AGENTS.md.

Form: client name and address; invoice number (suggest the next one, such as INV-0043); issue date (today) and due date (14 days later); line items with description, quantity and unit price, with buttons to add and remove rows; a tax rate (default 8%) and payment terms (default "Pay by bank transfer within 14 days").

Math: do all money math in whole cents, round each line once, and format as dollars only for display. Update the totals as the owner types.

PDF: use pdfmake 0.3.14 from jsDelivr, pinned to that version, with integrity hashes. Business details at the top, then the client, invoice number and dates, a table of items, then subtotal, tax and total, then the payment terms. Download as the invoice number, such as INV-0043.pdf.

Privacy: nothing leaves the browser. No database, no server, no analytics on this page.

Done means: an invoice for 24 cardamom buns at $4.50 with 8% tax shows a subtotal of $108.00, tax of $8.64 and a total of $116.64, on screen and in the PDF.

Ask me any questions first, then show the plan.
Definition of done0 / 7
Pick your track · finish either one
Steps · 0 / 6 done

  1. Check the instruction file is loaded

    Start a fresh session and ask what the project's rules are. If the answer doesn't match your file, fix that first: the spec relies on it.

    prompt
    What are this project's rules?
    VerifyThe agent recites your stack and security rules.

  2. Send the spec

    Paste the spec and answer the agent's questions. A good agent asks at least one, for example about your tax rules.

    prompt
    Build an invoice generator page, invoice.html, for the owner's catering orders. Follow AGENTS.md.

Form: client name and address; invoice number (suggest the next one, such as INV-0043); issue date (today) and due date (14 days later); line items with description, quantity and unit price, with buttons to add and remove rows; a tax rate (default 8%) and payment terms (default "Pay by bank transfer within 14 days").

Math: do all money math in whole cents, round each line once, and format as dollars only for display. Update the totals as the owner types.

PDF: use pdfmake 0.3.14 from jsDelivr, pinned to that version, with integrity hashes. Business details at the top, then the client, invoice number and dates, a table of items, then subtotal, tax and total, then the payment terms. Download as the invoice number, such as INV-0043.pdf.

Privacy: nothing leaves the browser. No database, no server, no analytics on this page.

Done means: an invoice for 24 cardamom buns at $4.50 with 8% tax shows a subtotal of $108.00, tax of $8.64 and a total of $116.64, on screen and in the PDF.

Ask me any questions first, then show the plan.
    VerifyThe plan uses plain files and pinned pdfmake without you repeating the stack rules.

  3. Build it and test the math

    Approve, then open invoice.html on your local server. Enter the test invoice from the spec. Then try awkward cases: a price of 4.10, a quantity of 0, an empty row, a removed row.

    VerifyThe test invoice shows $108.00, $8.64 and $116.64, and no awkward case produces NaN or stray decimals.

  4. Download the PDF and compare

    Download the PDF and open it next to the page.

    VerifyThe PDF matches the screen and is named after the invoice number.

  5. Check that nothing leaves the browser

    Right-click the page, choose Inspect, and open the Network tab. Fill in an invoice and download it, then look at the list of requests.

    VerifyYou see only the page's own files and the pdfmake files; no request carries invoice data.

  6. Commit and push

    Commit with a clear message and push. Add a link from the footer only if the owner wants the tool public.

    VerifyThe invoice tool works on the live site.
Check your understanding
Q1. The spec says “nothing leaves the browser.” Why is that a good design for this tool?
Q2. Which test best proves the totals are right?
· Tick off the 6 step(s) above.
· Work through the 2 remaining exercises above (stuck? each one can show you the answer).
· Score 100% on the quiz.
Vocabulary in this lesson
SpecA written description of what to build and how you'll know it's right, agreed before the agent starts writing code.AgentA model wired to tools and a loop: it reads, acts, checks the result, and goes again until the task is done or you stop it.Plan modeA read-only agent mode: the agent may search and read, but must propose a plan for your approval before it edits anything.

Plain-English definitions from the AI Coding Dictionary.