Resources

• //INIT: Creating arrays


• //PROCESS: Using arrays
• //PROCESS: for loops


• //OUTPUT: Adding elements directly

Saving your work

Use Save as... to save the empty template as "3.09H-MakeATable-LastName.html" in your Computer Programming 12 directory.

The assignment

Use arrays and for...in loops to create a table. You may choose your own level of difficulty. You do not have to use the top 20 sites data - but if you choose your own data, make sure that your table is not too large

For example

The top 20 websites in Canada!

Click to make a table!
Click to make a fancier table!
Click to make an even fancier table!

Problem Solving

Remember that a table is composed of the following code:

<table>
	<thead>
		<tr>
			<th>Heading 1</th>
			<th>Heading 2</th>
			<th>Heading 3</th>
		</tr>
	</thead>
	<tbody id="outputID">
	
		<tr>
			<td>item 1a</td>
			<td>item 2a</td>
			<td>item 3a</td>
		</tr>
		
		<tr>
			<td>item 1b</td>
			<td>item 2b</td>
			<td>item 3b</td>
		</tr>
		
	</tbody>
</table>

...makes this:

Make it your own!

If you create your own table of information it does not have to be as large. Create your own, smaller, arrays of information you can display!

Hints

1. Create a <div> with id="outputID" in the body of your code
2. Create a button that will trigger mainProcedure()
3. Create an output function that will insert a result into outputID
4. Create a process function to create a table
5. 1. Add the <table> and <thead> and <tbody>first
   2. Use for...in loops to create the rows:
   3. Add the <tr>, <th>s and the information
   4. Add the </tbody> and </table>
6. Create a mainProcedure function that will pass multiple arrays to your process function, and then pass the results to your output function
7. Reread //PROCESS: for loops for more info

Evaluation

• ___/10 INIT: including
  1. add to an array inside the square brackets
  2. add to an array using bracket notation: ( exampleArr [ 7 ] )
  3. add to an array using .length
  4. add to an array using .push()
• ___/10 HTML-CSS: inside the CSS <style> block, include:
  1. create a table with headings <th> inside <thead>
  2. create a table with data cells <td> inside <tbody>
  3. create a different font style or weight for the headings and cells
  4. create a different background for the headings and cells
  5. add a border to at least one part of the table
• ___/10 PROCESS: including
  1. create a function that accepts an array/arrays as arguments/parameters
  2. use string addition or createElement() to create HTML code
  3. use for loops to create table rows
  4. join together information from more than one array at a time
  5. return information from a function
• ___/10 STYLE: including
  1. honour all previous //STYLE sections
  2. use descriptive variable names
  3. break up functions into separate ones for input, processing, and output
  4. use descriptive comments to identify and describe each function, and each loop:
     //loop through each element of the loop to create the rows
  5. add spaces between mathematical and string operators,
     for example: var exampleVar = "hello " + "kitty", not var exampleVar="hello "+"kitty".