CS problem
Swagman888
assignment9_instructions.pdf
CS170 – Computer Applications for Business
Fall 2016 • Assignment 9
Due Date: Before 11:00 p.m. on Friday, November 11th, 2016
Accept Until: Before 11:00 p.m. on Friday, November 18th, 2016
Evaluation: 15 points
Submit to Sakai: assignment9.html file
To get credit for this assignment:
1 Deliver the assignment9.html file to Sakai on time. 2 Your TA should be able to open your file by clicking on its link.
Background:
This assignment is designed to serve as a capstone project for the HTML5, JavaScript and CSS topics. It also helps to practice the use of JavaScript arrays and loops.
Directions:
Follow the requirements listed on the next page. Some previous coding examples will be used as a reference for this
assignment (see the References section). Submit your assignment9.html file to Sakai using the Sakai->
Assignments link.
Requirements:
1. Use a table to create a webpage which will simulate an ATM machine (Tip: for the creation process of such type of table, see the Bean Counter example on Chapter 17 of the textbook)
2. Add your name and section using comment tags in the <head> section of the page.
Page 1 of 8
3. The resulting web page will have the following format:
4. Elements on the web page:
a) Caption: ATM 360
b) Number buttons: as illustrated above (Picture 1).
c) Withdrawal, Deposit, Retype, End buttons: as illustrated above (Picture 1).
d) Main display text box: as illustrated above (Picture 1).
Functionality (Events Sequence):
a) Upon loading the application, the user will see the the initial state of the ATM 360 as illustrated on Picture 1. The initial balance in the customer's account is $1,000.00 at this point.
b) The user may now perform the following main operations:
b.1. Withdrawal: a dollar amount must be entered followed by clicking on the Withdrawal button. The balance in the customer's account will be decreased accordingly.
b.2. Deposit: a dollar amount must be entered followed by clicking on the Deposit button. The balance amount in the customer's account will be increased accordingly.
Page 2 of 8
Illustration 1: ATM initial state
c) The user may also perform the following auxiliary operations:
c.1. Retype: the user may correct a number entered incorrectly by clicking on the Retype button prior to clicking on the Withdrawal or Deposit buttons. The display will show the standard message “Type amount and select operation” so that the customer may enter a new dollar amount.
c.2. End: The user will press the End button to close the session. A Transaction Report will be displayed containing all deposits and withdrawals performed.
Sample Events Sequence:
1) The user enters $100 by clicking: 1 0 0
Page 3 of 8
2) The user clicks on the Withdrawal button. The display shows the new balance
3) The user wishes to deposit $300 but by mistake presses: 3 0 8
4) The user corrects the error by clicking on Retype which will display the default screen.
Programming Strategy:
a) <head> section:
create a <script> section and declare the following global variables, arrays and functions:
Global variables:
- The control variable to be used on the for loops (usually i, j or k) which will also be used as index for the elements of the array. It should be initialized to 0.
Page 4 of 8
5) The user now clicks on the correct amount: 3 0 0
6) After clicking on the Deposit button, the new balance will be displayed.
7) Finally, the customer wishes to make no further transactions and closes the session by clicking on the End button. The Transactions Report will be displayed.
- A variable to keep track of the balance at any given time. Its initial value will be 1000.
- A variable to keep track of the numbers clicked on. It should be initialized as an empty string.
Arrays
- An array of size (length) 10 to hold the IDs of the transactions. They will be simply consecutive integers.
- An array of size (length) 10 to hold the type (Withdrawal or Deposit) of the transactions.
- An array of size (length) 10 to hold the amount of the transactions.
- An array of size (length) 10 to hold the date/time of the transactions
Functions
- A function to concatenate the numbers clicked on.
Parameters: No parameters needed.
Returns: a concatenated string of the numbers clicked on for a transaction.
(Tip: see the statement inside the “She said” loop example on chapter 20 of the textbook which shows how to add text to another piece of text). The numbers clicked on will be used as text. Every click on them will simply concatenate it to the previous number clicked on.
This function should also send the concatenated string to the display of the ATM.
- A function to process the Withdrawals.
Parameter: amount to be withdrawn.
Returns: new balance
It should do the following:
• Decrease the current balance by the withdrawal amount
Page 5 of 8
• On the arrays, record the information related to the transaction: ID
(simply the index of the array), type, amount, date/time (Tip: use the Date() function which returns current date/time.)
• Increase the array index by 1
• Display the new balance
• Reset to an empty string the global variable that holds the concatenate
numbers clicked on by the customer.
- A function to process the Deposits.
Parameter: amount to be deposited.
Returns: new balance
It should do the following: the same as the Withdrawal function with the only difference being in the calculation of the new balance which should be increases by the amount of the deposit.
- A function to end the session.
Parameter: no parameters
Returns: true (there is no real calculation returned so the boolean value true is returned to satisfy the return statement)
It should reset the global variables, show the default message on the display: “Type amount and select operation”. It has to call the function that will process the Transactions Report.
- A function to process the Transactions Report.
Parameter: no parameters
Returns: true (there is no real calculation returned so the boolean value true is returned to satisfy the return statement).
This function has to produce the Transactions Report. Since the number of transactions that a customer will process is not known in advance, this function must use the dynamic web programming technique (Tip: See the Table of Equivalents example in Chapter 19 where an HTML page is
Page 6 of 8
created with JavaScript document.write() statements which creates HTML code).
However, the code for this section will be much more simple.
• The first document.write() should have an <h2> tag inside to
display the name of the report.
• The next document.write() will display the column headings for the
transactions
Then, a for loop with the following in its statement list:
document.write() entries to:
produce a horizontal line <hr> (Tip: simply feed “<hr>” as argument to document.write)
List the ID, transaction type, amount and date/time of each transaction (Tip: the information required will be stored at this point in the 4 arrays declared at the beginning)
b) <body> section:
Do not use the <form> tag. Do not use the form attribute inside the buttons either. It's not needed in this case.
a) Event handler of the Withdrawal button:
Calls the withdrawal function.
b) Event handler of the Deposit button:
Calls the withdrawal function.
c) Event handler of the Retype button:
• Resets – sets it to an empty string - the global variable that holds
the concatenated numbers that the customer clicks on.
• Shows the standard message on the display: “Type amount and
select operation”
d) Event handler of the End button:
Calls the function that processes the end of the session.
Page 7 of 8
References:
1. Chapters 17 through 20 of the Fluency6 textbook
2. Bean Counter example (Chapter 18)
3. Table of Equivalents example (Chapter 19)
4. w3schools.com:
1. Date () function information
Page 8 of 8
