Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit f673863

Browse files
mkruijtmkruijt
committed
implemeted Jim's feedbacl
1 parent 5fbd33c commit f673863

File tree

8 files changed

+151
-160
lines changed

8 files changed

+151
-160
lines changed

‎Week1/README.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ In week two we will discuss the following topics:
1010
```
1111

1212
## How to get started
13-
1. Download and install the latest Current version of NodeJS - from https://nodejs.org/en/download/current/
14-
To test that it was installed and running properly, go to your terminal and run the command: node -v You should get the node version printed on your terminal, for example, v8.8.0
13+
1. Download and install the *LTS* version of NodeJS - https://nodejs.org/en/download/
14+
To test that it was installed and running properly, go to your terminal and run the command: node -v You should get the node version printed on your terminal, for example, v8.9.1
1515
2. Although you are free to make you own choice of text/code editor to use during class and homework, we have good experiences with Microsoft's free VSCode editor, which is supported on Windows, Mac and Linux. Please refer to our [VSCode Tips](../VSCodeTips/README.md) for more information.
1616

1717
## Here are resources that we like you to read as a preparation for the coming lecture:

‎Week5/MAKEME.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ let tasks = monday.concat(tuesday);
9393

9494
- Collect two days' worth of tasks.
9595
- Convert the task durations to hours, instead of minutes.
96-
- Filter out everything that took two hours or more
96+
- Filter out everything that took two hours or more (remove from the collection)
9797
- Multiply the each duration by a per-hour rate for billing (you can decide yourself what Maartje should make per hour) and sum it all up.
9898
- Output a formatted Euro amount.
9999
- Don't forget to use `=>`

‎Week6/MAKEME.md

Lines changed: 93 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -19,84 +19,93 @@ Give feedback on `step 2` of `week 5` to one of your fellow students (do this by
1919

2020
[Make these assignments](https://github.com/HackYourFuture/Git/blob/master/Lecture-3.md). For handing in homework follow the Forking workflow that is described in our lecture-3.md file of HackYourFuture’s Git repository (there is also a video that explains this).
2121

22+
## Step 3: Read
2223

23-
## Step 3: JavaScript
24+
>Read:
25+
- JavaScript : [Closures](http://conceptf1.blogspot.nl/2013/11/javascript-closures.html)
26+
- Everything you wanted to know about [JavaScript scope](https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/)
27+
- JavaScript [Scoping and Hoisting](http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html)
28+
- 5 JavaScript [“Bad” Parts That Are Fixed In ES6](https://medium.freecodecamp.com/5-javascript-bad-parts-that-are-fixed-in-es6-c7c45d44fd81)
29+
30+
- More about [closures](https://www.reddit.com/r/learnjavascript/comments/1v6n8p/closure_explain_likei_am_in_high_school/?st=ixsp0mbe&sh=5526d150)
31+
- A VERY popular [StackOverflow article](http://stackoverflow.com/questions/111102/how-do-javascript-closures-work)
32+
33+
## Step 4: JavaScript
2434

2535
_Deadline Wednesday_
2636

27-
1. We saw that we can pass functions as arguments to other functions. Your task is to write a function that takes another function as an argument and runs it.
28-
29-
```js
30-
function foo(func) {
31-
// What to do here?
32-
}
33-
34-
function bar() {
35-
console.log('Hello, I am bar!');
36-
}
37-
38-
foo(bar);
39-
```
40-
41-
2. We learned a little bit about callbacks in JS. A callback is simply a function passed to another function that gets executed (run) after a potentially long running operation has completed. There is another function called `setTimeout` that will wait a specified period of time and then execute a function. For example:
42-
43-
```js
44-
function doIt() {
45-
console.log('I am done');
37+
1\.We saw that we can pass functions as arguments to other functions. Your task is to write a function that takes another function as an argument and runs it.
38+
39+
function foo(func) {
40+
// What to do here?
41+
}
42+
43+
function bar() {
44+
console.log('Hello, I am bar!');
4645
}
47-
setTimeout(doIt, 5000)
48-
```
49-
If you run the above code it will wait 5 seconds and print `I am done`. Please read something about setTimeout on MDN. The first argument to the `setTimeout` call is the callback (`doIt`)
46+
47+
foo(bar);
5048

51-
You must write a function that takes 4 arguments.
49+
2\.We learned a little bit about callbacks in JS. A callback is simply a function passed to another function that gets executed (run) after a potentially long running operation has completed. There is another function called `setTimeout` that will wait a specified period of time and then execute a function. For example:
50+
51+
```js
52+
function doIt() {
53+
console.log('I am done');
54+
}
55+
setTimeout(doIt, 5000)
56+
```
57+
58+
If you run the above code it will wait 5 seconds and print `I am done`. Please read something about setTimeout on MDN. The first argument to the `setTimeout` call is the callback (`doIt`)
59+
60+
You must write a function that takes 4 arguments.
5261
- A start value
5362
- An end value
5463
- A callback to call if the number is divisible by 3
5564
- A callback to use if the number is divisible by 5
5665

57-
The function should generate an array containing values from start value to end value (inclusive).
66+
The function should generate an array containing values from start value to end value (inclusive).
5867

59-
Then the function should iterate over the array and call the second argument if the array value is divisible by 3
68+
Then the function should iterate over the array and call the first callback if the array value is divisible by 3
6069

61-
The function should call the second argument if the array value is divisible by 5
70+
The function should call the second callback if the array value is divisible by 5
6271

63-
Both functions should be called if the array value is divisible by both 3 and 5
72+
Both functions should be called if the array value is divisible by both 3 and 5
6473

65-
```js
66-
THIS IS FAKE CODE
67-
function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) {
68-
// make array
69-
// start at beginning of array and check if you should call threeCallback or fiveCallback or go on to next
70-
}
71-
threeFive(10, 15, sayThree, sayFive);
74+
```js
75+
THIS IS FAKE CODE
76+
function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) {
77+
// make array
78+
// start at beginning of array and check if you should call threeCallback or fiveCallback or go on to next
79+
}
80+
threeFive(10, 15, sayThree, sayFive);
7281

73-
// Should create an array [10,11,12,13,14,15]
74-
// and call sayFive, sayThree, sayThree, sayFive - please make sure you see why these calls are made before you start coding
75-
```
82+
// Should create an array [10,11,12,13,14,15]
83+
// and call sayFive, sayThree, sayThree, sayFive - please make sure you see why these calls are made before you start coding
84+
```
7685

7786

78-
3. Please solve this problem using:
79-
https://www.freecodecamp.com/challenges/repeat-a-string-repeat-a-string
80-
1. A for loop
81-
2. A while loop
82-
3. A do loop
87+
3\. Please solve this problem using:
88+
https://www.freecodecamp.com/challenges/repeat-a-string-repeat-a-string
89+
3\.1 A for loop.
90+
3\.2 A while loop.
91+
3\.3 A do loop.
8392

84-
4. Some practice with objects
93+
4\. Some practice with objects
8594
https://www.freecodecamp.com/challenges/construct-javascript-objects-with-functions
8695

87-
5. Nested loops
96+
5\. Nested loops
8897
https://www.freecodecamp.com/challenges/nesting-for-loops
8998

90-
6. We did some work with arrays - `var arr = [1,2,3]`
99+
6\. We did some work with arrays - `var arr = [1,2,3]`
91100
We can also nest arrays inside arrays like this `var arr2d = [[1,2], [3,4], [5,6]]` (for math people you can think of this as a matrix)
92101
How would you print all the items of an array with 3 dimensions?
93102
How about with K dimensions?
94103
What if you didn't know how deep the array was nested? (You don't have to write code for this but think about it)
95104

96-
7. Here are two functions that look like they do the something similar but they print different results. Please explain what's going on here.
105+
7\. Here are two functions that look like they do the something similar but they print different results. Please explain what's going on here.
97106

98107
```js
99-
var x = 9;
108+
let x = 9;
100109
function f1(val) {
101110
val = val+1;
102111
return val;
@@ -105,7 +114,7 @@ f1(x);
105114
console.log(x);
106115

107116

108-
var y = { x: 9 };
117+
let y = { x: 9 };
109118
function f2(val) {
110119
val.x = val.x + 1;
111120
return val;
@@ -116,10 +125,44 @@ console.log(y);
116125
If you are confused please run the code and then consult the Google for "javaScript pass by value pass by reference"
117126

118127

128+
## Step 5: Scope and Closures
129+
130+
> Let's continue to learn a little more about scope and Closures.
131+
132+
133+
1. Write a function that would allow you to do this:
134+
```js
135+
let addSix = createBase(6);
136+
addSix(10); // returns 16
137+
addSix(21); // returns 27
138+
```
139+
140+
2. You will need to create an HTML document out of the below snippet to run the below code. A hint - the code is syntactically correct but doesn't do what you would expect. Can you see why and fix it?
141+
142+
Don't cheat - but if you get stuck ... http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example
143+
144+
```html
145+
<button id="btn-0">Button 1!</button>
146+
<button id="btn-1">Button 2!</button>
147+
<button id="btn-2">Button 3!</button>
148+
149+
<script type="text/javascript">
150+
151+
let prizes = ['A Unicorn!', 'A Hug!', 'Fresh Laundry!'];
152+
for (let btnNum = 0; btnNum < prizes.length; btnNum++) {
153+
// for each of our buttons, when the user clicks it...
154+
document.getElementById('btn-' + btnNum).onclick = function() {
155+
// tell her what she's won!
156+
alert(prizes[btnNum]);
157+
};
158+
}
159+
</script>
160+
```
161+
119162
__Bonus__: Write a function takes this array `['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c']` and returns an array which only has unique values in it (so it removes the duplicate ones). Make it a 'smart' algorithm that could do it for every array (only strings/number). Try to make it as fast as possible!
120163

121164

122-
## Step 5: Read before next lecture
165+
## Step 6: Read before next lecture
123166

124167
_Deadline Sunday morning_
125168

‎Week6/README.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
```
44
In week seven we will discuss the following topics:
55
• (Object Oriented Programming)
6+
• this
7+
• call
8+
• apply
9+
• bind
610
• Code flow (order of execution)
711
• Async VS Sync
812
```

‎Week7/MAKEME.md

Lines changed: 47 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@
33
```
44
Topics discussed this week:
55
• Object Oriented Programming
6+
• this
7+
• call
8+
• apply
9+
• bind
610
• Code flow (order of execution)
711
• Async VS Sync
812
```
@@ -15,7 +19,7 @@ _Deadline Monday_
1519

1620
Give feedback on the SPA (Github API) and git branching homework of one of you fellow students. Please provide the feedback in an issue.
1721

18-
## Step 3: Issues
22+
## Step 2: Issues
1923

2024
- Solve all your Git issues. DO NO CLOSE AN ISSUE WITHOUT AN EXPLANATION OR CODE COMMIT REFERENCING THAT ISSUE.
2125

@@ -24,31 +28,62 @@ Give feedback on the SPA (Github API) and git branching homework of one of you f
2428

2529
- Fix the issues from the last week and make sure you explain how you fixed the issue in a comment (or commit message)
2630

27-
## Step 3: Some Challenges
31+
## Step 4: Some Challenges
2832

2933
_Deadline Saturday_
3034

3135
Let's practice working with Objects and Arrays. Go to FreeCodeCamp and complete all challenges under "Object Oriented and Functional Programming" and the _first four challenges_ under "Basic Algorithm Scripting", up until 'Find the longest word in a string.'
3236

33-
## Step 4: Some more JavaScript
37+
## Step 5: Async challenge
38+
39+
1. Rewrite the code below to Async:
40+
41+
```js
42+
1.
43+
44+
let sum = calculateSum(2, 6);
45+
console.log(sum);
46+
47+
2.
48+
49+
let results = $.getJSON('http://myapi.com');
50+
showResults(results);
51+
52+
3.
53+
54+
let sum = calculateSum(2, 6);
55+
if (sum > 8) {
56+
console.log('larger than 8');
57+
}
58+
59+
4.
60+
61+
let data = $.getJSON('http://myapi.com');
62+
data = data.map(function (x) { return x * 8; });
63+
64+
writeDataToFile(data);
65+
```
66+
67+
68+
## Step 6: Some more JavaScript
3469

3570
_Deadline Saturday_
3671

3772
Make a website that fetches (= to get) data asynchronously.
3873

39-
1) Create a new website with external js file
74+
1. Create a new website with external js file
4075

41-
2) Add a button (e.g. 'click me') that when clicked `console.logs` 'you clicked me!'
76+
2. Add a button (e.g. 'click me') that when clicked `console.logs` 'you clicked me!'
4277

