The Palos Publishing Company

Follow Us On The X Platform @PalosPublishing
Categories We Write About

Build a calculator for freelance invoicing

Written by

Bernardo Palos

in

Here’s a simple and efficient freelance invoicing calculator written in HTML, CSS, and JavaScript. This tool allows freelancers to input hours worked, rate per hour, tax, discounts, and automatically calculates the total invoice amount.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Freelance Invoice Calculator</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      background: #f4f4f4;
      margin: 0;
      padding: 20px;
    }

    .invoice-calculator {
      background: #fff;
      padding: 20px;
      border-radius: 12px;
      max-width: 500px;
      margin: auto;
      box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    }

    .invoice-calculator h2 {
      text-align: center;
      margin-bottom: 20px;
    }

    .form-group {
      margin-bottom: 15px;
    }

    label {
      display: block;
      font-weight: bold;
      margin-bottom: 5px;
    }

    input {
      width: 100%;
      padding: 10px;
      border-radius: 6px;
      border: 1px solid #ccc;
      box-sizing: border-box;
    }

    .total {
      margin-top: 20px;
      font-size: 1.2em;
      font-weight: bold;
      text-align: center;
    }

    button {
      width: 100%;
      padding: 12px;
      background-color: #28a745;
      color: #fff;
      border: none;
      border-radius: 6px;
      cursor: pointer;
      font-size: 16px;
    }

    button:hover {
      background-color: #218838;
    }
  </style>
</head>
<body>

  <div class="invoice-calculator">
    <h2>Freelance Invoice Calculator</h2>
    <div class="form-group">
      <label for="hours">Hours Worked</label>
      <input type="number" id="hours" placeholder="Enter total hours">
    </div>
    <div class="form-group">
      <label for="rate">Rate per Hour ($)</label>
      <input type="number" id="rate" placeholder="Enter hourly rate">
    </div>
    <div class="form-group">
      <label for="tax">Tax (%)</label>
      <input type="number" id="tax" placeholder="e.g., 10 for 10%">
    </div>
    <div class="form-group">
      <label for="discount">Discount ($)</label>
      <input type="number" id="discount" placeholder="Optional discount amount">
    </div>
    <button onclick="calculateInvoice()">Calculate Total</button>
    <div class="total" id="totalOutput">Total: $0.00</div>
  </div>

  <script>
    function calculateInvoice() {
      const hours = parseFloat(document.getElementById('hours').value) || 0;
      const rate = parseFloat(document.getElementById('rate').value) || 0;
      const tax = parseFloat(document.getElementById('tax').value) || 0;
      const discount = parseFloat(document.getElementById('discount').value) || 0;

      const subtotal = hours * rate;
      const taxAmount = (subtotal * tax) / 100;
      const total = subtotal + taxAmount - discount;

      document.getElementById('totalOutput').textContent = `Total: $${total.toFixed(2)}`;
    }
  </script>

</body>
</html>

Features:

  • User inputs for hours, rate, tax, and discount.

  • Auto-calculates subtotal, tax amount, and final invoice total.

  • Fully responsive and easy to integrate into a freelancer’s website or personal dashboard.

Let me know if you’d like features like downloadable PDFs, itemized services, or client info added.

Share this Page your favorite way: Click any app below to share.
See all the ways to share this page

Enter your email below to join The Palos Publishing Company Email List

We respect your email privacy

Check Out Our Newest Posts we wrote about

Categories We Write About