# 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:

• loopOne = 0; loopTwo = 0;
• loopOne = 0; loopTwo = 1;
• loopOne = 0; loopTwo = 2;
• loopOne = 0; loopTwo = 3;
• loopOne = 1; loopTwo = 0;
• loopOne = 1; loopTwo = 1;
• loopOne = 1; loopTwo = 2;
• loopOne = 1; loopTwo = 3;
• loopOne = 2; loopTwo = 0;
• loopOne = 2; loopTwo = 1;
• loopOne = 2; loopTwo = 2;
• loopOne = 2; loopTwo = 3;
• loopOne = 3; loopTwo = 0;
• loopOne = 3; loopTwo = 1;
• loopOne = 3; loopTwo = 2;
• loopOne = 3; loopTwo = 3;

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;
}
}
``````

``````
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	='';
}
}
``````

Download the template and rename it to your last name, such as "`1.12S-ColorGrid-LastName.html`".
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.