HTML and CSS Reference
In-Depth Information
Highlighting the Current Date
Maria likes the calendar's appearance but mentions that the calendar also should high-
light the current day: July 6, 2015. Recall that Maria has created a special style rule for
the current day, identified using the HTML
id
value
calendar_today
. Thus, to highlight
that table cell, the writeCalDays() function should test each day as it's being written; and
if the date matches the calendar day, the function should write the table cell as
<td class='calendar_dates' id='calendar_today'>
day
</td>
where
day
is the day number. Otherwise, the function should write the table cell without
the
id
attribute as follows:
<td class='calendar_dates'>
day
</td>
To determine the day number of the calendar day, you'll create the
highlightDay
variable,
using the
getDate()
method to extract the day value from the
calendarDay
parameter.
When the counter in the
for
loop matches the value of this variable, the loop will write
the table cell including the
calendar_today
id
attribute.
To highlight the current date in the calendar:
◗
1.
Return to the
calendar.js
file in your text editor, and then scroll down to the
writeCalDays() function.
◗
2.
Directly above the second
for
loop, insert the following statement to calculate
the day value of the current day:
Calculations such as the
getDate()
method that
need to be performed
once always should
be placed
outside
the
program loop to avoid
unnecessarily repeating
the same calculation each
time through the loop.
var highlightDay = calendarDay.getDate();
◗
3.
Replace the statement that writes the table cell in the
for
loop with the following
code as shown in Figure 12-29:
// Test if the day being written matches the calendar day
if (i == highlightDay) {
document.write(“<td class='calendar_dates'
id='calendar_today'>” + i + “</td>”);
} else {
document.write(“<td class='calendar_dates'>” + i + “</td>”);
}
Figure 12-29
Highlighting the calendar date
highlights the table
cell if it matches
the calendar day
