Problem Solving: Customizing cells with data

How do you change the colors and inside of a cell to reflect different data?

In the Draw Ms. Pacman's maze problem, there is a point where you have to change the colors of the background of a table's cell in order to show if it is a hallway or a wall. You also want to put a dot or power pill inside the cell, depending on the contents of those arrays.

This may seem like a tricky problem, but let's look what we know:

• You can create a table data cell like this: <td>This text is inside the cell</td>
   
• You can apply the same appearance to multiple HTML objects by giving it a class, like this:
  
  <p><span class="bigtext">This text is big</span>, but this text is not.</p>
  
  Makes: This text is big, but this text is not.
   
• You can define the appearance of classes using CSS in the <style block. For example:
  
  <style>
      .class0 { // Remember that the '.' indicates a CLASS
            background-color: Black;
            color: White;
      }
      .class1 { // remember how hallwayOrWall is 0 or 1?
            background-color: White;
            color: Black;
      }
</style>
   
• You can use classes and table cells together in order to create a table cell with a black background and white text:
  
  <td class="class0">White text on black</td>
  
  Makes: White text on black
   
• The code • makes a bullet symbol: •
   
• The code ⚫ makes a larger circle symbol: ⚫
   
• You can make a power pill inside a white cell like this:
  
  <td class="class1">&#9899;</td>
  
  Makes: ⚫
   
• You can use if statements to make a program do different things depending the state of certain variables.
   
• Your hallway, dot, and pill arrays are stored as follows:
  
  var mazeObject ={
      hallOrWall: hallwayOrWall,
      dot: hasADot,
      pill: hasAPowerPill
      };

Putting the pieces together

So you have figured out how to display a grid of 1s and 0s from you hallwayOrWall array. But you want to move on to changing the insides of the cell according to the data stored inside mazeObject. Consider this:

		
	function createTableHTML (mazeObject) { 	// PROCESS: this creates the rows & columns of the maze using mazeObject
		var outputHTML	="";		// this stores the HTML code we will generate for this table cell
		
		for (row=0; row <= 26; row++) { 		// loop through the rows 
			outputHTML =outputHTML + "<tr>";	// add HTML to start a new table row
			
			for (column=1;, column <= 30, column++) { // use a nested loop to loop through the columns
				var cellHallOrWall	=mazeObject.hallOrWall[row][column];	// 0 if wall, 1 if hall
				var cellDot		=mazeObject.dot[row][column];	// 0 if dot, 1 if empty
				var cellPill		=mazeObject.dot[row][column];	// 0 if pill, 1 if empty
				
				// now send the data to createCellFromData, which will customize the cell
				outputHTML = outputHTML + createCellFromData(cellHallOrWall, cellDot, cellPill);
			}

			outputHTML =outputHTML + "</tr>";	// add HTML to close the table row
		}
		return outputHTML;			// send the completed table information out of this function
	}
	
	function createCellFromData(cellHallOrWall, cellDot, cellPill) {
		var outputHTML	="";
		
		// We want to produce a table cell that looks like this: <td class="class1">&bull;</td>
		//
		// cellHallOrWall will impact the class of the <td>
		// cellDot and cellPill will be used to create the symbol inside of the <td>
		// So how do you use if statements to customize the cell?
		
		// During class, we discussed how we start off by making outputHTML = "<td" 
		// Then you can use an if statement or string concatenation, "+", to create the class="class1">
		// Next you can use if statements to add a • or a ⚫ to outputHTML
		// And lastly you will add the closing of the table cell, </td>		
		
		return outputHTML;
	}