This activity will require you to create objects dynamically as well as modify the styles using CSS and JavaScript. TIPS:

</tr>Step 7. Create an interactive program to modify the tableBuild an interactive program with JavaScript

1. You decide that you will automate creating the table header, footer, summary and caption.
2. On thebodyelement, when the page loads, call a function namedinit.
3. In theinitfunction, call the createHeader, createFooter, createCaption and addData functions. No parameters are passed.
4. In a JavaScript, create functions calledinit,createHeader, createFooter,createCaptionandaddData.

Create the createFooter function

1. In the footer function display a footer row, that spans9 columnsand says “All saled are final.”
2. The id for the row is set toprodFooterRow.
3.  Set the footer row class name toproductFoot.

Reminder: You will need to create the table and footer objects, set the properties for the row, create the cell, append the cell to the row, and then set the cell properties.

Create the createCaption function

1. In the function you will need the table and caption objects. You need to set the properties of the caption and append the caption to the table object.
2. The properties should set the text displayed toWe have a broad range of products availableand a line break.
3. The font size is 14 pixels, and aligned to the top.

Create the createHeader function

1. In the createHeader function:

• Create the table object usinggetElementById
• Create the header row object usingcreateElement.

Append the header row to the table usingappendChild.In the function, set the table properties.

• Set the border to10with background colorlightslategray.
• Set the width to960pixels.
• Set the summary to:This product list shows what is available at our rummage sale!
• Set the class name toproductHead.

In the createHeader function, create the table head element.

• Set the table head element properties.
• Set the id and class toproductHead.
• Append the head element to the table.

Create the header row element using the tr tag, and

• Set any required properties.
• Set the id toprodHeaderRow
• Append the row to the head element.

Create 1 array.

• The array calledheadingstores the 9 column heading names for each of the cells in the header row.

Create a loop. Inside the loop:

• Create each header cell.
• Modify the class name of the cell
• Display the text.
• Add the cell to the header row object.  

Step 8. Create an interactive program to insert data into a table

Create an interactive program using JavaScript and insert data into the table element. 

Create the addData function 

1. Create the table and body objects usinggetElementById.

• You already have a body table element in the table, so you don’t need to append it to the table. We need to just add one row to the table body element.

Create an array with 10 elements that has the text for each cell.

• The last element should be set to the product ID value (such as 1000).
• Note that the product ID is not in the actual table. We are just using that array element to store the ID value.

Create the row with the createElement function

1. Set theidof the row.
2. Set theclassnametoprodrow.
3. Append the row to the table body element. Do not add it to the table or the body, but the table body element. (If you are not sure what element that is, look it up!)

Create an array to change the cell contents and properties

1. Create an array.
2. Loop through the array. In the loop:

• Create the cells withcreateElementfunction.
• Set the cell properties to match your table properties and styles.(The properties you choose will vary based on your table.)
• Set theinner HTMLvalue to the value in the array.
• If the cell is for the normal price set the class name toprodprice.
• If the cell is for the thumbnail set the class name toprodpics.
• Make sure in the HTML code, each cell in those columns has their class set to the same values. You can do this by hand or use the find and replace feature in your editor.
• Append the cell to the data row.

Step 9. DocumentationReview and document your programs

1. Document your program. * This means all HTML, CSS and JavaScript programs!
2. Use proper nesting and indentation for all code
3. User proper naming conventions for the IDs and names of elements, names of classes used in all code
4. Include comments in the all code files (name, date, purpose of code, functions, variables)
5. Save this file asHomework5_LastName.docx. Add this to your web site in the homework folder after you have completed both problems
6. Include a screen shot ofboth web pages in the browsershowing that your programs ‘worked’.
7. Include a screen shot of all of our code, showing your indentation and nesting of the elements.