Thom Page 10 years ago
commit 7453082b8f

@ -0,0 +1,55 @@
![ga](http://mobbook.generalassemb.ly/ga_cog.png)
# WDI-PANTHALASSA
---
Title: CSS Mockup Homework w02d02 <br>
Type: Homework<br>
Duration: "2:00"<br>
Creator:<br>
Original creators: WDI-Archer, WDI-Funke<br>
Adapted by: Kristyn Bryan<br>
Course: WDIr Panthalassa<br>
Competencies: CSS, HTML<br>
Prerequisites: CSS, HTML <br>
---
# 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** <br>
<hr>
Once you have setup the basic structure in your HTML file, save it, add it, and commit it. The commit message should read: <br>
"Set up basic HTML file"
<hr>
**Commit 2** <br>
<hr>
Once you have created and saved your CSS file, add it and commit it. The commit message should read: <br>
"Created a CSS file"
<hr>
**Commit 3** <br>
<hr>
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: <br>
"The CSS file is successfully linked to the HTML file"
<hr>
**Commit 4** <br>
<hr>
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: <br>
"The images were loaded to the HTML, but not styled yet"
<hr>
**Commit 5** <br>
<hr>
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. <br>

@ -3,53 +3,30 @@
# WDI-PANTHALASSA # WDI-PANTHALASSA
--- ---
Title: CSS Mockup Homework w02d02 <br> Title: Homework w02d02 <br>
Type: Homework<br> Type: Homework<br>
Duration: "2:00"<br> Duration: "4:00"<br>
Creator:<br> Creator:<br>
Original creators: WDI-Archer, WDI-Funke<br> Original creators: WDI-Archer, WDI-Funke, WDI-Meeseeks<br>
Adapted by: Kristyn Bryan<br> Adapted by: Kristyn Bryan<br>
Course: WDIr Panthalassa<br> Course: WDIr Panthalassa<br>
Competencies: CSS, HTML<br> Competencies: CSS, HTML, DOM manipulation<br>
Prerequisites: CSS, HTML <br> Prerequisites: CSS, HTML <br>
--- ---
# Homework - Master Your Mockup # Homework
![mockup picture with cat](http://www.oddities123.com/wp-content/uploads/2013/06/funny-twins-8.jpg) 1) Finish working on the Lord of the Rings (LOTR) homework that you began yesterday (w02d01).<br>
***Due Date:*** Tomorrow, Wednesday, May 25th at 10:00 am EDT.
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`. 2) CSS Mockup homework<br>
***Due Date:*** Thursday, May 26th at 10:00 am EDT.
Decide whether you want to re-create `VSSL` or `Supply`. _If you finish LOTR and finish coding one of the mockups_, please do one of the following:
Do the following commits: - 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.
**Commit 1** <br> If you need a refresher on how to submit your homework, follow [these directions](https://github.com/ga-students/wdi-remote/wiki/Homework-Submission).
<hr>
Once you have setup the basic structure in your HTML file, save it, add it, and commit it. The commit message should read: <br>
"Set up basic HTML file"
<hr>
**Commit 2** <br>
<hr>
Once you have created and saved your CSS file, add it and commit it. The commit message should read: <br>
"Created a CSS file"
<hr>
**Commit 3** <br>
<hr>
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: <br>
"The CSS file is successfully linked to the HTML file"
<hr>
**Commit 4** <br>
<hr>
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: <br>
"The images were loaded to the HTML, but not styled yet"
<hr>
**Commit 5** <br>
<hr>
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. <br>

@ -1,31 +1,147 @@
# W02D02 Morning Warmup # 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 ![Cat Programmer](http://s2.quickmeme.com/img/99/9903c7c14add3fd0758b7b5b80c24d48101f296f13ce34736799a82c71f61bc2.jpg)
- 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 # JAVASCRIPT ITERATORS
searchArray(nums, 6) => -1
#####`.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: arr = [8, 8, 8, 8, 8, 8, 8, 8];
```javascript
var searchArray = function(array,value) { 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 ```javascript
isPalindrome('hello') => false var nums = [1,2,3,4,5]
isPalindrome('hannah') => true searchArray(nums, 3) => true
searchArray(nums, 6) => -1
``` ```
Here is some starter code: Here is some starter code:
```javascript ```javascript
var isPalindrome = function(str) { var searchArray = function(array,value) {
}; };
``` ```

@ -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"];
```
<hr>
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);

@ -1,7 +1,9 @@
# Memory! # Memory!
Today we are going to build the game Memory. Write all your code in app.js, but 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.
look at index.html to get your bearings.
Take it one step at a time. Follow these instructions to help get you going.
### You will need ### You will need
Loading…
Cancel
Save