Create a simple Cashier App with Native Javascript in only Two Steps — Step One: CRUD Function
Already learn the javascript fundamentals but didn't know what is the product that you can make with only native javascript? Well, you came to the right place :)
I’ve created a static cashier app with only HTML, CSS, and Javascript. I think this app will be the best practice for you because practicing the native javascript directly without including any framework will sharpen the javascript fundamentals that you’ve learned… so you’ll be more confident to learn the next level of javascript like framework to build more complex and professional web/app.
App Description:
This app uses a Basic HTML and CSS as the Interface and has a CRUD (Create-Read-Update-Delete) feature and a Cashier payment feature, both created with only native javascript.
Learning Method:
You can access the source code directly from my Github: https://github.com/fatihlhz/native-js-cashier-app
You can copy-paste the HTML, CSS, and Javascript files to your own IDE. Analyze it, then try to make the duplicate of the app with your own style. I will break down the function on the script.js file so you can understand it more easily. But I'm not going to break down the HTML and CSS in order to save your time. You can analyze, duplicate, and manipulate it personally.
CRUD Function Breakdown
This app has a CRUD function to Create, Read, Update, and Delete data. We store it in an array and manipulate it using the function.
- The Create form in the HTML has two input text named item and price, it also has a submit button to call the Create function.
- The Read function will be reading all the data in the database and also manipulating the table on the HTML to show the data.
- The Update function will be triggered upon the edit button, it uses the prompt() to pop up a prompt window in the browser to get the new data from the user and then update it to the database.
- The Delete function will be triggered upon the delete button, it uses the .pop() method to delete a data at the specified index in the database
Database:
For the CRUD feature, I use two arrays that act as the database for storing the data. The first one is named itemData to store the item name, and the second one is named priceData to store the item price.
Read Function:
First, make the Read function named showTable() to read the data from the itemData and priceData array and show it in the HTML table. We make this first because we’ll be needed to read and show data in all kinds of actions, whenever when we created, updated, or deleted a data. Next, you’ll see this function will be called in every CRUD function in this case.
Variable tabel used to access the <table> element from HTML that has “table” as its id, then call it use .innerHTML to manipulate the table.
- First, we call tabel.innerHTML to add a table header with attributes No, Item, Price, Count, and Action.
- Then, we call it again in a for-loop scope to show the item data, price data, text input for item count, and action button in every table row.
- Last, call the showTable() outside the scope to make the function called whenever the program is started.
Create Function:
Next, make the Create function named Add() to add new data to the database. This function will get the input from Input Item and Input Price text box and will be triggered on Add Item button.
In this case, the function will get the data from the <input> text (text box) from the HTML with the name item and price, and append it to the itemData and priceData array. Then, call the showTable() to re-read all the updated data. And last, clear the input item and price textbox.
We also scope it in an if-else statement to detect whether the user fills both the input item and the input price. if it’s still blank and the user just submits the data, an alert will pop up to remind the user to fill both of them.
Update Function:
Next, make the Update function to edit the item name or price. This function will be triggered on the Edit Item and edit Edit Price button. It will pop up a prompt to ask the user to input the new data. We make it separately because the prompt window can only get one line of input from the user, that’s why we separate it into two functions (editItem and editPrice) with also two buttons to trigger it.
This function take’s one parameter named id to specify the index of the data that wants to be updated. We declare a variable named editItem/Price that stores the data that was inputed from the prompt function. The first parameter of the prompt() will be the message that is shown on the pop-up, and the second parameter will be the data that want to be edited. We also scope the result in an if-else statement to check whether the user clicks the cancel button when edit the data because the cancel button on the prompt pop-up will return a null value that causes the data will be updated as null. And last, call the showTable() to show the updated data to the table.
Delete Function:
Last, make the Delete function named remove() to delete data at the specific index in the array database. This function will be triggered on the Delete button.
This function take’s one parameter named id to specify the index of the data that wants to be deleted. Then cast the pop() method on itemData and priceData with id as parameter. Last, call the showTable() to show the updated data.
