toolbox/invoice-maker.html at main · 100millionusd/toolbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Free Invoice Generator — Create PDF Invoices</title>
  <meta name="description" content="Create professional invoices instantly. Add line items, tax, discounts. Download as PDF. Free online invoice generator — no signup required.">
  <link rel="canonical" href="https://www.quicktools.mom/invoice-maker.html">
  <meta property="og:title" content="">
  <meta property="og:description" content="">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://www.quicktools.mom/invoice-maker.html">
  <meta name="twitter:card" content="summary">
  <link rel="stylesheet" href="style.css">
  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2658921743607446" crossorigin="anonymous"></script>
<script type="application/ld+json">{"@context":"https://schema.org","@type":"FAQPage","mainEntity":[{"@type":"Question","name":"Is Invoice Maker Pro free to use?","acceptedAnswer":{"@type":"Answer","text":"Yes! Invoice Maker Pro is completely free with no signup required. It runs entirely in your browser — your data never leaves your device."}},{"@type":"Question","name":"How do I use Invoice Maker Pro?","acceptedAnswer":{"@type":"Answer","text":"Enter your data in the input fields above. Results are generated instantly in your browser. You can copy, download, or share the output."}},{"@type":"Question","name":"Is my data safe with Invoice Maker Pro?","acceptedAnswer":{"@type":"Answer","text":"Absolutely. Invoice Maker Pro runs 100% client-side in your browser using JavaScript. No data is uploaded, stored, or shared with any server. Your privacy is guaranteed."}}]}</script>
</head>
<body>
  <div class="page-wrapper">
    <header class="site-header"><a href="index.html" class="site-logo"><span class="icon">⚡</span> QuickTools</a><nav class="site-nav"><a href="index.html">All Tools</a></nav></header>
    <div class="ad-zone ad-zone-top">Ad Space — 728×90</div>
    <div class="tool-header"><div class="tool-badge">💼 Business</div><h1>Invoice Maker Pro</h1><p>Create professional invoices with multiple currencies. Print or save as PDF.</p></div>
    <div class="tool-card">
      <div style="display:grid;grid-template-columns:1fr 1fr;gap:1rem;">
        <div><label>Your Business Name</label><input type="text" id="bizName" value="My Company LLC" oninput="renderInvoice()"><label class="mt-1">Your Address</label><textarea id="bizAddr" rows="2" oninput="renderInvoice()">123 Main Street, Suite 100
New York, NY 10001</textarea></div>
        <div><label>Client Name</label><input type="text" id="clientName" value="Acme Corp" oninput="renderInvoice()"><label class="mt-1">Client Address</label><textarea id="clientAddr" rows="2" oninput="renderInvoice()">456 Oak Avenue
