HTML and CSS Reference
In-Depth Information
Right-click the new Home folder and select the Add ➤ View links. In the Add View
dialog box, enter the name Index , make sure the Razor view engine is selected,
unselect all the check boxes, and click the Add button.
Right-click the Chapter 14 solution and select the Add ➤ new Folder links. Enter the
name Images .
The source code download for this chapter includes an Images folder with five
images. Copy all five images to the Images folder in the Solution Explorer.
Drawing the Checkers Board
To draw the board you'll use a separate div element for each square. You'll need eight rows with eight div
elements each. Fortunately, this is pretty easy to do using a couple of nested for loops and the Razor syntax.
In Chapter 10 you drew a chess board using a canvas element. However, that won't work for this
application because you need separate DoM elements for each square. You might be tempted to use SVg to
create the board since each rect element is a separate DoM element, however, the SVg elements do not support
the DnD API.
eXerCISe 14-2. DraWING the BOarD
In the empty div created by the project template, set the class attribute to “board”
like this:
<div class="board" >
Add the code shown in Listing 14-1 inside this div .
Listing 14-1. Creating the squares on the board
@for (int y = 0; y < 8; y++)
for (int x = 0; x < 8; x++)
string id = x.ToString() + y.ToString();
string css;
if ((x+y) % 2 == 0)
css = "bwhite";
css = "bblack";
Search WWH ::

Custom Search