1. Site Header (10 points)
a. As a top-level header (h1) put your name, left aligned
b. In the upper-right corner of the page, put a div with a large text size (about h1 size)
i. This div should have a black background and white text
ii. In this div, you should put the step number that you believe to have completed
of the quiz, updating it before you submit
All of the rest of the elements shall be left-aligned.
2. Table strip (10 points)
a. Make a table, it has one row and 10 columns
b. The table has a noticeable boarder on it, defined by CSS
c. The first cell has a noticeably different border, defined by CSS, so that it looks \"selected\"
d. The table cells should be squares (equal width and height)
3. Main Table (10 points)
a. There is a main table on the page
b. This table has 20 rows and 20 columns
c. Each cell is easily accessed by javascript using 0-based indexing from the upper left
corner (which is 0,0). For example, the cell at 13,15 might have the id \"cell1315\".
d. This table has a faint, but visible border (think light grey)
e. Cell backgrounds are white
f. The table cells should be squares (equal width and height)
4. Initial Javascript (10 points)
a. Import JQuery
b. When a cell on the strip is clicked, it becomes \"selected\" and the previous cell becomes
un-selected (using CSS)
c. When a cell in the main table is clicked, its coordinates appear in a javascript alert
During part 2, various interactions will cause the cells to change colors. You will want to be able to
detect which CSS class is applied to a cell and be able to change the CSS class easily.