# Transcript: make-me-an-invoice-generator One conversation, session 74543512-134a-4c9a-81cb-57b8f33e3b09, model claude-sonnet-5-5, 2.1.293 (Claude Code), run with claude -p on 2026-10-09. Claude could only create, read and edit files in an empty folder (told that files it saves are offered to the user as downloads), the nearest headless equivalent of claude.ai with file creation switched on. No terminal, no web search, no connectors. Each step was sent with --resume so Claude saw everything before it. Replies are verbatim; lines in *[brackets]* mark where Claude saved a file, and the files themselves are published unedited. --- ## Prompt 1: you I'm a self-employed gardener and I need to send invoices to my customers. At the moment I write them in a Word document and I keep getting the sums wrong. I'd like my own invoice maker that I can use in a web browser on my laptop or my phone. I've never made anything like this and I'm not technical. What I'd like: - I type in my business details once, then fill in who the invoice is for, what I did and how much it cost, and it adds up the total for me - a neat invoice I can print or save as a PDF to email to the customer - it should keep my details and remember the invoice number for next time, without me making an account or signing in to anything - it should be free to run Before you make anything, ask me anything you need to know, and tell me in plain English what you're going to make. ### Claude Here's what I plan to make, followed by a few questions. **What I'll make** A single file called `invoice.html`. You double-click it and it opens in your browser (laptop or phone). There's nothing to install, no account and no sign-in, and it costs nothing to run. - **Your details:** You type your business name, address, phone, email and payment details once. The page saves them in your browser, so they're there next time. - **Each invoice:** You fill in who it's for, the date, and a list of jobs. Each job has a description, a quantity (or hours) and a price. The page works out each line and the total as you type, so you don't have to do any sums. - **Invoice number:** It remembers the last number and suggests the next one. You can change it if you need to. - **Print or PDF:** A "Print / Save as PDF" button gives you a neat, one-page invoice. Your browser's print window lets you choose "Save as PDF", and you can then email that file. - **Customer list:** It can also remember past customers, so you pick one instead of retyping the address. **Things to know** - The saved details live in the browser on the device you use. Your laptop and your phone won't share them automatically. I can add a "back up / restore" button so you can move your details between devices or keep a safe copy. - If you clear your browser's saved data, the details go too. The backup button helps with that. - To use it on your phone, you'd need to send the file to the phone or put it online for free. I can explain how to do either. **Questions** 1. **Currency and country:** Is it pounds (£)? Is the date format day/month/year? 2. **VAT:** Are you VAT-registered? If so, I'll add VAT at the rate you choose. If not, I'll leave it out, or I can add a line such as "Not VAT registered". 3. **Line items:** Do you charge by the hour, by the job, or both? For example, "Lawn mowing, 3 hours at £20" and "Compost, 2 bags at £6". 4. **Payment details:** What do you want to show? For example bank name, sort code and account number, "pay by bank transfer", or cheque details. Do you want payment terms such as "Pay within 14 days"? 5. **Invoice numbers:** What format do you like? For example 1001, 1002, or 2026-001. What number should it start from? 6. **Logo:** Do you want to add a logo, or is plain text fine? 7. **Phone use:** Do you want to put it online for free so you can open it from any device, or is keeping the file on each device fine? 8. **Extras:** Do you want a notes box (for example "Thanks for your business!"), discounts, or a "paid" stamp? You can answer briefly. If you'd rather I use sensible defaults, say so. I'd assume pounds, no VAT, hours or quantity times a price, a 14-day payment term, numbers starting at 1001, and no logo. --- ## Prompt 2: you Thanks, that sounds right. My answers: - My business is called Green Fingers Gardening, I'm in the UK, and I'm not VAT registered so there's no VAT. Please make up my address and bank details for now and I'll type in the real ones. - Each invoice has a few lines, each with a description, a quantity (hours or items) and a price, and the total at the bottom. Money is in pounds. - Yes, number the invoices automatically, starting from 1001, and put today's date on them with payment due 14 days later. - Yes to saving my details and my customers' names and addresses in the browser so I don't retype them. I understand it only stays on that device. - A clean, plain look in green and white. Easy to print on A4 and to read on a phone. Please make it now. Keep it as simple as possible: something I can open by double-clicking and later put online, nothing I have to install. ### Claude *[Claude saved the file `invoice.html`]* I've made your invoice maker as one file, `invoice.html`. I haven't opened it in a browser, so please try it once before using it for a real customer. **To use it:** double-click `invoice.html`. It opens in your browser, with nothing to install and no account. For your phone, send the file to yourself and open it there. The same file also works if you upload it later to a free host such as Netlify Drop or GitHub Pages. **What it does** - **Your details:** Open "My business details" at the top and replace my made-up ones with your real address, phone, email and bank details. Then press **Save my details**. I used "Green Fingers Gardening" with a made-up Oxfordshire address, a placeholder bank account (00-00-00 / 12345678) and a fake email. - **Each invoice:** It starts at number 1001 with today's date, and payment is due 14 days later. You type the customer's name and address, then the lines (description, quantity or hours, price). Each line amount and the total at the bottom update as you type. There are three blank lines to start, and you can add or remove lines. - **Print or PDF:** **Print / Save as PDF** gives a clean A4 page in green and white. Choose "Save as PDF" as the printer, then email the file. The buttons and boxes don't appear on the printout. - **Customers:** Printing saves the customer's name and address. Next time, start typing the name and pick it from the list. - **Next invoice:** Press **Finish & start next invoice** after you've printed or saved the PDF. It moves the number on to 1002, and so on, and clears the form. Do this only after you've saved the PDF. If you just close the page without pressing it, the number stays the same. - **Backup:** There's a **Download backup** button and a **Restore backup** button. Use them to keep a safe copy, or to move your details from laptop to phone. **Things to know** - Your details are saved per device and per browser, so your phone and laptop won't share them unless you restore a backup on the other one. - Clearing your browser's "site data" deletes your saved details, so download a backup now and then. - If you open the file by double-clicking, some browsers treat each way of opening it as a separate place. Pick one way to open it and stick with it. If you put it online, always use the same web address. If you'd like any changes, tell me. Examples are a logo, a "PAID" stamp, a different colour or a different layout. --- ## Prompt 3: you I opened it by double-clicking and made a test invoice. Before I send one to a real customer, please check it carefully, as if you were me on a small phone and as if you were trying to find mistakes: every button should do what it says, the sums and the total should be exactly right (including pennies, like 3 hours at £17.50), the invoice number should go up each time and my details should still be there tomorrow. Check that printing to A4 or saving as a PDF gives a clean invoice with no buttons on it. Also look for writing that's too small or too faint, anything that spills off the side of the screen, and anything that would trouble someone who uses a screen reader or only a keyboard. Tell me in plain English what you found, then fix it in the file. ### Claude I can't open a browser in this session. I can only read and edit files, so I checked by reading the code and working examples through by hand. I'll fix what I find, then give you a short checklist to confirm on your own devices. *[Claude saved the file `invoice.html`]* I've fixed everything below in `invoice.html`, but I haven't run it. I can only read and edit files in this session, so I couldn't open it in a browser or print anything. I checked by reading the code and working examples through by hand. Please run the short checklist at the end on your own laptop and phone before sending a real invoice. ## What I found, and what I changed **Mistakes that could have reached a customer** - **Long descriptions were cut off.** The description box was a single line, so a long job description would have been chopped off on the printout. It now grows to fit and prints in full. - **Prices printed as typed.** A price typed as `17.5` would have printed as "17.5". It now prints as £17.50, and the date prints as "9 October 2026". - **A missing price was silent.** If you typed a quantity but forgot the price, that line counted as £0 and the total came out too low. The line now says "Add a price" (or "Add a quantity"), and Print refuses to continue until you fix it. - **Blank printing.** Print now asks first if there's no customer name or the total is £0.00. Unused blank lines no longer print. - **Forgetting to press "Finish" reused a number.** Printing now uses up the invoice number, so the next invoice is always the next number along. The second button is now "Clear & start a new invoice". - **Changing "Next invoice number" or "Payment due after" in your details didn't affect the invoice on screen.** It now does. Your details also save as you type, so you no longer lose them by forgetting to press Save. - **Losing an invoice half-written.** Phones sometimes reload a page when you switch to another app. What you've typed is now kept and restored. **Sums** - The page now works in whole pence, so rounding slips can't build up. By hand, 3 hours × £17.50 gives £52.50, and a third line of 2 × £6.00 gives a total of £64.50. Totals over £1,000 show a comma, for example £1,250.00. A minus price, such as a discount, shows as -£5.00 rather than £-5.00. **Small phone** - **Lines were too narrow.** On a 360px-wide phone the description box would have been about 60px wide, because the quantity, price, amount and delete columns took the rest. On a phone each line is now a small card: description across the top, then quantity, price and amount underneath. - **Long email addresses could run off the side.** Long text now wraps. - **Text and buttons were too small.** Labels and small text are larger and darker, and the placeholder text is darker. Buttons and boxes are at least 44px tall, so they're easier to tap. **Screen reader and keyboard** - **Labels weren't linked to their boxes.** A screen reader would have just said "edit text". Every label is now linked to its box, and each line's boxes say which line they're on, for example "Price in pounds, line 2". - **Keyboard use was awkward.** There's now a clear orange outline showing where you are. "Add a line" moves you into the new description. Removing a line returns you to "Add a line". The total is announced as it changes. **Smaller extras** - A customer called "constructor" would have broken autofill. That's fixed. - A new "Remove this customer from my saved list" button appears when you've picked a saved customer. - Restoring a backup now asks before replacing what you have. ## Please check these yourself (about 5 minutes) 1. Make an invoice with 3 hours at £17.50 and 2 items at £6.00. You should see £52.50, £12.00 and a total of £64.50. 2. Press Print / Save as PDF. The preview should be one A4 page with no buttons or boxes. The green header bar and the green table heading should show, and the description should be fully visible. If the green is missing, tick "Background graphics" in the print window. 3. Close the page and open it again. Your details and the invoice number should still be there. If they aren't, you may be in a private or incognito window, or your browser may block saving for local files. In that case, putting the file online fixes it. 4. On your phone, rotate the screen and zoom in. Nothing should run off the side. Tell me if anything looks wrong and I'll fix it. --- ## Prompt 4: you Thank you, it's working well. Some of my customers are businesses who ask for a purchase order number on the invoice, so please add an optional "Customer reference" box that only shows on the invoice if I fill it in. I'd also like a "Paid" button on a saved invoice that stamps PAID on it, for when I send a receipt. I've already made some invoices and saved customers, so they mustn't disappear when I put the new version online. Then tell me which files you changed, so I know what to put online again. ### Claude *[Claude edited the file `invoice.html`]* *[Claude edited the file `invoice.html`]* *[Claude edited the file `invoice.html`]* *[Claude edited the file `invoice.html`]* *[Claude edited the file `invoice.html`]* *[Claude edited the file `invoice.html`]* *[Claude edited the file `invoice.html`]* *[Claude edited the file `invoice.html`]* *[Claude edited the file `invoice.html`]* *[Claude edited the file `invoice.html`]* *[Claude edited the file `invoice.html`]* *[Claude edited the file `invoice.html`]* *[Claude edited the file `invoice.html`]* *[Claude edited the file `invoice.html`]* *[Claude edited the file `invoice.html`]* I've added both features to `invoice.html`. I haven't run it in a browser, so please try the checks below. This is the only file I changed, so it's the only one to put online again. ## What's new - **Customer reference:** A new box, "Customer reference / PO number (optional)", sits under the customer's address. If you fill it in, the invoice shows "Your reference: …". If you leave it empty, nothing appears on the invoice. - **Mark as paid:** The new "Mark as paid" button puts a green PAID stamp on the invoice, with the date. You can change the date in a "Paid on" box. The invoice then changes to suit a receipt: - The total reads "Amount paid". - The "How to pay" section is replaced by "Paid in full on … Thank you!". - The saved PDF is named "Receipt …" instead of "Invoice …". - Press the button again to take the stamp off. ## "Past invoices" is also new Your old version never kept invoices. It only remembered your details, your customers and the invoice number, so there was nothing saved to put a Paid button on. I added a **Past invoices** list near the top. Every invoice you print or save as a PDF from now on goes into it. To make a receipt, press **Open** next to the invoice, press **Mark as paid**, then print or save as PDF. There's also a Delete button for removing test invoices. Invoices you made before this update aren't in the list, because the old version never stored them. Your PDFs are untouched. If you need a receipt for one of those, make a new invoice with the same number and mark it as paid. ## Keeping your existing details I kept the same storage name, so the new file will find your details, customers and next invoice number. The new version only adds a place for past invoices and doesn't touch what's already saved. **Putting it online is the risk.** Browsers keep saved data per web address. A file opened by double-clicking and the same file on a website count as different places, so the online copy will start empty. It may also start empty if you open a copy of the file stored somewhere else on your laptop. To avoid losing anything: 1. **Before you change anything**, open your current version the way you always do. Open "My business details" and press **Download backup**. Keep that file safe. 2. Put the new `invoice.html` online. 3. Open the online version, open "My business details", press **Restore backup** and choose the file from step 1. It asks before replacing anything. 4. Check your customers appear when you start typing a name. After that, use the online address every time, and don't mix it with the double-clicked file. Your phone has its own separate store, so do step 3 there as well. ## Quick checks 1. Fill in a reference. Print preview should show "Your reference: …". Clear it, and the line should disappear. 2. Print an invoice, then open "Past invoices". It should be listed as "Not paid". 3. Press **Open**, then **Mark as paid**, then print. The PAID stamp should show, the "How to pay" section should be gone, and the list should now say PAID. 4. Reload the page and check your details are still there. --- ## Prompt 5: you Now I'd like to put it online so I can use it on my phone. I've made free GitHub and Cloudflare accounts. On GitHub I made a new repository called green-fingers-invoices (I switched on "Add README"), and in Cloudflare I went to Workers & Pages, Create application, Pages, Connect to Git, and picked that repository, so it should go live by itself whenever the files on GitHub change. I don't want to use the terminal or install anything. Please tell me, step by step, how to get the invoice maker into my repository using the GitHub website, what I should see at each step, how I find the address where it's live, how I get the invoices and customers I've already saved onto my phone, and how I put a change live later. Also tell me whether anyone else can see my customers' details. ### Claude *[Claude edited the file `invoice.html`]* I made one small change to `invoice.html` first. It now tells search engines not to list the page. Use this latest copy for the steps below. I can't see your GitHub or Cloudflare screens, and both sites change their wording now and then. If something doesn't match what I describe, tell me what you see. ## Before you upload anything: back up your saved details Do this first, because your saved details only exist in the browser you've been using. 1. Open your current invoice maker **the way you always do**, by double-clicking the file. 2. Open "My business details" and press **Download backup**. A file called `invoice-backup-….json` goes into your Downloads folder. 3. Don't upload this file to GitHub. It contains your customers' names and addresses. ## Part 1: Put the file into GitHub 1. Go to github.com and open your **green-fingers-invoices** repository. You should see a file list with just **README.md**. 2. Click **Add file**, then **Upload files**. You should see a box saying "Drag files here to add them to your repository". 3. Drag `invoice.html` into the box, or click "choose your files" and pick it. It should appear in a list under the box, with a green tick. 4. Scroll down. Leave "Commit directly to the main branch" ticked and click the green **Commit changes** button. 5. You're back at the file list, and it now shows `invoice.html` as well as `README.md`. ## Part 2: Find your live address 1. Go to dash.cloudflare.com and click **Workers & Pages**. Click your project, **green-fingers-invoices**. 2. Look at the **Deployments** tab. A new deployment appears within a minute of your upload. Wait for it to say **Success**. 3. Your address is shown near the top, ending in `.pages.dev`. It will look like `https://green-fingers-invoices.pages.dev`. 4. Add `/invoice` to the end, so it's like `https://green-fingers-invoices.pages.dev/invoice`. Opening the bare address will probably say "page not found", because the file isn't called `index.html`. That's expected. 5. Open that full address on your laptop. You should see the invoice maker with the sample details. If the first deployment fails, open the project's **Settings** and look at **Builds**. Set Framework preset to **None**, leave the build command empty, and leave the output directory empty (or `/`). Then retry. On your phone, open the same address and bookmark it. You can also use "Add to Home Screen" for an icon. On an iPhone, if you do that, restore your backup inside the home screen version, because it keeps its own separate storage. ## Part 3: Get your customers and invoices onto the website and your phone Browsers store data per web address, so the online version starts empty, even on your laptop. 1. Get the backup file onto your phone, for example by emailing it to yourself. 2. On the phone, open the live address, open "My business details" and press **Restore backup**. Choose the file, and confirm when it asks. 3. Check your customers appear when you start typing a name. 4. Repeat steps 2 and 3 on your laptop, using the live address. 5. From now on, use the live address on both devices and stop using the double-clicked file. Your phone and laptop don't sync with each other. Invoices you make on one won't appear on the other. To move things across, download a backup on one device and restore it on the other. Restoring **replaces** what's there, so don't restore an old backup over newer work. The easiest habit is to do your invoices on one device and use the other only for looking. On an iPhone, Safari can erase a website's saved data if you haven't visited it for a long time. Download a backup now and then and keep it somewhere private. ## Part 4: Putting a change live later 1. In your repository, click **Add file**, then **Upload files**. 2. Drag in the new `invoice.html`. It must have exactly the same name, which replaces the old one. 3. Click **Commit changes**. 4. Wait a minute or two. Cloudflare shows a new deployment with **Success**. Then refresh the page on your phone. 5. Your saved details aren't affected, because they live in your browser and not in the file. ## Can anyone else see your customers' details? - **Your customers' details aren't on GitHub or Cloudflare.** They stay in your browser. The file you upload holds only the tool and the made-up sample details. Your real address and bank details live in your browser too, until you type them in. - **Anyone who knows the web address can open the tool.** They'd see an empty copy with the sample details, never yours. I've asked search engines not to list it, but the address isn't password-protected. Don't share it widely. - **The backup file contains everything.** Keep it private, and never upload it to GitHub. - **Invoices you email are visible to whoever you send them to**, as usual. - **Anyone using your phone or laptop** with the browser unlocked could see the saved customers. Use your usual screen lock.