the squares section

My plan is to work on each of the three sections separately, starting with the squares section.


You can see why I restricted the countries to 10 characters - the letters will always fit on a 10 x 10 grid.


So our first job is to create that grid similar to what we did in Project 5 page 3 except that here we will use letters rather than images.

What is tricky here is that there are three different types of square - those with an immovable letter, those with an underline which can be clicked and which must have a letter associated with it and those that are not shown.

For the moment let's assign a square class to each so we can control its layout and an onClick attrubute to every alternate square starting with the first.

So the first square will look like this:

<div class='square' onClick='square_clicked(this);' a=' ' id='0'></div>

and the second square like this:

<div class='square' id='1'></div>

Don't forget to enclose each ten columns in a row div.
I used a height and width of 5vmin for each square.