HTML and CSS Reference
The layout and styles used on the page already have been created. You'll program the
script that enters new bids and updates the box displaying the bid history and the high-
est current bid. You need to collect three pieces of information from each bid—the bid
amount, the bidder ID, and the time when the bid was placed. You'll record this informa-
tion in three arrays named bids , bidders , and bidTime , respectively.
Complete the following:
1. Using your text editor, open aucttxt.htm and bidstxt.js from the tutorial.12\case3
folder, enter your name and the date in the head section, and then save the files as
auction.htm and bids.js , respectively.
2. Go to the auction.htm file in your text editor. Take some time to study the content
and layout of the document, paying close attention to the names of the form fields
and table elements. In the head section of the file, insert an embedded script ele-
ment that points to the bids.js file. Save your changes to the document.
3. Go to the bids.js file in your text editor. Declare three new arrays named bids ,
bidders , and bidtime as global variables. The bids array will be used to store a list
of all of the bids made by the auction customers. The bidders array will store each
bidder's name. The bidTime array will store the time that each bid was made. Do not
populate these arrays with any initial values.
4. Insert a function named writebid() . The purpose of this function is to write the bid-
ding history and the highest current bid to the fields on the Web page. There are no
parameters for this function. Add the following commands to the function:
a. Declare a variable named historytext , setting its initial value to an empty text
string. This variable will be used to record the bidding history.
b. Insert a for loop that loops through the contents of the bids array. Each time
through the loop, append the text string
bidTime bids ( bidders ) \n
to the historyText variable, where bidTime , bids , and bidders are the matching
items in the bidTime , bids , and bidders arrays, respectively, based on the value of
the counter variable. Note that \n is an escape character marking a new line and
causes the next entry to the historyText variable to be placed on a new line.
c. After the for loop finishes, display the value of the historyText variable in the
bidList text area box in the bidForm Web form.
d. Display the value of the first item in the bids array in the latestBid field in the
e. Set the values of the bidId and bidAmount fields in the bidForm Web form to
empty text strings.
5. Create a function named addbid() . The purpose of this function is to add a new bid
to the start of the bids , bidders , and bidTime arrays. Add the following commands:
a. Using the unshift() array method, insert the current value of the bidId field at
the start of the bidders array.
b. Use the unshift() array method to insert the current value of the bidAmount
field at the start of the bids array.
c. David also wants the bidding app to display the time that each bid was made. To
record this information, declare a variable named now containing a Date object
for the current date and time.
d. Extract the hours, minutes, and seconds values from the now variable, storing
these values in variables named hours , minutes , and seconds .
e. Use a conditional operator to insert leading zeroes in the text string values of the
minutes and seconds variables if they are less than 10.