+
+
+
\ No newline at end of file
diff --git a/unit_01/w02d04/homework/memory_solution/js/app.js b/unit_01/w02d04/homework/memory_solution/js/app.js
new file mode 100644
index 0000000..3163c78
--- /dev/null
+++ b/unit_01/w02d04/homework/memory_solution/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 0){
+ result+='#';
+ stairs--;
+ }
+ result+='\n'
+ }
+ console.log(result);
+}
\ No newline at end of file
diff --git a/unit_01/w02d04/homework/memory_starter/css/style.css b/unit_01/w02d04/homework/memory_starter/css/style.css
index a415548..4af4d92 100644
--- a/unit_01/w02d04/homework/memory_starter/css/style.css
+++ b/unit_01/w02d04/homework/memory_starter/css/style.css
@@ -36,7 +36,6 @@ button {
text-align: center;
vertical-align: middle;
width: 50px;
- transition: background-color 2s;
}
.column:hover {
@@ -49,7 +48,7 @@ button {
color: #FFFFFF;
}
-#info {
+#footer {
font-family: 'Londrina Shadow', cursive;
font-size: 50px;
}
diff --git a/unit_01/w02d04/homework/memory_starter/index.html b/unit_01/w02d04/homework/memory_starter/index.html
index 82773f5..3108730 100644
--- a/unit_01/w02d04/homework/memory_starter/index.html
+++ b/unit_01/w02d04/homework/memory_starter/index.html
@@ -1,9 +1,10 @@
-
+
Memory
+
@@ -12,10 +13,9 @@
-
+
-
...
+
-
\ 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..28fa33a 100644
--- a/unit_01/w02d04/homework/memory_starter/js/app.js
+++ b/unit_01/w02d04/homework/memory_starter/js/app.js
@@ -1,70 +1,11 @@
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();
+ console.log('Loaded, bro');
}
-
-// USE THIS TO SHUFFLE YOUR ARRAYS
-//o=array
-var tiles = ['A', 'A', 'B', 'B', 'C', 'C', 'D', 'D', 'E', 'E'];
-function shuffle(o) {
+// USE THIS TO SHUFFLE YOUR NUMBERS
+//+ Jonas Raoni Soares Silva
+//@ http://jsfromhell.com/array/shuffle [v1.0]
+function shuffle(o){ //v1.0
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 0){
- result+='#';
- stairs--;
- }
- result+='\n'
- }
- console.log(result);
-}
\ No newline at end of file
diff --git a/unit_01/w02d04/homework/memory_starter/memory.md b/unit_01/w02d04/homework/memory_starter/memory.md
new file mode 100644
index 0000000..fd622e5
--- /dev/null
+++ b/unit_01/w02d04/homework/memory_starter/memory.md
@@ -0,0 +1,53 @@
+# CODE ALONG 02-04
+
+# Memory!
+
+Today we are going to build the game memory.
+
+We're going to create a game object in which we define all of the logic for how our game should work. Then we will add click events to make the game functional.
+
+# memoryGame object
+
+#### Attributes
+
+- tiles
+ - an array of 'tiles' representing the letter values that will be displayed on each DOM tile.
+
+#### Behaviors
+
+- `start()`
+ - shuffle the gameboard's tiles
+ - then call a function to build and display the gameboard
+- `makeAndDisplayTiles()`
+ - this function should empty the container that will hold the gameboard tiles
+ - it should reset the footer's text
+ - it should create 10 new game tiles
+ - add a data-attribute
+ - 'data-value' set equal to the one of the shuffled game tiles
+ - then call a function that will add click events to each tile
+- `addEventsToTiles()`
+ - should add click events to each of the gameboard tiles
+ - The click event should call the game object's makePlay function passing it the tile that was clicked
+- `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
+- `checkForWin()`
+ - if the number of found tiles is 10
+ - add a winning message to the footer
+ - remove the found class
+ - add a won class
+
+## START
+
+- add a click event to the button, so that when it is clicked a new game is triggered.
\ No newline at end of file
diff --git a/unit_01/w02d04/homework/memory_starter2/README.md b/unit_01/w02d04/homework/memory_starter2/README.md
new file mode 100644
index 0000000..6e09bd0
--- /dev/null
+++ b/unit_01/w02d04/homework/memory_starter2/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 ` `
+ - 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.
+
diff --git a/unit_01/w02d04/homework/memory_starter2/css/style.css b/unit_01/w02d04/homework/memory_starter2/css/style.css
new file mode 100644
index 0000000..a415548
--- /dev/null
+++ b/unit_01/w02d04/homework/memory_starter2/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;
+}
\ No newline at end of file
diff --git a/unit_01/w02d04/homework/memory_starter2/index.html b/unit_01/w02d04/homework/memory_starter2/index.html
new file mode 100644
index 0000000..82773f5
--- /dev/null
+++ b/unit_01/w02d04/homework/memory_starter2/index.html
@@ -0,0 +1,21 @@
+
+
+
+
+ Memory
+
+
+
+
+
+
Memory
+
+
+
+
+
+
...
+
+
+
+
\ No newline at end of file
diff --git a/unit_01/w02d04/homework/memory_starter2/js/app.js b/unit_01/w02d04/homework/memory_starter2/js/app.js
new file mode 100644
index 0000000..3163c78
--- /dev/null
+++ b/unit_01/w02d04/homework/memory_starter2/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 0){
+ result+='#';
+ stairs--;
+ }
+ result+='\n'
+ }
+ console.log(result);
+}
\ No newline at end of file