Simple Market Billing System in JavaScript Free Source Code

Submitted by oretnom23 on Monday, March 28, 2022 - 16:16.

Language

Introduction

This is a simple Market Billing System mini project source code. It was written using JavaScript, HTML, and CSS. The application is a web-based application that provides an automated platform for managing the customer bills for buying some product items. This application uses only the browser's local storage and data are being managed using JS localStorage. This application has a simple and pleasant user interface with the help of Bootstrap version 5 Framework (CSS Library). This simple project is also containing user-friendly features and functionalities.

About the Market Billing System

I developed this project using the following:

  • HTML
  • CSS
  • JavaScript
  • Bootstrap
  • LocalStorage
  • Font-Awesome
  • jQuery

This Simple Market Billing System is a simple Point of Sale (POS) or Cashiering application that manages the customer transaction with a certain shop or store. This application helps to easily compute the customer payable amount and change. The project also contains a receipt generation feature that automatically generates when the transaction has been checked-out.

Talking about the features of this project, the application contains a simple form where the management or cashier can find the product information and select it to add the product to the cart list of customers. The total amount is being calculated automatically when the system user adds a new product to the list, updating the product quantity, and removing a product from the list. Upon checking out, a modal will be shown which shows a simple checkout form that shows the total amount payable by the customer, field for entering the customer tendered amount and shows the customer change. Change Amount is automatically calculated when users input a digit in the tendered amount field. After submitting the checkout form the system will open a new window that shows the generated printable receipt.

Features

  • Product Form
  • Autocomplete Product Field
  • Display the selected Product Information
  • Customer's Product Item List
  • Update Product Quantity
  • Remove Product from List
  • Automatically Computes Total Amount
  • Checkout Form
  • Automatically Computes the Customer Change
  • Generate a Printable Receipt

Project Snapshots

Main Interface

Simple Market Billing System

Checkout Modal

Simple Market Billing System

Generated Receipt

Simple Market Billing System

How to Run ??

  1. Download the provided source code zip file. (download button is located below)
  2. Extract the downloaded source code zip file in your desired location.
  3. Locate the index.html file in the extracted source code folder.
  4. Browse the Market Billing System by browsing the index.html into your preferred browser. i.e. file:///C:/js_project/mbs_js/index.html

DEMO VIDEO

That's it. You can now explore the features and functionalities of this Market Billing System in JavaScript. I hope this will help you with what you are looking for and you'll find something useful for your future projects. If you encountered an error on running the application, feel free to leave your concern in the comment section below.

Explore more on this website for more Free Source Codes and Tutorials.

Enjoy :)

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.

FOR YOUR OWN SAFETY, PLEASE:

1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.

Tags

Comments

Add new comment

About text formats