Simple Javascript Billing System (Free Download)

Welcome to a tutorial on how to create a simple Javascript billing system (or bill generator). Yes, I did a quick search, and the top results are pretty much assignments done by students – They are pretty cool, but let this code ninja show you a couple more tricks. Read on!

ⓘ I have included a zip file with all the source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TABLE OF CONTENTS

 

 

QUICK NOTES

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

SCREENSHOT

 

EXAMPLE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

STEP 1) THE HTML

<!-- (A) ADD ITEM -->
<div id="billAdd" class="mi">add_circle_outline</div>
 
<!-- (B) BILL ITEMS -->
<div id="billItems"></div>
<datalist id="itemList"></datalist>
<template id="itemRow">
<div class="row">
  <input type="number" class="qty" min="1" placeholder="Qty">
  <input type="text" class="item" list="itemList" placeholder="Item Name">
  <input type="number" class="price" min="0.00" step="0.01" placeholder="Price EA">
  <input type="button" class="del mi" value="clear">
</div>
</template>
 
<!-- (C) BILL TOTAL -->
<div id="billTotal">
  <div id="billTotalAmt">$0</div>
  <input type="button" id="billPrint" class="mi" value="print" disabled>
</div>

This may seem a little intimidating for some beginners at first, but keep calm and look carefully.

1. <div id="billAdd"> Add a new item.
2. <div id="billItems"> List of items.
   • <template id="itemRow"> HTML template for the item rows.
   • <datalist id="itemList"> To help “autocomplete” item names, will explain a little more below.
3. <div id="billTotal"> The total amount for all the items.

 

 

STEP 2) THE JAVASCRIPT

2A) COMMON ITEMS

var bill = {
  // (A) PROPERTIES
  // (A1) COMMON ITEMS
  items : {
    "Apple" : 1.1, "Beet" : 2.2, "Cherry" : 3.3,
    "Durian" : 2.3, "Eggplant" : 1.2, "Fig" : 2.1
  },
 
  // (A2) HTML ELEMENTS
  hAdd : null, // add item button
  hItems : null, // current items
  hList : null, // datalist
  hRow : null, // item row template
  hTotal : null, // total amount
  hPrint : null, // print button
  // ...
};

• All the mechanics are contained within the var bill object.
• (A1) Remember the <datalist id="itemList"> above? We will populate that with bill.items later, this is in the structure of PRODUCT NAME : PRICE.
• (A2) References to the HTML elements.

 

2B) INITIALIZE

// (B) INITIALIZE BILLING
init : () => {
  // (B1) GET HTML ELEMENTS
  bill.hAdd = document.getElementById("billAdd");
  bill.hItems = document.getElementById("billItems");
  bill.hList = document.getElementById("itemList");
  bill.hRow = document.getElementById("itemRow").content;
  bill.hTotal = document.getElementById("billTotalAmt");
  bill.hPrint = document.getElementById("billPrint");
 
  // (B2) ADD COMMON ITEMS TO DATA LIST
  for (let k of Object.keys(bill.items)) {
    let o = document.createElement("option");
    o.innerHTML = k;
    bill.hList.appendChild(o);
  }
 
  // (B3) "ACTIVATE" ADD ITEM & PRINT BUTTONS
  bill.hAdd.onclick = bill.add;
  bill.hPrint.onclick = bill.print;
},
window.addEventListener("load", bill.init);

On window load, bill.init() will initialize the app.

• (B1) Get the HTML elements.
• (B2) Loop through  bill.items and populate the empty <datalist>.
• (B3) Self-explanatory. “Enable” the add item and print buttons.

 

 

2C) ADD ITEM TO “CART”

// (C) ADD AN ITEM
add : () => {
  // (C1) CLONE ITEM ROW TEMPLATE & APPEND TO TOP
  bill.hItems.insertBefore(bill.hRow.cloneNode(true), bill.hItems.firstChild);
  let row = bill.hItems.querySelector(".row"),
      qty = row.querySelector(".qty"),
      item = row.querySelector(".item"),
      price = row.querySelector(".price"),
      del = row.querySelector(".del");

  // (C2) ATTACH EVENT LISTENERS
  qty.onchange = bill.total;
  item.onchange = () => { if (bill.items[item.value]) {
    price.value = bill.items[item.value];
    bill.total();
  }};
  price.onchange = bill.total;
  del.onclick = () => bill.del(row);
},

When we click on “add new item”:

• (C1) Clone an item row from <template id="itemRow"> and attach it to <div id="billItems">.
• (C2) Set the quantity, item, and price to update the total amount when changed.

 

2D) DELETE AN ITEM ROW

// (D) DELETE ITEM ROW
del : row => {
  row.remove();
  bill.total();
},

Should be easy enough – We simply remove the item row and recalculate the total amount.

 

 

2E) CALCULATE TOTAL

// (E) CALCULATE TOTAL
total : () => {
  // (E1) GET ALL ITEM ROWS
  let all = bill.hItems.querySelectorAll(".row");
 
  // (E2) EMPTY
  if (all.length==0) {
    bill.hTotal.innerHTML = 0;
    bill.hPrint.disabled = true;
  } else {
    let total = 0;
    for (let r of all) {
      let qty = +r.querySelector(".qty").value,
      price = +r.querySelector(".price").value;
      total += qty * price;
    }
    bill.hTotal.innerHTML = `$${total.toFixed(2)}`;
    bill.hPrint.disabled = false;
  }
},

This is a so-called helper function to grab all the quantities and prices – Calculate and update the total amount.

 

2F) PRINT BILL

// (F) PRINT
print : () => {
  // (F1) OPEN NEW "PRINT WINDOW"
  let pwin = window.open("3-bill-print.html");
  pwin.onload = () => {
    // (F2) DUPLICATE ITEMS - REMOVE DELETE ITEM BUTTON
    let clone = bill.hItems.cloneNode(true);
    for (let e of clone.querySelectorAll(".del")) {
      e.remove();
    }
    for (let e of clone.querySelectorAll("input")) {
      e.disabled = true;
    }
    pwin.document.body.appendChild(clone);
 
    // (F3) DUPLICATE TOTALS
    clone = document.getElementById("billTotal").cloneNode(true);
    clone.querySelector("#billPrint").remove();
    pwin.document.body.appendChild(clone);
 
    // (F4) PRINT
    pwin.print();
}

Long story short:

• Open a new window.
• Clone the items list and total.
• Print.

 

 

STEP 3) PRINT PAGE

<h1>MY COMPANY</h1>

As simple as can be – Up to you to design. It’s just HTML and CSS.

 

 

WHAT’S NEXT?

For you guys who want to use this in a “live setup”… It is probably not a good idea. This is pretty much only one component of the many in a professional system:

• How about user login? Let everyone access it?
• Where do you keep the past bills?
• There has to be a database or store somewhere to keep all of this information.
• Also, security matters.

So yep, having some form of server-side script and database is still recommended.

 

LINKS & REFERENCES

• Pure Javascript POS System – Code Boxx
• Javascript Shopping Cart – Code Boxx