Accounts Receivable Tutorial

Day 4: the heading, file initialization and tables for input of data

In between the header tags type Accounts Receivable Program for. Enclose it with h1 tags. <h1> and </h1>

Now for the sub heading. <h3>Bromley's Mens Wear</h3>

Save and test your application as a web page.

The first thing in the nav section is a button when pressed initializes the localStorage area and sets the variables to zero.

Copy the information for javaScript function initialize.

Paste the information into Notepad++ in between the script tags.

Save your file in your working folder.

The variable naming process is quite easy.

1. We have three customer variables named customer1, customer2, customer3
2. We have three transactions for each customer.
3. Each transaction has three inputs: date, debit or charge and credit or payment.
4. Customer one is A, customer 2 is B, and customer 3 is C
5. Using a combination of customers and transactions, variables can be determined.
6. After initializing the variables, setting them equal to nothing, they are stored in the local storage of html.
7. To see the saved variables, you need to get into the javascript debugger.
8. On Chrome, after you have run the application, press the F12 key, click on >> then application , then local storage, then file.
9. Don't run your application yet, since we do not have the code for the button, that executes the initialization function.

I used a table to organize the tags for a user to input information. I included table headers for each category. Below is the HTML5 code for the input part of the program.

Copy the information for the table for data entry.

Paste the information into Notepad++ in the nav section.

Save your file in your working folder and save your application.

Run your program and press the initialization button. Press F12 key and look to see that all your variables have been set to null or zero.

Day 5: Entering Data and Testing Accuracy

There are three inputs per transaction. The one for the date allows you to click on the icon and see a calendar for the current month, then you can select the date by clicking on it. The numbers can be input by clicking on the up and down arrows to find the amount you need. The maximum amount is 500. After entering the whole number, you can then key in a decimal point and the cents.

Javascript needs to get the information from user input, and save the transaction. Here is the jQuery code that activates after the buttons are pressed to store the records.

Copy the information for the javascript functions.

Paste the information into Notepad++ in the script section of your application.

Save the file in your working folder.

There are three buttons, one for each customer. When the button is clicked, the javaScript code gets the information input by the user and then stores it in local storage in key pairs.

If the variable already exists in local storage, It will not be overwritten if nothing is entered.

Run the application and enter the following information for customer 1. Press the store record button. Press F12 to open the javasctipt debugger to see if the information you entered got saved in local storage.

Run the application and enter the following information for customer 2. Press the store record button. Press F12 to open the javasctipt debugger to see if the information you entered got saved in local storage.

Run the application and enter the following information for customer 3. Press the store record button. Press F12 to open the javasctipt debugger to see if the information you entered got saved in local storage.