Question 11 Grid with Patterns

Page with 64 square boxes. Match 3 patterns.

by cassfinn

HTML

<html>
<head>
</head>

<body>

<center>
<button class="newGrid">New Grid</button>
<button class="pat1">Pattern 1</button>
<button class="pat2">Pattern 2</button>
<button class="pat3">Pattern 3</button>
</center>
<p>
</p>
<center>
<div id="container"></div>
</center>

<br><br>

</body>

</html>

CSS

html, body {
    margin: 0;
    height: 100%;
		width: 100%;
}

button {
    background-color: darkgray;
    border: none;
    color: white;
    padding: 8px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;
		margin-left: 8px;
}

#container {
	position: relativer;
	top: 30px;
	bottom: 60px;
	outline:0px solid #fff;
	font-size: 0;
	margin:auto;
	height:300px;
	width:300px;
	padding: 0;
	border: none;
}

.grid, .gridRed, .gridGreen, .gridBlue {
	margin:0;
	padding:0; 
	border:solid;
	border-color: #aaa;
	border-width: 1px;
	display:inline-block;
	width: 24px;
	height: 24px;
}
.gridGreen {
	 background-color: green;
}
.gridBlue {
	background-color: blue;
}
.gridRed {
	 background-color: red;
}

JavaScript

// all white squares
function createGrid() {
		clearGrid();
    for (var rows = 0; rows < 8; rows++) {
        for (var columns = 0; columns < 8; columns++) {
            $("#container").append("<div class='grid'></div>");
        }
        $("#container").append("<br>");
    }
};

// all green squares
function pattern1() {
		clearGrid();
		for (var rows = 0; rows < 8; rows++) {
			for (var columns = 0; columns < 8; columns++) {
				$("#container").append("<div class='gridGreen'></div>");
			}
			$("#container").append("<br>");
		}
}

// red and white squares
function pattern2() {
		clearGrid();
		
		var pat = [
			[1, 0, 0, 0, 0, 0, 0, 1],
			[0, 1, 0, 0, 0, 0, 1, 0],
			[0, 0, 1, 0, 0, 1, 0, 0],
			[0, 0, 0, 1, 1, 0, 0, 0],
			[0, 0, 0, 1, 1, 0, 0, 0],
			[0, 0, 1, 0, 0, 1, 0, 0],
			[0, 1, 0, 0, 0, 0, 1, 0],
			[1, 0, 0, 0, 0, 0, 0, 1]
		];
		
		for (var row = 0; row < pat.length; row++) {
			for (var col = 0; col < pat[row].length; col++) {
				if ( pat[row][col] == 1 ) {
					$("#container").append("<div class='gridRed'></div>");
				} else {
					$("#container").append("<div class='grid'></div>");
				}
			}
			$("#container").append("<br>");
		}
}

// red, green, white and blue squares
function pattern3() {
		clearGrid();
		
		var pat = [
			[1, 1, 1, 1, 1, 1, 1, 1],
			[1, 2, 2, 2, 2, 2, 2, 1],
			[1, 2, 0, 0, 0, 0, 2, 1],
			[1, 2, 0, 3, 3, 0, 2, 1],
			[1, 2, 0, 3, 3, 0, 2, 1],
			[1, 2, 0, 0, 0, 0, 2, 1],
			[1, 2, 2, 2, 2, 2, 2, 1],
			[1, 1, 1, 1, 1, 1, 1, 1]
		];
		
		for (var row = 0; row < pat.length; row++) {
			for (var col = 0; col < pat[row].length; col++) {
				if ( pat[row][col] == 1 ) {
					$("#container").append("<div class='gridRed'></div>");
				} else if ( pat[row][col] == 2 ) {
					$("#container").append("<div class='gridGreen'></div>");			
				} else if ( pat[row][col] == 3 ) {
					$("#container").append("<div class='gridBlue'></div>");			
				} else {
				$("#container").append("<div...