From a2b59109c4fcd2c0dcaa7a407b053f8f96af9045 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Tue, 24 May 2016 17:18:23 -0400 Subject: [PATCH 1/8] Update README.md --- unit_01/w02d02/homework/README.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/unit_01/w02d02/homework/README.md b/unit_01/w02d02/homework/README.md index 635db98..2a5fe47 100644 --- a/unit_01/w02d02/homework/README.md +++ b/unit_01/w02d02/homework/README.md @@ -18,12 +18,15 @@ Prerequisites: CSS, HTML
# Homework 1) Finish working on the Lord of the Rings (LOTR) homework that you began yesterday (w02d01).
-***NOTE:*** This is due Wednesday, May 25th at 10:00 am EDT. +***NOTE:*** This is due tomorrow, Wednesday, May 25th at 10:00 am EDT. 2) CSS Mockup homework
***NOTE:*** This is due Thursday, May 26th at 10:00 am EDT. -If you finish LOTR and finish coding one of the mockups, please code the second mockup as well. +_If you finish LOTR and finish coding one of the mockups_, please do one of the following: + +- More DOM practice: [click here]( https://github.com/ga-students/wdi-remote/blob/master/unit_01/w02d01/student_labs/ga_dom.md) +- More CSS practice: code the second mockup as well. If you need a refresher on how to submit your homework, follow [these directions](https://github.com/ga-students/wdi-remote/wiki/Homework-Submission). From 3697a83a2ba03357bf7b400502dbbb02617ae982 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Tue, 24 May 2016 17:19:17 -0400 Subject: [PATCH 2/8] Update README.md --- unit_01/w02d02/homework/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/unit_01/w02d02/homework/README.md b/unit_01/w02d02/homework/README.md index 2a5fe47..6efd9ac 100644 --- a/unit_01/w02d02/homework/README.md +++ b/unit_01/w02d02/homework/README.md @@ -18,10 +18,10 @@ Prerequisites: CSS, HTML
# Homework 1) Finish working on the Lord of the Rings (LOTR) homework that you began yesterday (w02d01).
-***NOTE:*** This is due tomorrow, Wednesday, May 25th at 10:00 am EDT. +***Due Date:*** Tomorrow, Wednesday, May 25th at 10:00 am EDT. 2) CSS Mockup homework
-***NOTE:*** This is due Thursday, May 26th at 10:00 am EDT. +***Due Date:*** Thursday, May 26th at 10:00 am EDT. _If you finish LOTR and finish coding one of the mockups_, please do one of the following: From 61c1ea512b749e129306829bcee2cb316b49b567 Mon Sep 17 00:00:00 2001 From: Thom Page Date: Wed, 25 May 2016 16:23:12 -0400 Subject: [PATCH 3/8] init --- unit_01/w01d05/homework/solutions.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/unit_01/w01d05/homework/solutions.js b/unit_01/w01d05/homework/solutions.js index b775227..f9d42e9 100644 --- a/unit_01/w01d05/homework/solutions.js +++ b/unit_01/w01d05/homework/solutions.js @@ -189,6 +189,17 @@ var isAVowel2 = function(char) { console.log(isAVowel2("a")); // => true +var isAVowel3 = function(input) { + var vowels = "aeiou"; + if (vowels.includes(input)) { + console.log(input + ' is a vowel'); + } else { + console.log('NOT A VOWEL'); + } +} + +console.log(isAVowel3("b")); + // ======================================= // Write a function `sumArray` that sums the numbers in an array of numbers. From b598185e2184fe1e176e7bb0e74222c780a3541a Mon Sep 17 00:00:00 2001 From: Thom Page Date: Wed, 25 May 2016 16:26:35 -0400 Subject: [PATCH 4/8] stuff --- .../bubble_sort/bubble_sort.md | 15 +++ ...ject_constructors_iteration_walkthrough.md | 16 ++++ .../homework/to_do_starter/css/style.css | 48 ++++++++++ .../w03d04/homework/to_do_starter/index.html | 31 +++++++ .../homework/to_do_starter/instructions.md | 93 +++++++++++++++++++ .../w03d04/homework/to_do_starter/js/app.js | 2 + 6 files changed, 205 insertions(+) create mode 100644 unit_01/w03d04/homework/object_constructors_iteration_walkthrough.md create mode 100644 unit_01/w03d04/homework/to_do_starter/css/style.css create mode 100644 unit_01/w03d04/homework/to_do_starter/index.html create mode 100644 unit_01/w03d04/homework/to_do_starter/instructions.md create mode 100644 unit_01/w03d04/homework/to_do_starter/js/app.js diff --git a/morning_exercise_resources/bubble_sort/bubble_sort.md b/morning_exercise_resources/bubble_sort/bubble_sort.md index 4892b88..afe833c 100644 --- a/morning_exercise_resources/bubble_sort/bubble_sort.md +++ b/morning_exercise_resources/bubble_sort/bubble_sort.md @@ -1,3 +1,18 @@ +![ga](http://mobbook.generalassemb.ly/ga_cog.png) + +# WDI-PANTHALASSA + +--- +Title: Bubble Sort
+Type: Exercise
+Creator: + Thom Page
+ Course: WDIr-Panthalassa
+Competencies: While loops, for loops, conditionals, functions, nested loops
+ +--- + + # BUBBLE SORT #### .. and nested loops diff --git a/unit_01/w03d04/homework/object_constructors_iteration_walkthrough.md b/unit_01/w03d04/homework/object_constructors_iteration_walkthrough.md new file mode 100644 index 0000000..884d1ef --- /dev/null +++ b/unit_01/w03d04/homework/object_constructors_iteration_walkthrough.md @@ -0,0 +1,16 @@ +### Object Constructors and Iteration, Walkthrough + + +1. Make an array called `fearNames` and put in five strings of technical fear names, eg. "Deipnophobia". + +2. Make an array called 'fearDescriptions' and put in five descriptions that match the fears in `fearNames`. If "Deipnophobia" comes first in `fearNames`, the description for it: "An abnormal fear of dining and dinner conversation." comes first in `fearDescriptions`. + +3. Make an object constructor function called `Fear`. A Fear will take two parameters, `name` and `description`. The properties of a Fear will use the `this` keyword. + +4. Make an empty array called `fearObjects`. + +5. Using a for loop, iterate over the `fearNames` array. Use the keyword `new` to make a new Fear object and push that newly constructed Fear into `fearObjects`. A new Fear should have both a name and a description from the `fearNames` and `fearDescriptions` arrays. (You do not need a nested loop). + +6. console.log the `fearObjects` array. You should see five Fear objects each with the applicable name and description. + +7. That's it. You did it. That's ... yeah it's over. You generated many objects using an object constructor function by means of iteration. \ No newline at end of file diff --git a/unit_01/w03d04/homework/to_do_starter/css/style.css b/unit_01/w03d04/homework/to_do_starter/css/style.css new file mode 100644 index 0000000..8e0ae8c --- /dev/null +++ b/unit_01/w03d04/homework/to_do_starter/css/style.css @@ -0,0 +1,48 @@ +/*uncomment to see div layout*/ +/*div { + border: 1px solid firebrick; +}*/ + +body { + font-family: monospace; +} + +#container { + width: 800px; height: 730px; + margin: 0 auto; +} + +#header { + text-align: center; +} + +#input-container { + text-align: center; +} + +#input-box { + height: 30px; width: 300px; +} + +#submit { + height: 30px; width: 100px; + border: none; + background-color: firebrick; + color: white; +} + +#to-do-list, #completed { + display: inline-block; + margin-left: 10px; + margin-top: 10px; + text-align: center; +} + +#to-do-list { + width: 380px; height: 600px; +} + +#completed { + width: 380px; height: 600px; +} + diff --git a/unit_01/w03d04/homework/to_do_starter/index.html b/unit_01/w03d04/homework/to_do_starter/index.html new file mode 100644 index 0000000..898bf19 --- /dev/null +++ b/unit_01/w03d04/homework/to_do_starter/index.html @@ -0,0 +1,31 @@ + + + To Do + + + + +
+ + + +
+ + +
+ +
+

things to do

+
+ +
+

things that are done

+
+ +
+ + + + \ No newline at end of file diff --git a/unit_01/w03d04/homework/to_do_starter/instructions.md b/unit_01/w03d04/homework/to_do_starter/instructions.md new file mode 100644 index 0000000..2c0ad5d --- /dev/null +++ b/unit_01/w03d04/homework/to_do_starter/instructions.md @@ -0,0 +1,93 @@ +# WHAT TO DO ? + +![nothing](http://www.likecool.com/Gear/Pic/Nothing%20to%20do/Nothing-to-do.jpg) + + +## To-Do List +Build a To-Do list app with two columns: one for things to do, and another for things that have been done. Use jQuery to give your app functionality. + +### Starter code +To get straight to the jQuery portion of the homework, feel free to use the starter code and fill in the javascript. You can make the page look nice afterwards. If you don't want to use the starter code and want to practise page layout, or just layout your own to do app from scratch, that's cool too, but it will take more time. Budget accordingly! + +### User Stories + +#####In the starter code: +1. the user should see two columns and an input field. +2. the user should be able to type a to-do item into an input box. +3. the user should be able to click an `add` button next to this input. + +##### Stuff for you to do: +1. When the user clicks the `add` button, the input box value should be added to his/her to-do list. +3. The user should be able to see all of the todos that they have created. +5. The user should be able to click 'done' on a todo and have it move to the completed column. +4. The user should be able to delete a to-do item from the completed list. + +Hint: jQuery has a useful function that gets whatever the user typed into the input box called `.val()`. + + +### General Flow + +First, add the jQuery library to your project. Go to https://code.jquery.com/ and copy the url of a minified jQuery. Use this url in a script tag. Alternatively, go to https://cdnjs.com/ and search for jQuery. + +Include any code that affects the DOM inside a window onload. jQuery has a shorthand for window onload: + +``` +$(function() { + + // DOM stuff + +}) +``` + +Try it out. + +Remember the general flow of what is happening. The user makes an action, you run some code in order to process this action, the results of the action are rendered to the page, and then you wait until another action takes place. + +### Make it look pretty +Use the CSS knowledge that you've gained over the past few weeks. In addition, think about icons or elements that you can use. + + +### jQuery cheat sheet examples + +- this: `$(this)` + +- create element: `$('
')`, `$('

')`, etc. + +- select all elements of type: `$('div')`, `$('p')`, etc. + +- ^^ The two commands above are very similar but they do completely different things! + +- you can get the body of the document with: `$('body')` + +- get element by id: `$('#idName')` + +- get elements by class: `$('.className')` + +- set id on element: `jQueryElement.attr('id', 'idName')` + +- set class on element `jQueryElement.addClass('className')` + +- click listener: `jQueryElement.click( function )` + +- get value from input box after click: `$('#idName').val()` + +- append elements: `jQueryElement.append( //stuff )` + +- prepend elements: `jQueryElement.prepend( // stuff )` + +- remove elements: `jQueryElement.remove()` + +- set text inside element: `jQueryElement.text("some text")` + +- set html inside element: `jQueryElement.html("")` + +- check if element has a class: `jQueryElement.hassClass('.someClass')` + +- set a css property on an element: `jQueryElement.css('property', 'value')` + + + + + +### Super Super Bonus +The browser has something called [local storage](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Storage). This allows us to cache data in the browser. Using local storage, make this application remember the to-dos that have already been entered in, even if the page is closed. \ No newline at end of file diff --git a/unit_01/w03d04/homework/to_do_starter/js/app.js b/unit_01/w03d04/homework/to_do_starter/js/app.js new file mode 100644 index 0000000..86b0c5c --- /dev/null +++ b/unit_01/w03d04/homework/to_do_starter/js/app.js @@ -0,0 +1,2 @@ +console.log('app.js'); + From 90b73fb9671597fd316fd52b9f658105b5a453e1 Mon Sep 17 00:00:00 2001 From: Kristyn Bryan Date: Wed, 25 May 2016 17:01:03 -0400 Subject: [PATCH 5/8] Update word_frequency.md --- morning_exercise_resources/word_frequency/word_frequency.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/morning_exercise_resources/word_frequency/word_frequency.md b/morning_exercise_resources/word_frequency/word_frequency.md index e0cc1d5..8156916 100644 --- a/morning_exercise_resources/word_frequency/word_frequency.md +++ b/morning_exercise_resources/word_frequency/word_frequency.md @@ -4,7 +4,7 @@ Write a function or functions that takes in a sentence (string), and returns which word appears in the sentence with the highest frequency, along with the frequency of the word. -Make it just for sentences without commas, apostrophes, and periods. Adjust for capital letters. +Make it just for sentences without commas, apostrophes, and periods. Capital letters and lowercase letters should be treated as equals. If there is a tie between the two most frequent words, the first appearing one is returned. From 702d40623135b75248c294cb126b74dd56470881 Mon Sep 17 00:00:00 2001 From: Thom Page Date: Wed, 25 May 2016 17:15:46 -0400 Subject: [PATCH 6/8] memory games --- .../README.md | 0 .../homework/memory_solution/css/style.css | 67 ++++++++++++++++++ .../homework/memory_solution/index.html | 21 ++++++ .../w02d04/homework/memory_solution/js/app.js | 70 +++++++++++++++++++ .../homework/memory_starter/css/style.css | 3 +- .../w02d04/homework/memory_starter/index.html | 8 +-- .../w02d04/homework/memory_starter/js/app.js | 69 ++---------------- .../w02d04/homework/memory_starter/memory.md | 53 ++++++++++++++ .../w02d04/homework/memory_starter2/README.md | 57 +++++++++++++++ .../homework/memory_starter2/css/style.css | 67 ++++++++++++++++++ .../homework/memory_starter2/index.html | 21 ++++++ .../w02d04/homework/memory_starter2/js/app.js | 70 +++++++++++++++++++ 12 files changed, 436 insertions(+), 70 deletions(-) rename unit_01/w02d04/homework/{memory_starter => memory_solution}/README.md (100%) create mode 100644 unit_01/w02d04/homework/memory_solution/css/style.css create mode 100644 unit_01/w02d04/homework/memory_solution/index.html create mode 100644 unit_01/w02d04/homework/memory_solution/js/app.js create mode 100644 unit_01/w02d04/homework/memory_starter/memory.md create mode 100644 unit_01/w02d04/homework/memory_starter2/README.md create mode 100644 unit_01/w02d04/homework/memory_starter2/css/style.css create mode 100644 unit_01/w02d04/homework/memory_starter2/index.html create mode 100644 unit_01/w02d04/homework/memory_starter2/js/app.js diff --git a/unit_01/w02d04/homework/memory_starter/README.md b/unit_01/w02d04/homework/memory_solution/README.md similarity index 100% rename from unit_01/w02d04/homework/memory_starter/README.md rename to unit_01/w02d04/homework/memory_solution/README.md diff --git a/unit_01/w02d04/homework/memory_solution/css/style.css b/unit_01/w02d04/homework/memory_solution/css/style.css new file mode 100644 index 0000000..a415548 --- /dev/null +++ b/unit_01/w02d04/homework/memory_solution/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_solution/index.html b/unit_01/w02d04/homework/memory_solution/index.html new file mode 100644 index 0000000..82773f5 --- /dev/null +++ b/unit_01/w02d04/homework/memory_solution/index.html @@ -0,0 +1,21 @@ + + + + + Memory + + + +

+ + +
+ +
+
...
+
+ + + \ 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 + + + +
+ + +
+ +
+
...
+
+ + + \ 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 From b0e4b43d9f59532dc49d4150adc32b8513278a93 Mon Sep 17 00:00:00 2001 From: Thom Page Date: Wed, 25 May 2016 17:17:41 -0400 Subject: [PATCH 7/8] removing old memories --- .../w02d04/homework/memory_starter2/README.md | 57 --------------- .../homework/memory_starter2/css/style.css | 67 ------------------ .../homework/memory_starter2/index.html | 21 ------ .../w02d04/homework/memory_starter2/js/app.js | 70 ------------------- 4 files changed, 215 deletions(-) delete mode 100644 unit_01/w02d04/homework/memory_starter2/README.md delete mode 100644 unit_01/w02d04/homework/memory_starter2/css/style.css delete mode 100644 unit_01/w02d04/homework/memory_starter2/index.html delete mode 100644 unit_01/w02d04/homework/memory_starter2/js/app.js diff --git a/unit_01/w02d04/homework/memory_starter2/README.md b/unit_01/w02d04/homework/memory_starter2/README.md deleted file mode 100644 index 6e09bd0..0000000 --- a/unit_01/w02d04/homework/memory_starter2/README.md +++ /dev/null @@ -1,57 +0,0 @@ -# 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 deleted file mode 100644 index a415548..0000000 --- a/unit_01/w02d04/homework/memory_starter2/css/style.css +++ /dev/null @@ -1,67 +0,0 @@ -@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 deleted file mode 100644 index 82773f5..0000000 --- a/unit_01/w02d04/homework/memory_starter2/index.html +++ /dev/null @@ -1,21 +0,0 @@ - - - - - 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 deleted file mode 100644 index 3163c78..0000000 --- a/unit_01/w02d04/homework/memory_starter2/js/app.js +++ /dev/null @@ -1,70 +0,0 @@ -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 From fe1a7cf3a96ebf5a78c3cae644236f1fcaea5c34 Mon Sep 17 00:00:00 2001 From: Thom Page Date: Wed, 25 May 2016 17:53:28 -0400 Subject: [PATCH 8/8] replacing folders --- .../memory_solution/{README.md => memory.md} | 6 +- .../homework/memory_starter/css/style.css | 3 +- .../w02d04/homework/memory_starter/index.html | 8 +-- .../w02d04/homework/memory_starter/js/app.js | 69 +++++++++++++++++-- .../w02d04/homework/memory_starter/memory.md | 40 ++++++----- 5 files changed, 93 insertions(+), 33 deletions(-) rename unit_01/w02d04/homework/memory_solution/{README.md => memory.md} (85%) diff --git a/unit_01/w02d04/homework/memory_solution/README.md b/unit_01/w02d04/homework/memory_solution/memory.md similarity index 85% rename from unit_01/w02d04/homework/memory_solution/README.md rename to unit_01/w02d04/homework/memory_solution/memory.md index 6e09bd0..89b0ef4 100644 --- a/unit_01/w02d04/homework/memory_solution/README.md +++ b/unit_01/w02d04/homework/memory_solution/memory.md @@ -1,9 +1,7 @@ # 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. - +Today we are going to build the game Memory. Write all your code in app.js, but +look at index.html to get your bearings. ### You will need diff --git a/unit_01/w02d04/homework/memory_starter/css/style.css b/unit_01/w02d04/homework/memory_starter/css/style.css index 4af4d92..a415548 100644 --- a/unit_01/w02d04/homework/memory_starter/css/style.css +++ b/unit_01/w02d04/homework/memory_starter/css/style.css @@ -36,6 +36,7 @@ button { text-align: center; vertical-align: middle; width: 50px; + transition: background-color 2s; } .column:hover { @@ -48,7 +49,7 @@ button { color: #FFFFFF; } -#footer { +#info { 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 3108730..82773f5 100644 --- a/unit_01/w02d04/homework/memory_starter/index.html +++ b/unit_01/w02d04/homework/memory_starter/index.html @@ -1,10 +1,9 @@ - + Memory -
@@ -13,9 +12,10 @@
- +
- +
...
+ \ 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 28fa33a..3163c78 100644 --- a/unit_01/w02d04/homework/memory_starter/js/app.js +++ b/unit_01/w02d04/homework/memory_starter/js/app.js @@ -1,11 +1,70 @@ window.onload = function() { - console.log('Loaded, bro'); + 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 NUMBERS -//+ Jonas Raoni Soares Silva -//@ http://jsfromhell.com/array/shuffle [v1.0] -function shuffle(o){ //v1.0 + +// 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/memory.md b/unit_01/w02d04/homework/memory_starter/memory.md index fd622e5..89b0ef4 100644 --- a/unit_01/w02d04/homework/memory_starter/memory.md +++ b/unit_01/w02d04/homework/memory_starter/memory.md @@ -1,33 +1,31 @@ -# 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. +Today we are going to build the game Memory. Write all your code in app.js, but +look at index.html to get your bearings. -# memoryGame object +### You will need -#### Attributes +#### Data -- tiles - - an array of 'tiles' representing the letter values that will be displayed on each DOM tile. +- 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.] -#### Behaviors +#### Functions - `start()` - - shuffle the gameboard's tiles - - then call a function to build and display the gameboard + - 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 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 + - 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 - - The click event should call the game object's makePlay function passing it the tile that was clicked + - 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 @@ -42,12 +40,16 @@ We're going to create a game object in which we define all of the logic for how - 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 footer + - add a winning message to the info div - 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 +- add a click event to the start button, so that when it is clicked a new game is triggered. +