Write JavaScript code to generate table HTML for a grid that is suitable for your project game an Expense Tracker. This expense tracker will help keep track of your monthly expenses. Instead of typing HTML for the grid into a file using an editor, you will write JavaScript code that generates the table HTML by creating a string that has all of the HTML tags in it (or by using the createElement function).

All of the table for the grid should be generated by JavaScript. You can generate HTML strings and then add them to your document using getElementById() and the innerHTMLproperty, or you can use createElement() to make the necessary elements. The rest of this assignment page is focused on using getElementById() and innerHTML.

The basic idea is that you put a div with an id attribute in your document and use getElementById to get a pointer to that div. Once you have a pointer to the div, you can set the innerHTML to a string, and the browser will add that HTML to the div just as it would if the string had been typed into the HTML file.

Your JavaScript code should use nested loops where only one table cell is generated each time the body of the inner loop is executed. It should also use variables (or parameters) for the number of rows and the number of columns in the grid so that the size of the grid can easily be changed. You should be able to change the size of the grid by changing only the values of those two variables (that specify the numbers of rows and the number of columns). Even if your game has a standard grid size, like an 8x8 chess board, you should still write your code so that it can easily be used to generate other grid sizes.

Notes: --Even though all of the table HTML for the grid should be generated from JavaScript, other HTML on your game page (like the page title) can be typed directly into the HTML file. --Be careful with quotes. Sometimes you will need to use JavaScript strings that have HTML quoted strings inside them. In that case, you can use double quotes for the JavaScript string and single quotes in the HTML (or vice versa), like this:

 var pTag = "
"; 

Or, you can escape the HTML quotes with back slashes, like this:

 var pTag = "
"; 

Functions

Encapsulate your grid-generation code in a function, so that the table can be generated by calling a single function. Your function should have parameters to specify the numbers of rows and columns in the grid.

If you are using innerHTML, I recommend that your function returns an HTML string rather than modifying the document directly. That way the same function can be used to create grids in more than one place in the document. For example, in Battleship you could use the same function to make the grid for the player's ships and the grid for the computer's ships.

Make a pattern using CSS class attributes

After your JavaScript code is correctly generating the table HTML for your game's grid, modify it to also generate class attributes to make a checkerboard pattern in the grid. If there is another pattern that works better for your project, you can generate a different pattern. Just make sure that the grid squares don't all look the same and your code generates different class attribute values for different cells based on their coordinates in the grid. If you use createElement() to make your grid, then your JS code should assign different values to the class properties of the table cells to make the pattern. Make sure you use CSS class attribute values to make a pattern (like a checkerboard pattern) even if the grid for your game doesn't usually have a pattern.

Don't use frameworks on the assignments

Frameworks, like jQuery or YUI, are important in web programming, but in the assignments for this class we are focusing on basic JavaScript. Please don't use jQuery or another JavaScript framework for assignments.