43-
3) Create a function that fetches from [The Github API](https://developer.github.com/v3/). For example from [this page] (https://api.github.com/orgs/HackYourFuture/repos) (the one we used last week). For help on this check this [SO post](https://stackoverflow.com/questions/247483/http-get-request-in-javascript)
78+
3. Create a function that fetches from [The Github API](https://developer.github.com/v3/). For example from [this page] (https://api.github.com/orgs/HackYourFuture/repos) (the one we used last week). For help on this check this [SO post](https://stackoverflow.com/questions/247483/http-get-request-in-javascript)
4479

45-
4) Display the data that you get from the Github API on your web page.
80+
4. Display the data that you get from the Github API on your web page.
4681

47-
5) Now link the two together: When you click the button -> get the data from the Github API and display it on your website
82+
5. Now link the two together: When you click the button -> get the data from the Github API and display it on your website
4883

49-
6) Make all the repositories link their own page in Github. Use the value of the key: `name` to make this work (hint: Github urls always look like this https://api.github.com/repos/HackYourFuture/[repositoryName] where [repositoryName] would be replaced by the actual `name` of the repository, for example `CommandLine`). Make sure the link opens in a new tab.
84+
6. Make all the repositories link their own page in Github. Use the value of the key: `name` to make this work (hint: Github urls always look like this https://api.github.com/repos/HackYourFuture/[repositoryName] where [repositoryName] would be replaced by the actual `name` of the repository, for example `CommandLine`). Make sure the link opens in a new tab.
5085

51-
7) BONUS: if you look at this:
86+
7. BONUS: if you look at this:
5287

5388
```js
5489
https://api.github.com/repos/HackYourFuture/CommandLine
@@ -57,15 +92,15 @@ https://api.github.com/repos/HackYourFuture/CommandLine
5792
You can see `CommandLine` in the URL. These are called "query parameters" and let us specify in detail what we want from the API. Play around with this. For example you can make two buttons that either get data for a specific repository, JavaScript or Node.js. Or go even more crazy and make users type in a search box 'JavaScript' and then send that to the API by changing the repository.
5893

5994

60-
## Step 5: **Some freeCodeCamp challenges:**
95+
## Step 7: **Some freeCodeCamp challenges:**
6196

6297
1. [Comparisons with the Logical And Operator](https://www.freecodecamp.com/challenges/comparisons-with-the-logical-and-operator)
6398

6499
2. [Record Collection](https://www.freecodecamp.com/challenges/record-collection)
65100

66101
3. [Iterate over Arrays with map](https://www.freecodecamp.com/challenges/iterate-over-arrays-with-map)
67102

68-
## Step 6: Read before next lecture
103+
## Step 8: Read before next lecture
69104

70105
_Deadline Sunday morning_
71106

‎Week7/README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
```
44
In week eight we will discuss the following topics:
55
• Structure for a basic SPA
6-
• XHTTP Requests
6+
• XMLHttpRequests
77
• API calls
88
```
99

@@ -12,7 +12,7 @@ In week eight we will discuss the following topics:
1212
#### APIs
1313
- Read about APIS: https://www.programmableweb.com/api-university/what-are-apis-and-how-do-they-work
1414

15-
#### XHTTP requests
16-
- XHTTP requests: https://www.kirupa.com/html5/making_http_requests_js.htm
15+
#### XMLHttpRequests
16+
- XMLHttpRequests: https://www.kirupa.com/html5/making_http_requests_js.htm
1717

1818
The last one about [promises](https://www.youtube.com/watch?v=WBupia9oidU)...

0 commit comments

Comments
 (0)