San Francisco, CA 94102</textarea></div>
      </div>
      <div class="controls-row mt-2">
        <div class="control-group"><label>Invoice #</label><input type="text" id="invNum" value="INV-001" oninput="renderInvoice()"></div>
        <div class="control-group"><label>Date</label><input type="date" id="invDate" oninput="renderInvoice()"></div>
        <div class="control-group"><label>Due Date</label><input type="date" id="dueDate" oninput="renderInvoice()"></div>
        <div class="control-group"><label>Currency</label><select id="currency" onchange="renderInvoice()"><option value="$">$ USD</option><option value="€">€ EUR</option><option value="£">£ GBP</option><option value="CHF ">CHF</option><option value="¥">¥ JPY</option><option value="AED ">AED</option></select></div>
      </div>
    </div>
    <div class="tool-card">
      <h3 style="font-size:0.95rem;margin-bottom:0.75rem;">📋 Line Items</h3>
      <div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr 40px;gap:0.3rem;font-size:0.8rem;font-weight:600;margin-bottom:0.3rem;"><span>Description</span><span>Qty</span><span>Rate</span><span>Amount</span><span></span></div>
      <div id="items"></div>
      <button class="btn btn-secondary mt-1" onclick="addItem()" style="font-size:0.8rem;">+ Add Item</button>
      <div class="controls-row mt-2">
        <div class="control-group"><label>Tax (%)</label><input type="number" id="taxRate" value="0" min="0" max="50" step="0.5" oninput="renderInvoice()"></div>
        <div class="control-group"><label>Discount (%)</label><input type="number" id="discRate" value="0" min="0" max="100" step="1" oninput="renderInvoice()"></div>
        <div class="control-group"><label>Notes</label><input type="text" id="notes" value="Thank you for your business!" oninput="renderInvoice()"></div>
      </div>
    </div>
    <div class="tool-card" id="invoicePreview" style="background:#fff;color:#111;padding:2rem;"></div>
    <div style="text-align:center;margin:1rem 0;"><button class="btn btn-primary" onclick="window.print()" style="font-size:1rem;padding:0.75rem 2rem;">🖨️ Print / Save as PDF</button></div>
    <div class="ad-zone">Ad Space — 336×280</div>
    <div class="related-tools"><h2>Related Tools</h2><div class="related-grid"><a href="invoice-generator.html"><span class="tool-icon">🧾</span> Simple Invoice</a><a href="discount-calculator.html"><span class="tool-icon">🏷️</span> Discount Calculator</a><a href="tip-calculator.html"><span class="tool-icon">💵</span> Tip Calculator</a><a href="loan-calculator.html"><span class="tool-icon">🏦</span> Loan Calculator</a></div></div>

        <div class="tool-card" style="max-width:720px;">
      <h2 style="font-size:1rem;margin-bottom:0.75rem;">📖 About Invoice Maker Pro</h2>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;">Invoice Maker Pro is a free, browser-based tool designed for developers, content creators, and marketers. Create professional invoices instantly. Add line items, tax, discounts. Download as PDF. Free online invoice generator — no signup required. Everything runs locally in your browser using JavaScript — no data is ever sent to a server, making it completely private and secure. The tool is designed to be intuitive and beginner-friendly while still offering advanced features for power users. It loads instantly with no installation required and works offline once loaded. Use it as often as you need — there are no daily limits, no watermarks, and no hidden fees.</p>
      <p style="font-size:0.85rem;line-height:1.7;color:var(--text-muted);margin-bottom:0.75rem;"><strong>Who is this for?</strong> Invoice Maker Pro is ideal for professionals, students, freelancers, and hobbyists who want quick, reliable results without installing software or creating accounts. Whether you are on a laptop, tablet, or phone, it works seamlessly in any modern browser.</p>
      <h3 style="font-size:0.9rem;margin-bottom:0.5rem;">How to Use</h3>
      <ol style="font-size:0.85rem;color:var(--text-muted);line-height:1.7;padding-left:1.2rem;">
        <li>Enter or paste your data in the input area above.</li>
        <li>Adjust settings and options to match your needs.</li>
        <li>View the results instantly — they update in real-time.</li>
        <li>Copy, download, or share your output with one click.</li>
      </ol>
    </div>
    <div class="tool-card faq-section">
      <h2 style="font-size:1.1rem;margin-bottom:1rem;">❓ Frequently Asked Questions</h2>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">Is Invoice Maker Pro free to use?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Yes! Invoice Maker Pro is completely free with no signup required. It runs entirely in your browser — your data never leaves your device.</p></details>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">How do I use Invoice Maker Pro?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Enter your data in the input fields above. Results are generated instantly in your browser. You can copy, download, or share the output.</p></details>
      <details style="margin-bottom:0.75rem;border-bottom:1px solid var(--border);padding-bottom:0.75rem;"><summary style="font-weight:600;cursor:pointer;font-size:0.9rem;">Is my data safe with Invoice Maker Pro?</summary><p style="margin-top:0.5rem;font-size:0.85rem;color:var(--text-muted);line-height:1.6;">Absolutely. Invoice Maker Pro runs 100% client-side in your browser using JavaScript. No data is uploaded, stored, or shared with any server. Your privacy is guaranteed.</p></details>
    </div>
    <div class="ad-zone ad-zone-bottom">Ad Space — 728×90</div>
    <footer class="site-footer"><p>&copy; 2026 QuickTools.</p><div class="footer-links"><a href="index.html">All Tools</a><a href="#">Privacy</a></div></footer>
  </div>
  <script>
    document.getElementById('invDate').value=new Date().toISOString().split('T')[0];
    const dd=new Date();dd.setDate(dd.getDate()+30);document.getElementById('dueDate').value=dd.toISOString().split('T')[0];
    let items=[{desc:'Website Design',qty:1,rate:2500},{desc:'Logo Design',qty:1,rate:800},{desc:'Hosting (12 months)',qty:12,rate:29.99}];
    function renderItems(){
      document.getElementById('items').innerHTML=items.map((it,i)=>`<div style="display:grid;grid-template-columns:2fr 1fr 1fr 1fr 40px;gap:0.3rem;margin-bottom:0.3rem;">
        <input type="text" value="${it.desc}" onchange="items[${i}].desc=this.value;renderInvoice()" style="font-size:0.85rem;">
        <input type="number" value="${it.qty}" min="1" onchange="items[${i}].qty=+this.value;renderInvoice()" style="font-size:0.85rem;text-align:center;">
        <input type="number" value="${it.rate}" min="0" step="0.01" onchange="items[${i}].rate=+this.value;renderInvoice()" style="font-size:0.85rem;text-align:right;">
        <div style="padding:0.4rem;font-size:0.85rem;text-align:right;font-weight:600;">${(it.qty*it.rate).toFixed(2)}</div>
        <button onclick="items.splice(${i},1);renderItems();renderInvoice()" style="background:none;border:none;color:var(--danger);cursor:pointer;">×</button>
      </div>`).join('');
    }
    function addItem(){items.push({desc:'New Item',qty:1,rate:0});renderItems();renderInvoice();}
    function renderInvoice(){
      renderItems();const c=document.getElementById('currency').value;
      const sub=items.reduce((s,it)=>s+it.qty*it.rate,0);
      const disc=sub*+document.getElementById('discRate').value/100;
      const afterDisc=sub-disc;const tax=afterDisc*+document.getElementById('taxRate').value/100;
      const total=afterDisc+tax;
      document.getElementById('invoicePreview').innerHTML=`
        <div style="display:flex;justify-content:space-between;margin-bottom:2rem;">
          <div><div style="font-size:1.5rem;font-weight:700;color:#6366f1;">${document.getElementById('bizName').value}</div><div style="font-size:0.85rem;color:#666;white-space:pre-line;">${document.getElementById('bizAddr').value}</div></div>
          <div style="text-align:right;"><div style="font-size:2rem;font-weight:700;color:#111;">INVOICE</div><div style="font-size:0.85rem;color:#666;">${document.getElementById('invNum').value}<br>${document.getElementById('invDate').value}</div></div>
        </div>
        <div style="margin-bottom:1.5rem;"><div style="font-weight:600;color:#333;">Bill To:</div><div style="font-weight:700;">${document.getElementById('clientName').value}</div><div style="font-size:0.85rem;color:#666;white-space:pre-line;">${document.getElementById('clientAddr').value}</div></div>
        <table style="width:100%;border-collapse:collapse;margin-bottom:1.5rem;"><thead><tr style="background:#f4f4f5;"><th style="padding:8px;text-align:left;font-size:0.85rem;">Description</th><th style="padding:8px;text-align:center;font-size:0.85rem;">Qty</th><th style="padding:8px;text-align:right;font-size:0.85rem;">Rate</th><th style="padding:8px;text-align:right;font-size:0.85rem;">Amount</th></tr></thead><tbody>${items.map(it=>`<tr style="border-bottom:1px solid #eee;"><td style="padding:8px;font-size:0.85rem;">${it.desc}</td><td style="padding:8px;text-align:center;font-size:0.85rem;">${it.qty}</td><td style="padding:8px;text-align:right;font-size:0.85rem;">${c}${it.rate.toFixed(2)}</td><td style="padding:8px;text-align:right;font-size:0.85rem;font-weight:600;">${c}${(it.qty*it.rate).toFixed(2)}</td></tr>`).join('')}</tbody></table>
        <div style="display:flex;justify-content:flex-end;"><div style="width:250px;font-size:0.9rem;">
          <div style="display:flex;justify-content:space-between;padding:4px 0;"><span>Subtotal</span><span>${c}${sub.toFixed(2)}</span></div>
          ${disc>0?`<div style="display:flex;justify-content:space-between;padding:4px 0;color:#ef4444;"><span>Discount</span><span>-${c}${disc.toFixed(2)}</span></div>`:''}
          ${tax>0?`<div style="display:flex;justify-content:space-between;padding:4px 0;"><span>Tax</span><span>${c}${tax.toFixed(2)}</span></div>`:''}
          <div style="display:flex;justify-content:space-between;padding:8px 0;border-top:2px solid #111;font-size:1.2rem;font-weight:700;"><span>Total</span><span>${c}${total.toFixed(2)}</span></div>
        </div></div>
        <div style="margin-top:1.5rem;padding-top:1rem;border-top:1px solid #eee;font-size:0.8rem;color:#999;">Due Date: ${document.getElementById('dueDate').value} · ${document.getElementById('notes').value}</div>`;
    }
    renderInvoice();
  </script>
<script src="ads.js"></script>
</body>
</html>