

page 7

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:
and the second square like this:
Don't forget to enclose each ten columns in a row div.
I used a height and width of 5vmin for each square.