Merge branch 'master' of https://github.com/thompage/panpsychism
Thom Page
10 years ago
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,55 +1,32 @@
|
||||
|
||||
|
||||
# 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>
|
||||
|
||||
|
||||
# WDI-PANTHALASSA
|
||||
|
||||
---
|
||||
Title: Homework w02d02 <br>
|
||||
Type: Homework<br>
|
||||
Duration: "4:00"<br>
|
||||
Creator:<br>
|
||||
Original creators: WDI-Archer, WDI-Funke, WDI-Meeseeks<br>
|
||||
Adapted by: Kristyn Bryan<br>
|
||||
Course: WDIr Panthalassa<br>
|
||||
Competencies: CSS, HTML, DOM manipulation<br>
|
||||
Prerequisites: CSS, HTML <br>
|
||||
|
||||
---
|
||||
|
||||
# Homework
|
||||
|
||||
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.
|
||||
|
||||
2) CSS Mockup homework<br>
|
||||
***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).
|
||||
|
||||
|
||||
@ -1,31 +1,147 @@
|
||||
# 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
|
||||
searchArray(nums, 6) => -1
|
||||
|
||||
|
||||
|
||||
|
||||
# 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) {
|
||||
|
||||
};
|
||||
```
|
||||
|
||||
@ -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!
|
||||
|
||||
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
|
||||
|
||||
Loading…
Reference in new issue