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:

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[row][column];	// 0 if dot, 1 if empty
				var cellPill[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;