HTML and CSS Reference
In-Depth Information
◗
4.
Save your changes to the file, and then reload
hanjie.htm
in your Web browser.
◗
5.
Click different data cells within the Web table and verify that when you repeatedly
click a cell, the background color changes from gold to gray to white and back to
gold again (see Figure 13-20).
Figure 13-20
Partially solved puzzle
Applying a Timed Command to a Style
Hanjie puzzles can be extremely difficult; one early mistake can result in dozens of mis-
takes later on. Rebecca wants to give frustrated users the ability to peek at the solution by
clicking the
Peek
button on the Web page, causing the browser to highlight any incor-
rectly darkened cells in red and highlight any cells incorrectly marked as empty in pink.
The drawGrid() function that generates the HTML code for the hanjie puzzle Web
table adds
class
attributes to all of the table data cells, placing those cells in either the
marked
class or the
empty
class. You'll start creating the peek() function now by generat-
ing collections of marked and empty cells using the
querySelectorAll()
method.
