1.15 Skill builder: Color grid

Using nested loops

Let's say we have a 4x4 table:

Each table cell is made of <td> tags. And then inside, we add id="cell-Row-Column-ID" labels like this:

id="cell-0-0-ID" id="cell-0-1-ID" id="cell-0-2-ID" id="cell-0-3-ID"
id="cell-1-0-ID" id="cell-1-1-ID" id="cell-1-2-ID" id="cell-1-3-ID"
id="cell-2-0-ID" id="cell-2-1-ID" id="cell-2-2-ID" id="cell-2-3-ID"
id="cell-3-0-ID" id="cell-3-1-ID" id="cell-3-2-ID" id="cell-3-3-ID"

Then we can use nested loops to manipulate the individual cells. A nested loop goes like this:


for (loopOne = 0; loopOne <=3; loopOne++) {
	for (loopTwo = 0; loopTwo <=3; loopTwo++) {
		/* do something repeated in here */
	}
}

This will loop through the following sets of values:

We can create code to do write something in each cell:


for (loopOne = 0; loopOne <=3; loopOne++) {
	for (loopTwo = 0; loopTwo <=3; loopTwo++) {
		var thisCellID	=	// This adds together the parts of the cell ID
				"Cell-"
				+ loopOne.toString() 
				+ "-"
				+ loopTwo.toString() 
				+ "-ID";
		
		// now write something inside each cell
		document.getElementById(thisCellID).innerHTML="hello"; 	
	}
}

Now we have:

hello hello hello hello
hello hello hello hello
hello hello hello hello
hello hello hello hello

We can create code to do write something different in each cell:


for (loopOne = 0; loopOne <=3; loopOne++) {  // this loops through rows
	for (loopTwo = 0; loopTwo <=3; loopTwo++) { // this loops through columns
		var thisCellID	=	// This adds together the parts of the cell ID
				"Cell-"
				+ loopOne.toString() 
				+ "-"
				+ loopTwo.toString() 
				+ "-ID";
		
		var thisCellContent	=	// This creates the text of a times table cell
				loopOne.toString()
				+ "x"
				+ loopTwo.toString()
				+ "="
				+ (loopOne*loopTwo).toString();
		
		// now write the times table info into the inside of the cell
		document.getElementById(thisCellID).innerHTML=thisCellContent; 	
	}
}

Now we have:

0x0=0 0x1=0 0x2=0 0x3=0
1x0=0 1x1=1 1x2=2 1x3=3
2x0=0 2x1=2 2x2=4 2x3=6
3x0=0 3x1=3 3x2=6 3x3=9

A larger example

Label with cell ID names


for (thisRow=0; thisRow <16; thisRow=thisRow+1) { // loops through rows
	for (thisColumn=0; thisColumn <16; thisColumn=thisColumn+1) { // loops through columns
	var thisCellID	="cell-"
		+ thisRow.toString()
		+ "-"
		+ thisColumn.toString()
		+ "-ID";
							
	/* 	print out the cell ID inside the element with that cell id */
	document.getElementById(thisCellID).innerHTML	=thisCellID;
	}
}

Show multiplication table


for (thisRow=0; thisRow <16; thisRow=thisRow+1) { // loops through rows
	for (thisColumn=0; thisColumn <16; thisColumn=thisColumn+1) { // loops through columns
		var thisCellID	=	// this puts together the cell id string
			"cell-"
			+ thisRow.toString()
			+ "-"
			+ thisColumn.toString()
			+ "-ID";
										
		var thisHTML	=	// this puts together multiplication string: "2x2=4"
			thisRow.toString()
			+ 'x'
			+ thisColumn.toString()
			+ '='
			+ (thisRow * thisColumn).toString();
			
		//	this outputs the multiplication string to the cell with that element ID
		document.getElementById(thisCellID).innerHTML	=thisHTML;
	}
}

Show color codes


for (thisRow=0; thisRow <16; thisRow=thisRow+1) { // loops through rows
	for (thisColumn=0; thisColumn <16; thisColumn=thisColumn+1) { // loops through columns
		var thisCellID	=	// this puts together the cell id string
			"cell-"
			+ thisRow.toString()
			+ "-"
			+ thisColumn.toString()
			+ "-ID";
			
		var thisColor	=	// this puts together the color string: "rgb(0, 255, 255)"
			"rgb("
			+ (thisRow*16).toString()
			+ ", "
			+ (thisColumn*16).toString()
			+ ", 127)";
			
		//	this changes the innerHTML of that element ID to the color code
		document.getElementById(thisCellID).innerHTML	=thisColor;
	}
}

Add color!


for (thisRow=0; thisRow <16; thisRow=thisRow+1) { // loops through rows
	for (thisColumn=0; thisColumn <16; thisColumn=thisColumn+1) { // loops through columns
		var thisCellID	=	// this puts together the cell id string
			"cell-"
			+ thisRow.toString()
			+ "-"
			+ thisColumn.toString()
			+ "-ID";
			
		var thisColor	=	// this puts together the color string: "rgb(0, 255, 255)"
			"rgb("
			+ (thisRow*16).toString()
			+ ", "
			+ (thisColumn*16).toString()
			+ ", 127)";
			
		//	this changes the background color of the cell with that element ID
		document.getElementById(thisCellID).style.backgroundColor=thisColor;
	}
}

Empty cell contents


for (thisRow=0; thisRow <16; thisRow=thisRow+1) { // loops through rows
	for (thisColumn=0; thisColumn <16; thisColumn=thisColumn+1) { // loops through columns
		var thisCellID	=	// this puts together the cell id string
			"cell-"
			+ thisRow.toString()
			+ "-"
			+ thisColumn.toString()
			+ "-ID";
		
		//	this simply replaces the innerHTML of this cell with empty space
		document.getElementById(thisCellID).innerHTML	='';
	}
}

Saving your work

Download the template and rename it to your last name, such as "1.12S-ColorGrid-LastName.html".

The assignment

Read through this page carefully and look at the code examples. Then look at the source code of your template. I have already created a table for you with all the ID codes already added to the <td> tags.

Add code so that it does something to modify the grid. I would develop things as follows:

  1. First figure out how to put the word "test" in every cell
  2. Then figure out how to put something different in every cell, like an addition table "1+5=6"
  3. Then figure out how to make the background color of each cell different
  4. Can you get it so the text color inside the cell is different from the background color?