HTML and CSS Reference
Complete the following:
1. Using your text editor, open caltxt.htm and yeartxt.js from the tutorial.12\review
folder, enter your name and the date in the head section of each file, and then save
the files as calendar.htm and yearly.js , respectively.
2. Go to the yearly.js file in your text editor. Insert a function named writeMonthcell()
directly below the comment section. The purpose of this function is to place a
monthly calendar within a table cell. The function has two parameters: calendarDay
and currenttime . The calendarDay parameter will be used to store a Date object
for the first day of the month displayed by the monthly calendar. The currentTime
parameter will be used to store the value of the date that should be highlighted in
the yearly table. Add the following commands to the function:
a. Write the following HTML code to the document:
b. Call the writeMonth() function using calendarDay and currentTime as the param-
eter values. The purpose of the writeMonth() function is to write a monthly calen-
dar table within the table cell you just created.
c. Write a closing </td> tag to the document to close off the yearly_months table cell.
3. Above the writeMonthCell() function, insert the yearly() function. The purpose of this
function is to write the entire yearly calendar containing all of the separate monthly
calendars as cells within the larger table. The function has a single parameter named
datestring that will contain the text string of the date that should be highlighted in
the yearly calendar. Add the following commands to the function:
a. Create the calendarDay variable where if dateString equals null , calendarDay
equals a Date object pointing to the current date and time; otherwise, calendarDay
equals a Date object using the text string specified in the dateString parameter.
b. Create a variable named currenttime equal to the time value of the calendarDay
variable. (Hint: Use the getTime() Date object method to extract the time value
from calendarDay .)
c. Create a variable named thisyear equal to the four-digit year value from the
d. Write the HTML code
<th id='yearly_title' colspan='4'>
to the document, where this year is the value of the thisYear variable. This code
represents the heading of the yearly calendar table.
e. Create a variable named monthnum , setting its initial value equal to -1. The pur-
pose of the monthNum variable is to keep track of the month value of the current
month being written into the yearly calendar table.
f. Create a for loop that writes the HTML code for the three rows of the yearly cal-
endar table using a counter variable named i that goes from 1 to 3 in increments of
1. The first command within the for loop should write the opening <tr> tag to the
document. The last command in the for loop should write the closing </tr> tag.
g. Within the for loop you just created and between the commands that wrote the
opening and closing <tr> tags, insert a nested for loop that writes the individual
cells of the yearly calendar within each table row. The counter variable j of the
nested for loop should go from 1 to 4 in increments of 1. In this nested for