HTML and CSS Reference
Complete the following:
1. Use your text editor to open the eventstxt.htm file from the tutorial.11\review folder,
enter your name and the date in the head section, and then save the file as events.
htm in the same folder. Use your text editor to open the datestxt.js file from the
tutorial.11\review folder, enter your name and the date in the comment section, and
then save the file as dates.js in the same folder.
2. Go to the dates.js file in your text editor. The file contains a single function named
showDateTime() that displays the date and time of a Date object in a formatted text
string. Below this function, insert a function named changeYear() that will change
a date's year value if the date already has been passed in the current calendar year.
To create the changeYear() function, do the following:
a. Specify two parameters for the changeYear() function: today and holiday .
The today parameter is used to store a Date object representing the current date.
The holiday parameter is used to store a Date object representing the date of one
event in Hector's list.
b. In the first line of the function, use the getFullYear() method to extract the
four-digit year value from the today parameter and store the value in a variable
named year .
c. In the second line, use the setFullYear() method to set the full year value of the
holiday parameter to the value of the year variable. This changes the date of the
holiday event to the current year.
d. In the third line, create a conditional operator that tests whether the date stored in
the holiday parameter is less than the date stored in the today parameter; this tests
whether the holiday has already passed. If it is, increase the value of the variable
by 1; otherwise, leave the value of the year variable unchanged.
e. In the fourth line of the function, repeat Step c to set the final date of the holiday
parameter using the revised value of the year variable.
3. Below the changeYear() function, create a function named countdown() that
will return a text string displaying the number of days, hours, minutes, and seconds
between a starting date and a stopping date. Create the function as follows:
a. Specify two parameters for the function: start and stop . The start parameter
will contain a Date object for the starting date. The stop parameter will contain a
Date object for the stopping date.
b. In the first line of the function, calculate the time difference between stop and
start , storing the difference in a variable named time .
c. Convert the time difference from the time variable into integer values for the
days, hours, minutes, and seconds, and then return the text string
days days, hours hrs, minutes mins, seconds secs
where days , hours , minutes , and seconds are variables that store the integer
values of the days, hours, minutes, and seconds, respectively. (Hint: Use the com-
mands in the NYClock() function from the tutorial as a guide for converting the
time difference into days, hours, minutes, and seconds.)
4. Close the file, saving your changes.
5. Go to the events.htm file in your text editor. Above the closing </head> tag, insert an
external script element to access the code in the dates.js file. Then, below that ele-
ment, insert a second script element for code to be embedded in the events.htm file.
6. Within the embedded script element, create a function named showCountdown() .
The showCountdown() function has no parameters. Within the function, do the
a. Create a variable named today containing a Date object. Use the current date
and time shown in Figure 11-37. Create six additional Date objects in variables
named Date1 through Date6 . Assign the dates and times from the six events in