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
Search WWH ::

Custom Search