Merge branch 'master' of https://github.com/thompage/panpsychism
commit
7453082b8f
@ -0,0 +1,55 @@
|
|||||||
|

|
||||||
|
|
||||||
|
# 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
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
|
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>
|
||||||
@ -1,31 +1,147 @@
|
|||||||
# W02D02 Morning Warmup
|
# W02D02 Morning Warmup
|
||||||

|
|
||||||
|
|
||||||
####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
|
# 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…
Reference in new issue