1. (50 points) The textarea to the left is named ta1 and is in a form named f1 The data contained in ta1 is the 'Top 500 Remodeling Companies in the USA' (from http://www.qualifiedremodeler.com/top-500/). Each company has 8 elements:
  1. rank followed by a comma;
  2. company name followed by a comma;
  3. description followed by a comma;
  4. city followed by a comma;
  5. state name followed by a comma; [these will match one of the names in the s array -- see below]
  6. Total Gross Sales followed by a comma;
  7. Remodeling Gross Sales followed by a comma;
  8. Number of Remodeling Jobs followed by a "*" (except the last one).
Assume there is a 50 element array in the function p1 (DO NOT write this array) that contains the fifty state names like this:
    s = ['Alabama','Alaska', ... ,'Wisconsin','Wyoming'];
and two 50 element arrays g and n that are initialized to fifty zeros and are used to store the total "Remodeling Gross Sales" for each state and the total "Number of Remodeling Jobs" for each state, respectively:
    g = [0,0,0,0, ... ,0,0,0,0];
    n = [0,0,0,0, ... ,0,0,0,0];
When the "Execute p2" is clicked the javascript function p2 is executed. Write the javascript function p1 that:
  1. Creates a 50 row x 4 column table that contains:
        column 1: State name
        column 2: Total "Remodeling Gross Sales" for the state (item 7 for the company)
        column 3: Total "Number of Remodeling Jobs" for the state (item 8 for the company)
        column 4: Average Remodeling Job Cost (col 2/col 3)
  2. Following the table shows (a) state name that has the (b) minimum average "Remodeling Job Cost". NOTE: if the "Number of Remodeling Jobs" for a state is zero:
        (a) DO NOT consider the state in the minimum average determination, and
        (b) place "NONE" on the fourth column
Show only the javascript for p1. Do NOT put a heading row in the table.
this is the p1_out DIV


this is the DIV with id="p2_out"
2. (50 points) When the user selects a number from the select box shown to the left and clicks the "Execute p2" button the javascript function p2 is executed. The select is named sel2 and is in a form named f2 and contains 16 options: "Select a number from below", 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, and 15. The function p2 then:
  1. Creates a header row that contains: (1) a column pointer and row pointer label; (2) the column numbers; (3) row total pointer
  2. Creates a square table of products (row numbers x column numbers) shown in the white cells in the table to the left. Row numbers start at 1 and column numbers start at 1. The number of rows/columns is defined by the option chosen in the select box (from 1 to 15).
    The table rows contains: (1) row number (begins at 1); (2) table cells that are the product of the row number and column number (i.e., row * col -- these are the white cells); (3) the row total.
  3. Creates a footer row that contains: (1) col total pointer; (2) col totals; (3) grand total of all white cells.
All cells on the first row have a "lightgray" background
All cells at the beginning and end of the rows for the white cells have a "lightgray" background
All cells on the last row have a "lightgray" background
The arrows are created using the following HTML codes:
    a right pointing arrow () is the 6 byte string: →
    a down pointing arrow () is the 6 byte string: ↓
    1. the number of rows/columns from the sel2 select is: document.f2.sel2.selectedIndex
    2. use the array: ct = [] to store the column totals. Remember to initialize each to zero.
Show NO HTML. Show only the javascript for p2.