Create a simple Cashier App with Native Javascript in only Two Steps — Step Two: Cashier Function
Cashier Function Breakdown
This app has an Arithmetic function that acts like the cashier app that counts the total item, total discount, discount value, and final price. The HTML form is labeled Total Price and has 4 disabled text boxes to show the result of the total item, total discount, discount value, and final price. All the functions will be triggered on the Process button.
Total Item Function:
This function will return the total item that is inputted through the item count text box.
This function will iterate through the item count textbox in every row and store the value temporarily at the countTemp variable, then add the value to the count variable. Last, return the count variable that has stored the total item count.
Total Price Function:
This function will return the total price of the items that will be bought.
This function will iterate through the priceData array and the item count textbox, store both of the data in a temporary variable then store the total (by multiplying item count with item price) to the totalPrice variable. Last, return the totalPrice variable that has stored the literal total price.
Discount Total Function:
This function will return the discount percentage that the buyer earned whether the total price reaches a certain amount of value.
This function take’s one parameter named totalPrice that will be checked with an if-else statement whether the totalPrice reaches a certain amount to get a discount privilege. In this case, we set it to :
- If the totalPrice reaches 250.000, you get a 5% discount.
- Else if the totalPrice reaches 200.000, you get a 4% discount.
- Else if the totalPrice reaches 150.000, you get a 3% discount.
- Else if the totalPrice reaches 100.000, you get a 2% discount.
- Else if the totalPrice reaches 50.000, you get a 1% discount.
Discount Value Function:
This function will return the value of the discount (the literal discount price), based on the discount percentage and the total price.
This function takes a two-parameter named totalPrice and discount, then return the discount value by multiplying the totalPrice with the discount percentage.
Final Price Function:
This function will return the final price that will be charged to the buyer.
This function take’s two parameter named totalPrice and discountPrice, then return the final price value by subtract the totalPrice with the discountPrice.
Process Function:
This function will be triggered when the Process button is clicked. It will execute all the function that we’ve made and store it to variable. Then show every data to the result textbox.
This function will execute all the cashier functioan that we’ve made before and save the value to a variable.
- Store the total price value in the totalPrice varable, by calling the totPrice function.
- Store the item count value in the count variable, by calling the itemCount function.
- Store the discount percentage value to the discPercentage variable, by calling the discPercent function with totalPrice as parameter.
- Store the discount value to the discValue variable, by calling the discPrice function with totalPrice and discPercentage as parameter.
- Store the final price value to the finalPrice variable, by calling the finalTotal function with totalPrice and discValue as parameter.
Then, show the result to each result textbox on the Total Price Form at HTML by setting each textbox value with the processed value.
