memory files modified

unit_01/w02d04/homework/memory_starter_modified/memory_starter/README.md

@@ -0,0 +1,57 @@
+# Memory!
+
+Tonight you are going to build the game called: [Memory](https://en.wikipedia.org/wiki/Concentration_(game)). We have provided you with a few starter files. You will look at the `index.html` to set up your physical board and cards, but write the code in your `app.js` file to get your game to work. 
+
+Take it one step at a time. Follow these instructions to help get you going.
+
+
+### You will need
+
+#### Data
+
+- an array of ten tiles
+	- your ten 'tiles' will represent the letter values that will be displayed on each DOM tile. eg. ['A', 'A', 'B', 'B', etc.]
+
+#### Functions
+
+- `start()`
+	- shuffle the tiles array
+	- then call makeAndDisplayTiles to build and display the gameboard
+- `makeAndDisplayTiles()`
+	- this function should empty the container that will hold the gameboard tiles
+	- it should clear the text in the info div
+	- it should create 10 new game tiles 
+	    - give them the class 'column'
+		- give them a 'data-value' attribute from each element of your tiles array. The output for an 'A' tile will look like ` <div class="column" data-value="A"></div> `
+		- add the game tiles to the board
+	- then call a function that will add click events to each tile
+- `addEventsToTiles()`
+	- should add click events to each of the gameboard tiles
+	- Each click event should call the makePlay function passing it the tile that was clicked. Strong hint: the tile that was clicked is `this` tile . . . Can you pass `this` as a parameter to the makePlay function? Test it out.
+- `makePlay(tile)`
+	- this function should set the text of the current clicked tile to the value stored in the data attribute
+	- it should add a class of found to the tile
+	- it should add a class of clicked to the tile
+	- if the number of clicked tiles is 2, then it should check for a match
+- `checkForMatch()`
+	- this should retrieve the data-value of the two clicked tiles
+	- if they are a match
+		- the 'clicked' class should be removed from the tiles
+		- the click event should be turned off for those tiles
+		- should check for a win
+	- if no match is found
+		- the text of the clicked cards should be set back to empty
+		- the found and clicked classes should both be removed
+		- BONUS: use setTimeout to keep your cards showing for a hot
+		  moment.
+*After you have the preceding functions working:*
+- `checkForWin()`
+	- if the number of found tiles is 10
+		- add a winning message to the info div
+		- remove the found class
+		- add a won class
+
+## START
+
+- add a click event to the start button, so that when it is clicked a new game is triggered.
+

unit_01/w02d04/homework/memory_starter_modified/memory_starter/css/style.css

@@ -0,0 +1,67 @@
+@import url(http://fonts.googleapis.com/css?family=Londrina+Shadow);
+@import url(http://fonts.googleapis.com/css?family=Mystery+Quest);
+
+body {
+  background: url(http://subtlepatterns.com/images/transp_bg.png);
+}
+#content {
+  margin: 0 auto;
+  width: 360px;
+}
+
+#header {
+  margin-bottom: 20px;
+}
+
+#title {
+  font-family: 'Londrina Shadow', cursive;
+  font-size: 100px;
+}
+
+button {
+  margin-bottom: 20px;
+}
+
+.row {
+  clear: both;
+}
+
+.column {
+  border: 1px solid #595139;
+  float: left;
+  font-family: 'Londrina Shadow', cursive;
+  font-size: 50px;
+  height: 65px;
+  margin: 5px;
+  text-align: center;
+  vertical-align: middle;
+  width: 50px;
+  transition: background-color 2s;
+}
+
+.column:hover {
+  background-color: #A6977B;
+}
+
+/* when two cards match apply this class to them*/
+.found {
+  background-color: #595139;
+  color: #FFFFFF;
+}
+
+#info {
+  font-family: 'Londrina Shadow', cursive;
+  font-size: 50px;
+}
+
+/* apply to every card when the user wins */
+.won {
+  background-color: #F2F0CE;
+  border: 1px solid #83A603;
+  color: #83A603;
+}
+
+#timer {
+  font-family: 'Mystery Quest', cursive;
+  font-size: 20px;
+}

unit_01/w02d04/homework/memory_starter_modified/memory_starter/index.html

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Memory</title>
+	<link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+	<div id="content">
+		<div id="header">
+			<div id="title">Memory</div>
+		</div>
+		<button>Start Game</button>
+		<div id="game">
+			<!-- append your cards here -->
+		</div>
+		<div id="info">...</div>
+	</div>
+	<script type="text/javascript" src="js/app.js"></script>
+</body>
+</html>

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

@@ -0,0 +1,70 @@
+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();
+}
+
+
+// USE THIS TO SHUFFLE YOUR ARRAYS
+//o=array
+var tiles = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E'];
+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();
+}
+
+function makeAndDisplayTiles(){
+	document.getElementById('game').innerHTML = "";
+	document.getElementById('info').innerHTML = "";
+	for(var i = 0; i<tiles.length;i++){
+		var tile = document.createElement('div');
+		tile.setAttribute('class', '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";
+}
+
+
+
+function processData(n) {
+	var result="";
+	for(var i = 1; i<=n; i++){
+		var spaces = i;
+		while(spaces <= n-1){
+			result+=" ";
+			spaces++;
+		}
+		var stairs = i;
+		while(stairs > 0){
+			result+='#';
+			stairs--;
+		}
+        result+='\n'
+	}
+	console.log(result);
+}