HTML and CSS Reference
In-Depth Information
6.
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.
7.
Right-click the Chapter
14
solution and select the Add ➤ new Folder links. Enter the
name
Images
.
8.
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.
Note
eXerCISe 14-2. DraWING the BOarD
1.
In the empty
div
created by the project template, set the
class
attribute to “board”
like this:
<div
class="board"
>
2.
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";
}
else
{
css = "bblack";
}
<text>
