Invoice Maker

An invoice generator built with vanilla HTML, CSS, and JavaScript. Add line items, edit any field inline, and totals, balance due, and the amount due recalculate automatically. Everything runs in the browser, with no backend, no dependencies, and no data leaving the page.

Live demo: https://mfahadiqbalofcl.github.io/Invoice-Maker/

Features

• Editable invoice: sender, recipient, dates, and notes are all contenteditable
• Add or remove line items on the fly (+ / - controls)
• Automatic calculation of line totals, subtotal, amount paid, and balance due
• Adjust numeric values with arrow keys or the scroll wheel
• Custom currency prefix (defaults to $) applied across the invoice
• Drag-and-drop or click-to-upload your own logo
• Print / export to PDF straight from the browser (Ctrl/Cmd + P)
• 100% client-side: works offline, nothing is sent to a server

Tech stack

• HTML5 (semantic, contenteditable fields)
• CSS3 (minified stylesheet)
• Vanilla JavaScript (no frameworks or libraries)

Getting started

No build step or install is required.

1. Clone the repository:

   git clone https://github.com/mfahadiqbalofcl/Invoice-Maker.git

2. Open index.html in any modern browser.

Or simply visit the live demo.

Tip: to serve it locally over HTTP (useful for some browser features), run python3 -m http.server from the project folder and open http://localhost:8000.

Usage

1. Click any field to edit it: your details, the recipient, invoice number, and date.
2. Use + to add line items and - to remove them. Rates and quantities multiply automatically.
3. Click the logo box to upload (or drag and drop) your own logo.
4. Enter the amount paid to see the balance due update.
5. Print or save as PDF with your browser's print dialog (Ctrl/Cmd + P).

Screenshot

License

Released under the MIT License.

---

Built by M Fahad Iqbal, Web Designer and Developer.