memories

unit_01/w02d04/homework/memory_starter/js/app.js

@@ -1,17 +1,17 @@
 window.onload = function() {
 	console.log('loaded');	
 
-	// Invoke your chain of functions and listeners within window.onload
+	// When the start button is clicked, the start() function is invoked
-	
 	var startButton = document.querySelector('button');
 	startButton.onclick = function() {
 		start();
 	}
 }
 
-var tiles = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E'];
+// Make your array of letters for your tiles
+
 
-// USE THIS TO SHUFFLE YOUR ARRAYS
+// Use this function later to shuffle your array of tiles
 //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);
@@ -19,80 +19,68 @@ function shuffle(o) {
 };
 
 function start(){
-	shuffle(tiles);
+	// shuffle your tiles
-	makeAndDisplayTiles();
+
+	// invoke the makeAndDisplayTiles function
 }
 
 function makeAndDisplayTiles(){
-	document.getElementById('game').innerHTML = "";
+	// this function should clear the game (when the player presses the 'start' button,
-	document.getElementById('info').innerHTML = "";
+	// this function is invoked, clearing the game board)
-	for(var i = 0; i < tiles.length; i++){
+
-		var tile = document.createElement('div');
+	// write a loop that iterates over the tiles array and creates each tile (a div)
-		tile.className = "column";
+	// -each tile should have a class of 'column'
-		tile.setAttribute('data-value', tiles[i]);
+	// -each tile should have a 'data-value' corresponding to its letter
-		document.getElementById('game').appendChild(tile);
+	// -append each tile to the game
-		tile.onclick = function(){
+	// -give each tile an event listener that invokes the makePlay(tile) function when
- 			makePlay(this);
+	//  the tile is clicked
-		};
-	}
 }
 
 function makePlay(tile){
-	tile.innerHTML = tile.dataset.value;
+	// display the letter inside the tile
-	tile.className += " clicked";
+	// give the tile a class of 'clicked'
-
-	var selected = document.getElementsByClassName('clicked');
 
-	if (selected.length === 2) {
+	// if there are two tiles with the class 'clicked', run the checkForMatch function
-		checkForMatch();
-	}	
 }
 
 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";
-		}
-		checkForWin();
-	}, 1500);
-}
 
-function checkForWin() {
+	// write all your code for this function inside setTimeout below:
-	var foundItems = document.getElementsByClassName('found');
 
-	if (foundItems.length === 10) {
+	setTimeout(function() {
-		for (var i=0; i < foundItems.length; i++) {
-			foundItems[i].className = "column won";
-		}
-	}
-}
 
+		// write your code here
 
-// don't need data value
+		// if two tiles match: 
-// 'found' is only added after a match
+		// -add a class of 'found' to each
-// checkForMatch goes inside a setTimeout
+		// -remove the class of 'clicked' from each
-// start should begin with a listener
+		// -remember, if you remove the 'column' class, the tile will disappear
+		// (and you don't want that)
+		// -run the checkForWin function
 
-// remove a class name by using 'className' and writing the names
+		// if your two tiles DON'T match
-// of the classes you want to keep, and adding classes if you want
+		// - remove the innerText so the letter goes away
-// EXAMPLE: If an element with the class of 'column' also has a class of 
+		// - remove the class of 'clicked' (but keep the class of 'column')
-// 'clicked' and you want to remove 'clicked',
-// 
 
-// do not need to turn off the event listener
+		// HINTS
-// apply 'won' class
+		// Remove a class by using 'className' and writing the names
+		// of the classes you want to keep. EXAMPLE: If an element with the class of 
+		// 'column' also has a class of 'clicked' and you want to remove 'clicked', 
+		// just say className = "column", and 'clicked' will be removed. You can also
+		// add classes in the same way, while omitting others.
 
+		// Note that if you change a class, the list of elements with that className
+		// will change in real time (the nodeList updates). You'll have to figure out a 
+		// way around this to avoid getting errors
 
 
+	}, 1500);
+}
+
+function checkForWin() {
 
+	// if all tiles have a class of 'found', the player has won
+	// in which case, add a class of 'won' to each tile
 
+}