From efe9901d1271ff2f831b463de7e96037b2c63068 Mon Sep 17 00:00:00 2001
From: Thom Page <thompage@Thoms-MBP.home>
Date: Wed, 25 May 2016 19:37:29 -0400
Subject: [PATCH] more memories

---
 .../w02d04/homework/memory_solution/js/app.js | 73 +++++++-------
 .../w02d04/homework/memory_starter/js/app.js  | 94 ++++++++++++-------
 2 files changed, 101 insertions(+), 66 deletions(-)

diff --git a/unit_01/w02d04/homework/memory_solution/js/app.js b/unit_01/w02d04/homework/memory_solution/js/app.js
index 3163c78..9303ea1 100644
--- a/unit_01/w02d04/homework/memory_solution/js/app.js
+++ b/unit_01/w02d04/homework/memory_solution/js/app.js
@@ -2,24 +2,23 @@ window.onload = function() {
 	console.log('loaded');	
 
 	// Invoke your chain of functions and listeners within window.onload
-	// var button = document.getElementsByTagName('button');
-	// button.onclick(function(){
-	// 	start();
-	// })
-start();
+	
+	var startButton = document.querySelector('button');
+	startButton.onclick = function() {
+		start();
+	}
 }
 
+var tiles = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E'];
 
 // USE THIS TO SHUFFLE YOUR ARRAYS
-//o=array
-var tiles = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E'];
+//o = array
 function shuffle(o) {
 	for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
 		return o;
 };
 
 function start(){
-
 	shuffle(tiles);
 	makeAndDisplayTiles();
 }
@@ -27,44 +26,52 @@ function start(){
 function makeAndDisplayTiles(){
 	document.getElementById('game').innerHTML = "";
 	document.getElementById('info').innerHTML = "";
-	for(var i = 0; i<tiles.length;i++){
+	for(var i = 0; i < tiles.length; i++){
 		var tile = document.createElement('div');
-		tile.setAttribute('class', 'column');
-		tile.setAttribute('data-value',tiles[i]);
+		tile.className = "column";
+		tile.setAttribute('data-value', tiles[i]);
 		document.getElementById('game').appendChild(tile);
 		tile.onclick = function(){
  			makePlay(this);
 		};
 	}
-	// addEventsToTiles();
 }
 
-// function addEventsToTiles(){
-// 	var tile = document.getElementsByClassName('column');
-// 	tile.onclick = makePlay(this);
-// }
-
 function makePlay(tile){
 	tile.innerHTML = tile.dataset.value;
-	tile.className += " found";
-}
+	tile.className += " clicked";
 
+	var selected = document.getElementsByClassName('clicked');
 
+	if (selected.length === 2) {
+		checkForMatch();
+	}	
+}
 
-function processData(n) {
-	var result="";
-	for(var i = 1; i<=n; i++){
-		var spaces = i;
-		while(spaces <= n-1){
-			result+=" ";
-			spaces++;
+function checkForMatch() {
+	setTimeout(function() {
+		var selected = document.getElementsByClassName('clicked');		
+		if (selected[0].innerText === selected[1].innerText) {
+			console.log('match');
+			selected[0].className = "column found";
+			selected[0].className = "column found";
+		} else {
+			console.log('no match');
+			selected[0].innerText = "";
+			selected[1].innerText = "";
+			selected[0].className = "column";
+			selected[0].className = "column";
 		}
-		var stairs = i;
-		while(stairs > 0){
-			result+='#';
-			stairs--;
+		checkForWin();
+	}, 1500);
+}
+
+function checkForWin() {
+	var foundItems = document.getElementsByClassName('found');
+
+	if (foundItems.length === 10) {
+		for (var i=0; i < foundItems.length; i++) {
+			foundItems[i].className = "column won";
 		}
-        result+='\n'
 	}
-	console.log(result);
-} 
\ No newline at end of file
+}
diff --git a/unit_01/w02d04/homework/memory_starter/js/app.js b/unit_01/w02d04/homework/memory_starter/js/app.js
index 3163c78..b872450 100644
--- a/unit_01/w02d04/homework/memory_starter/js/app.js
+++ b/unit_01/w02d04/homework/memory_starter/js/app.js
@@ -2,24 +2,23 @@ window.onload = function() {
 	console.log('loaded');	
 
 	// Invoke your chain of functions and listeners within window.onload
-	// var button = document.getElementsByTagName('button');
-	// button.onclick(function(){
-	// 	start();
-	// })
-start();
+	
+	var startButton = document.querySelector('button');
+	startButton.onclick = function() {
+		start();
+	}
 }
 
+var tiles = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E'];
 
 // USE THIS TO SHUFFLE YOUR ARRAYS
-//o=array
-var tiles = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E'];
+//o = array
 function shuffle(o) {
 	for(var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
 		return o;
 };
 
 function start(){
-
 	shuffle(tiles);
 	makeAndDisplayTiles();
 }
@@ -27,44 +26,73 @@ function start(){
 function makeAndDisplayTiles(){
 	document.getElementById('game').innerHTML = "";
 	document.getElementById('info').innerHTML = "";
-	for(var i = 0; i<tiles.length;i++){
+	for(var i = 0; i < tiles.length; i++){
 		var tile = document.createElement('div');
-		tile.setAttribute('class', 'column');
-		tile.setAttribute('data-value',tiles[i]);
+		tile.className = "column";
+		tile.setAttribute('data-value', tiles[i]);
 		document.getElementById('game').appendChild(tile);
 		tile.onclick = function(){
  			makePlay(this);
 		};
 	}
-	// addEventsToTiles();
 }
 
-// function addEventsToTiles(){
-// 	var tile = document.getElementsByClassName('column');
-// 	tile.onclick = makePlay(this);
-// }
-
 function makePlay(tile){
 	tile.innerHTML = tile.dataset.value;
-	tile.className += " found";
-}
+	tile.className += " clicked";
 
+	var selected = document.getElementsByClassName('clicked');
 
+	if (selected.length === 2) {
+		checkForMatch();
+	}	
+}
 
-function processData(n) {
-	var result="";
-	for(var i = 1; i<=n; i++){
-		var spaces = i;
-		while(spaces <= n-1){
-			result+=" ";
-			spaces++;
+function checkForMatch() {
+	setTimeout(function() {
+		var selected = document.getElementsByClassName('clicked');		
+		if (selected[0].innerText === selected[1].innerText) {
+			console.log('match');
+			selected[0].className = "column found";
+			selected[0].className = "column found";
+		} else {
+			console.log('no match');
+			selected[0].innerText = "";
+			selected[1].innerText = "";
+			selected[0].className = "column";
+			selected[0].className = "column";
 		}
-		var stairs = i;
-		while(stairs > 0){
-			result+='#';
-			stairs--;
+		checkForWin();
+	}, 1500);
+}
+
+function checkForWin() {
+	var foundItems = document.getElementsByClassName('found');
+
+	if (foundItems.length === 10) {
+		for (var i=0; i < foundItems.length; i++) {
+			foundItems[i].className = "column won";
 		}
-        result+='\n'
 	}
-	console.log(result);
-} 
\ No newline at end of file
+}
+
+
+// don't need data value
+// 'found' is only added after a match
+// checkForMatch goes inside a setTimeout
+// start should begin with a listener
+
+// remove a class name by using 'className' and writing the names
+// of the classes you want to keep, and adding classes if you want
+// EXAMPLE: If an element with the class of 'column' also has a class of 
+// 'clicked' and you want to remove 'clicked',
+// 
+
+// do not need to turn off the event listener
+// apply 'won' class
+
+
+
+
+
+