diff --git a/unit_01/w02d02/homework/CSS_Mockups/README.md b/unit_01/w02d02/homework/CSS_Mockups/README.md new file mode 100644 index 0000000..4108698 --- /dev/null +++ b/unit_01/w02d02/homework/CSS_Mockups/README.md @@ -0,0 +1,55 @@ +![ga](http://mobbook.generalassemb.ly/ga_cog.png) + +# WDI-PANTHALASSA + +--- +Title: CSS Mockup Homework w02d02
+Type: Homework
+Duration: "2:00"
+Creator:
+ Original creators: WDI-Archer, WDI-Funke
+ Adapted by: Kristyn Bryan
+ Course: WDIr Panthalassa
+Competencies: CSS, HTML
+Prerequisites: CSS, HTML
+ +--- + +# Homework - Master Your Mockup + +![mockup picture with cat](http://www.oddities123.com/wp-content/uploads/2013/06/funny-twins-8.jpg) + +For tonight's homework you have the option of doing one of two website mockups. We have provided the image files needed to create a mockup for each website, but you will need to create the `index.hml` file and the `style.css`. + +Decide whether you want to re-create `VSSL` or `Supply`. + +Do the following commits: + +**Commit 1**
+
+Once you have setup the basic structure in your HTML file, save it, add it, and commit it. The commit message should read:
+"Set up basic HTML file" +
+ +**Commit 2**
+
+Once you have created and saved your CSS file, add it and commit it. The commit message should read:
+"Created a CSS file" +
+ +**Commit 3**
+
+Once you have linked your CSS file to your HTML file (make sure to test it - change the background color of the page to ensure that it's properly linked), add it and commit it. Need a reminder on how to do this? Check out this link on how to [link an external style sheet] (http://www.w3schools.com/css/css_howto.asp). +The commit message should read:
+"The CSS file is successfully linked to the HTML file" +
+ +**Commit 4**
+
+Once you have the pictures displaying on your page (they don't have to be in the right place on the page, they just need to be on your page), take a screenshot, title it `mockup_with_pictures_pre_styling`. Save this to your homework folder. The commit message should read:
+"The images were loaded to the HTML, but not styled yet" +
+ +**Commit 5**
+
+Once you have successfully created the mockup (or once you're too tired to continue and need to go to bed), take a screenshot of your work and title it `mockup_with_styling`. Save this to your homework folder. Come up with your own appropriate commit message.
diff --git a/unit_01/w02d02/homework/README.md b/unit_01/w02d02/homework/README.md index 4108698..6efd9ac 100644 --- a/unit_01/w02d02/homework/README.md +++ b/unit_01/w02d02/homework/README.md @@ -1,55 +1,32 @@ -![ga](http://mobbook.generalassemb.ly/ga_cog.png) - -# WDI-PANTHALASSA - ---- -Title: CSS Mockup Homework w02d02
-Type: Homework
-Duration: "2:00"
-Creator:
- Original creators: WDI-Archer, WDI-Funke
- Adapted by: Kristyn Bryan
- Course: WDIr Panthalassa
-Competencies: CSS, HTML
-Prerequisites: CSS, HTML
- ---- - -# Homework - Master Your Mockup - -![mockup picture with cat](http://www.oddities123.com/wp-content/uploads/2013/06/funny-twins-8.jpg) - -For tonight's homework you have the option of doing one of two website mockups. We have provided the image files needed to create a mockup for each website, but you will need to create the `index.hml` file and the `style.css`. - -Decide whether you want to re-create `VSSL` or `Supply`. - -Do the following commits: - -**Commit 1**
-
-Once you have setup the basic structure in your HTML file, save it, add it, and commit it. The commit message should read:
-"Set up basic HTML file" -
- -**Commit 2**
-
-Once you have created and saved your CSS file, add it and commit it. The commit message should read:
-"Created a CSS file" -
- -**Commit 3**
-
-Once you have linked your CSS file to your HTML file (make sure to test it - change the background color of the page to ensure that it's properly linked), add it and commit it. Need a reminder on how to do this? Check out this link on how to [link an external style sheet] (http://www.w3schools.com/css/css_howto.asp). -The commit message should read:
-"The CSS file is successfully linked to the HTML file" -
- -**Commit 4**
-
-Once you have the pictures displaying on your page (they don't have to be in the right place on the page, they just need to be on your page), take a screenshot, title it `mockup_with_pictures_pre_styling`. Save this to your homework folder. The commit message should read:
-"The images were loaded to the HTML, but not styled yet" -
- -**Commit 5**
-
-Once you have successfully created the mockup (or once you're too tired to continue and need to go to bed), take a screenshot of your work and title it `mockup_with_styling`. Save this to your homework folder. Come up with your own appropriate commit message.
+![ga](http://mobbook.generalassemb.ly/ga_cog.png) + +# WDI-PANTHALASSA + +--- +Title: Homework w02d02
+Type: Homework
+Duration: "4:00"
+Creator:
+ Original creators: WDI-Archer, WDI-Funke, WDI-Meeseeks
+ Adapted by: Kristyn Bryan
+ Course: WDIr Panthalassa
+Competencies: CSS, HTML, DOM manipulation
+Prerequisites: CSS, HTML
+ +--- + +# Homework + +1) Finish working on the Lord of the Rings (LOTR) homework that you began yesterday (w02d01).
+***Due Date:*** Tomorrow, Wednesday, May 25th at 10:00 am EDT. + +2) CSS Mockup homework
+***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: + +- 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). + diff --git a/unit_01/w02d02/morning_exercise/README.md b/unit_01/w02d02/morning_exercise/README.md index 82cd3b0..303599c 100644 --- a/unit_01/w02d02/morning_exercise/README.md +++ b/unit_01/w02d02/morning_exercise/README.md @@ -1,31 +1,147 @@ # W02D02 Morning Warmup -![Image of Caveman](http://s3.amazonaws.com/media.wbur.org/wordpress/11/files/2011/10/1017_palindrome.jpg) -####Exercises 1: Find a value in a given array - - Write a function `searchArray` that takes an array and value as parameters and searches the array for the given value. If the value is in the array, return `true`, otherwise return '-1'. -```javascript -var nums = [1,2,3,4,5] -searchArray(nums, 3) => true -searchArray(nums, 6) => -1 +![Cat Programmer](http://s2.quickmeme.com/img/99/9903c7c14add3fd0758b7b5b80c24d48101f296f13ce34736799a82c71f61bc2.jpg) + + + +# JAVASCRIPT ITERATORS + +#####`.forEach`, `.map`, and `.reduce` + +Javascript iterators are like loops. They step (or iterate) over each item in an array. Iterators perform operations according to conditions specified in a callback. + +# .forEach + +`.forEach` is the basic iterator, all it does is step through each item in an array. + +#### EXAMPLE: + ``` -Here is some starter code: -```javascript -var searchArray = function(array,value) { +arr = [8, 8, 8, 8, 8, 8, 8, 8]; + +arr.forEach(function(n) { + console.log(n + 1); +}); + +=> Prints a bunch of 9s to the console + +``` + + +##### EXERCISE: +- Log each word in `words` in upper case using `.forEach.` + +``` +words = ["Ho", "Chi", "Minh", "City", "was", "once", "known", "as", "Prey", "Nokor"]; +``` + + + + +# .map + +`.map` is like `.forEach` but it returns a new array with the selections and / or transformations applied in the iterator. `.map` saves to a new array and does not alter the original array. + + +EXAMPLE: + +``` +var new_arr = arr.map(function(n) { + return n += n / 2 +}); + +=> [12, 12, 12, 12, 12, 12, 12, 12] +``` + +####EXERCISE: -}; +``` +more_words = ["Joe", "Overreats", "Eggs"]; +``` + +- Map to a new array that stores only the first letter from each word in `more_words`. + +Expected result: + +``` +["J", "O", "E"] +``` + +... + +# .reduce + +`.reduce` iterates over the elements in an array and smooshes them together into a single variable according to the instructions in the iterator. Like `.map`, it returns a new value and does not alter the original array. + +#### EXAMPLE: + +Add together all numbers in an array: + +``` +arr = [8, 8, 8, 8, 8, 8, 8, 8]; + +new_value = arr.reduce(function(sum, n){ + return sum += n +}); + +=> 64 +``` + + +#### EXERCISE: +``` +arr = [8, 8, 8, 8, 8, 8, 8, 8]; ``` -#### Exercises 2: Determine whether a given string is a [palindrome](https://en.wikipedia.org/wiki/Palindrome) +- Return the *product* of the numbers in `arr`. -- Write a function `isPalindrome` that takes in a single parameter `str`, a string, and returns `true` if the string is a palindrome, and false otherwise. For example + +... + +#### EXERCISE: + +Using both `.map` and `.reduce`, find the total sheepCount of sheep shorn by sheep shearers at the 1623 Sheep Shearing Feast: + +``` +var sheepShearers = [ + { + name: "Tim", + age: 20, + sheepCount: 18 + }, + { + name: "C3PO", + age: 200, + sheepCount: 320 + }, + { + name: "Cousin It", + age: Infinity, + sheepCount: 2900 + } +]; +``` + +``` +=> 3238 +``` + + + + + +#### FINISHED EARLY?: +Find a value in a given array + - Write a function `searchArray` that takes an array and value as parameters and searches the array for the given value. If the value is in the array, return `true`, otherwise return '-1'. ```javascript -isPalindrome('hello') => false -isPalindrome('hannah') => true +var nums = [1,2,3,4,5] +searchArray(nums, 3) => true +searchArray(nums, 6) => -1 ``` Here is some starter code: ```javascript -var isPalindrome = function(str) { +var searchArray = function(array,value) { }; ``` diff --git a/unit_01/w02d02/morning_exercise/Solutions_w02d02_morning_exercise.md b/unit_01/w02d02/morning_exercise/Solutions_w02d02_morning_exercise.md new file mode 100644 index 0000000..f3d85e4 --- /dev/null +++ b/unit_01/w02d02/morning_exercise/Solutions_w02d02_morning_exercise.md @@ -0,0 +1,215 @@ +# W02D02 Morning Warmup + +# JAVASCRIPT ITERATORS + +#####`.forEach`, `.map`, and `.reduce` + +Javascript iterators are like loops. They step (or iterate) over each item in an array. Iterators perform operations according to conditions specified in a callback. + +# .forEach + +`.forEach` is the basic iterator, all it does is step through each item in an array. + +#### EXAMPLE: + +``` +arr = [8, 8, 8, 8, 8, 8, 8, 8]; + +arr.forEach(function(n) { + console.log(n + 1); +}); + +=> Prints a bunch of 9s to the console + +``` + +##### EXERCISE: +- Log each word in `words` in upper case using `.forEach.` + +``` +words = ["Ho", "Chi", "Minh", "City", "was", "once", "known", "as", "Prey", "Nokor"]; +``` + +
+SOLUTION to .forEach + +```javascript +words = ["Ho", "Chi", "Minh", "City", "was", "once", "known", "as", "Prey", "Nokor"]; + +words.forEach(function (e){ + console.log(e.toUpperCase()); +}); +``` + +# .map + +`.map` is like `.forEach` but it returns a new array with the selections and / or transformations applied in the iterator. `.map` saves to a new array and does not alter the original array. + + +EXAMPLE: + +``` +var new_arr = arr.map(function(n) { + return n += n / 2 +}); + +=> [12, 12, 12, 12, 12, 12, 12, 12] +``` + +####EXERCISE: + +``` +more_words = ["Joe", "Overreats", "Eggs"]; +``` + +- Map to a new array that stores only the first letter from each word in `more_words`. + +Expected result: + +``` +["J", "O", "E"] +``` +SOLUTION: .map +```javascript +more_words = ["Joe", "Overreats", "Eggs"]; + + +var new_arr = more_words.map(function (i){ + return i.charAt(0); +}); + +console.log (new_arr); +``` + +... + +# .reduce + +`.reduce` iterates over the elements in an array and smooshes them together into a single variable according to the instructions in the iterator. Like `.map`, it returns a new value and does not alter the original array. + +#### EXAMPLE: + +Add together all numbers in an array: + +``` +new_value = arr.reduce(function(sum, n){ + return sum += n +}); + +=> 64 +``` + + +#### EXERCISE: +``` +arr = [8, 8, 8, 8, 8, 8, 8, 8]; +``` + +- Return the product of the numbers in `arr`. + +SOLUTION .reduce +```javascript +arr = [8, 8, 8, 8, 8, 8, 8, 8]; + +new_value = arr.reduce(function(product, n){ + return product *= n +}); + +console.log(new_value); +``` + +... + +#### EXERCISE: + +Using both `.map` and `.reduce`, find the total sheepCount of sheep shorn by sheep shearers at the 1623 Sheep Shearing Feast: + +``` +var sheepShearers = [ + { + name: "Tim", + age: 20, + sheepCount: 18 + }, + { + name: "C3PO", + age: 200, + sheepCount: 320 + }, + { + name: "Cousin It", + age: Infinity, + sheepCount: 2900 + } +]; +``` + +``` +=> 3238 +``` + +/////////////////////////// +SOLUTION: sheepShearer + +```javascript +var sheepShearers = [ + { + name: "Tim", + age: 20, + sheepCount: 18 + }, + { + name: "C3PO", + age: 200, + sheepCount: 320 + }, + { + name: "Cousin It", + age: Infinity, + sheepCount: 2900 + } +]; + + +var total = sheepShearers + .map(function(item) { + return item.sheepCount; + }) + .reduce(function(sum, num) { + return sum += num; + }); + +console.log(total); +``` + + +#### FINISHED EARLY?: +Find a value in a given array + - Write a function `searchArray` that takes an array and value as parameters and searches the array for the given value. If the value is in the array, return `true`, otherwise return '-1'. +```javascript +var nums = [1,2,3,4,5] +searchArray(nums, 3) => true +searchArray(nums, 6) => -1 +``` +Here is some starter code: +```javascript +var searchArray = function(array,value) { + +}; +``` + +/////////////////////////////////////////// +SOLUTION 1 +``` +var searchArray = function(array,value) { + console.log("you're inside the function"); + + for (i=0; i < array.length; i++) { + if (value === array[i]){ + return true; + }; + }; + return '-1'; +}; + +searchArray([1,2,3,4], 5); diff --git a/unit_01/w02d04/homework/memory_starter/memory.md b/unit_01/w02d04/homework/memory_starter/README.md similarity index 85% rename from unit_01/w02d04/homework/memory_starter/memory.md rename to unit_01/w02d04/homework/memory_starter/README.md index 89b0ef4..6e09bd0 100644 --- a/unit_01/w02d04/homework/memory_starter/memory.md +++ b/unit_01/w02d04/homework/memory_starter/README.md @@ -1,7 +1,9 @@ # Memory! -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. +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