Javascript代写|CPSC1520 – JavaScript 1 Assignment 3: Financial Transactions



This assignment builds on what you have already learned and demonstrated in class through the
exercises and assessments to this point (i.e. up to and including DOM APIs). You are responsible for
adding the JavaScript that will bring this page to life.


For this assignment, you are required to implement the necessary JavaScript that will enable a user to
enter a series of transactions (debits and credits). The page will validate form input (e.g. type must be
either debit or credit) and will add the entered transaction to the transactions table. The page will also
track the totals for each type of transaction and allow the user to delete transactions.

The form should only allow transactions that have had a valid type chosen (i.e. not type) and a positive
numeric value in the amount field to be added (use the provided div.error element to provide error
messages). Currency values should be displayed with a dollar sign and to two decimal places.

You will need to make use of the number type’s toFixed() method, which you can read more about

The markup for the individual transactions (both credit and debit) is as shown:


Required Tasks

The following is a list of requirements for this assignment:

• An event listener is required for handling submission of the transaction form

o The page should not refresh
o The user must choose a proper type from the select dropdown and the amount must be
a positive number

 If either of these conditions are not met, display an error message in the
div.error element and do not add the transaction
o Upon meeting the previous conditions:

 DOM APIs must be used to construct the necessary document fragment to add
to the DOM

• See figure 3 above

 With each addition, the totals must be correctly tracked and displayed

 The form should be reset after each successful addition

• An event listener is required for handling clicking on the trash icon

o The user should be presented with a confirm dialog prompt allowing them to either
continue with or abort the deletion

o If the user chooses to continue, remove the transaction from the table and correctly
update and display the appropriate total

• A timer should be set so that if the user is inactive for over 2 minutes (think about how this can
be determined) an alert dialog will be shown informing them of an imminent page refresh

o When the user closes the alert window, refresh the page

 Look into window.location2 for how this may be accomplished

• Only DOM APIs are to be used to interact with the DOM in this assignment

o do not use innerHTML in your solution

• If you are unsure of any of the requirements, be sure to ask your instructor for clarification.