GST Invoice with Functionality

rohit325
Feb 04, 2026 23
Live Preview

Live Editor

<div class="invoice">
  <h3>GST TAX INVOICE</h3>

  <div class="row">
    <input value="INV-001" />
    <input type="date" />
  </div>

  <input class="full" placeholder="Seller Name" />
  <input class="full" placeholder="Seller GSTIN" />

  <input class="full" placeholder="Buyer Name" />
  <input class="full" placeholder="Buyer GSTIN" />

  <table>
    <thead>
      <tr>
        <th>Item</th>
        <th>₹</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input value="Service" /></td>
        <td><input id="amount" value="1000" /></td>
      </tr>
    </tbody>
  </table>

  <select id="gstType">
    <option value="intra">CGST + SGST</option>
    <option value="inter">IGST</option>
  </select>

  <div class="summary">
    <p>GST: ₹<span id="gst">0</span></p>
    <h4>Total: ₹<span id="total">0</span></h4>
  </div>

  <button onclick="calcGST()">Update</button>
</div>
body {
  background:#f2f2f2;
  font-family: system-ui, sans-serif;
}

.invoice {
  width: 300px;
  background: #fff;
  padding: 14px;
  border-radius: 12px;
  box-shadow: 0 10px 25px rgba(0,0,0,.1);
}

.invoice h3 {
  text-align: center;
  margin-bottom: 10px;
}

input, select {
  width: 100%;
  padding: 6px;
  margin: 4px 0;
  font-size: 12px;
}

.row {
  display: flex;
  gap: 6px;
}

table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0;
}

th, td {
  border: 1px solid #ddd;
  padding: 4px;
  font-size: 12px;
}

.summary {
  text-align: right;
  margin-top: 8px;
}

button {
  width: 100%;
  padding: 8px;
  background: #111;
  color: #fff;
  border: none;
  border-radius: 6px;
  margin-top: 10px;
}
function calcGST() {
  const amount = Number(document.getElementById("amount").value);
  const type = document.getElementById("gstType").value;

  let gst = 0;

  if(type === "intra") {
    gst = amount * 0.18; // CGST 9 + SGST 9
  } else {
    gst = amount * 0.18; // IGST 18
  }

  document.getElementById("gst").innerText = gst.toFixed(2);
  document.getElementById("total").innerText = (amount + gst).toFixed(2);
}

calcGST();
Categories

GST Invoice with Functionality

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet
