HTML and CSS Reference
In-Depth Information
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
Web form.
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.
