Make a sample game state using JavaScript objects and arrays

Build a Monthly Expense Tracker using JavaScript and HTML using a simple version of the Model-View-Controller (MVC) design pattern. Write JavaScript code that creates a sample game state by initializing the data in your model. You should use alerts, output to debugging divs, and browser debugging tools like the Chrome developer tools to make sure that your model (sample game state) is properly created. Your program should include monthly expenses like rent, car payment, day care, insurance etc. where a client can calculate their total monthly expenses with a click of a button. They should also be able to add or delete a column or row if that expense is no longer part of their monthly expenses.

Display game objects in your HTML grid

After you have written the code for your model, write code that will display game objects in the HTML grid based on the data in the sample game state. The code that displays game objects should be executed after the code that generates the HTML grid.

In many cases, the code that displays game objects will have nested loops that go through each cell of a 2D array in the model and use the model cell's contents to add the appropriate content to a cell in the HTML table.

If you have two loop counters that are used in nested loops, it's easy to use those counters to index into a 2D JavaScript array in the model. It's possible to use those same counters to access cells in an HTML array.

The first thing you need to do is to use getElementById to get a pointer to the HTML table element: var gridTable = document.getElementById("myTableId");

Next, use the loop counters as the row and column to index into the elements of the HTML table and get a pointer to the table cell (td element) like this: var cell = gridTable.rows[row].cells[col];

The previous line of code assumes that row is the counter for the outer loop and col is the counter for the inner loop.

Once you have a pointer the HTML table cell element, you can use the innerHTML property to set the contents of the cell appropriately.

Your program should:

Create and initializes a model that uses JavaScript arrays and objects

Displays information from the model in the HTML table. The display shows a game in progress with game objects placed in the grid.

Software design describes the model and includes an updated sample game state and descriptions of the functions/methods it provides.

Your program should have a JavaScript file, along with your game description HTML file, grid HTML file, CSS file