Skip to content

Commit 11098ad

Browse files
vincentselsvincentsels
committed
Merge branch 'master' into demo
2 parents 9abb736 + 2b8aa08 commit 11098ad

7 files changed

Lines changed: 142 additions & 32 deletions

File tree

‎Week2/JS3-2.key‎

1.91 MB
Binary file not shown.

‎Week2/JS3-2.pdf‎

113 KB
Binary file not shown.

‎Week2/MAKEME.md‎

Lines changed: 45 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,70 @@
11
# Homework Week 2
22

3-
```
4-
Topics discussed this week:
5-
• Async vs Sync
6-
• Event Loop (order of execution)
7-
• Promises
8-
```
9-
10-
## Step 1: Read
3+
## Part 1 <small>- Reading material</small>
114

12-
- Read this article on scopes & closures: [explaining-javascript-scope-and-closures](https://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/)
5+
- [ ] Read this article on scopes & closures: [Explaining javascript scope and closures](https://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/)
136

14-
- If you are still not completely clear on promises, here are some additional resources :ring:
7+
- [ ] If you are still not completely clear on promises, here are some additional resources:
158

169
- [Google's post about Promises](https://developers.google.com/web/fundamentals/getting-started/primers/promises)
1710
- [A nice article from David Walsh](https://davidwalsh.name/promises)
1811
- [A real life example](https://github.com/mdn/js-examples/blob/master/promises-test/index.html)
1912
- [stackoverflow](http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript)
2013
- YouTube: [promises](https://www.youtube.com/watch?v=WBupia9oidU)
2114

22-
## Step 2: Implement requested PR changes
15+
## Part 2 <small>- Finish last week's homework</small>
16+
**Deadline: Tuesday evening**
2317

24-
- Fix Requested Changes (if any) on the Pull Request.
18+
This week's homework builds upon last week's homework. So if you haven't already, finish last week's homework first, by following the [complete guide](../week1/MAKEME.md), step-by-step. If you want some intermediate comments/review after finishing that, go a head and already send it in with a pull request, as described there. Or you may immediately add this week's work.
2519

26-
## Step 3: Convert callbacks to promises
20+
## Part 3 <small>- Setup for this week</small>
21+
**Deadline: Thursday evening**
2722

28-
**_Deadline Thursday_**
23+
Create a new branch based on the `week1` branch:
2924

30-
### 3.1 Preparation
31-
32-
The homework for week 2 will build on the work you did in week 1. You will create a new branch based on the `week1` branch.
33-
34-
1. Make sure that you committed all changes in the week 1 version of your homework.
35-
2. Create a new `week2` branch:
25+
- [ ] Make sure that you committed all changes in the week 1 version of your homework.
26+
- [ ] Create a new `week2` branch:
3627

3728
```
3829
git checkout -b week2
3930
```
4031

41-
### 3.2 Assignment
32+
## Part 4 <small>- This week's assignment</small>
33+
**Deadline: Tursday evening**
34+
35+
You will continue to work on the files `index.js` and (possibly) `main.css`.
4236

43-
You will continue to work on the files `index.js` and (possibly) `style.css`.
37+
- [ ] Upon selecting a repository, also load that repository's list of **contributers**, and display it, at least using the contributor's profile picture, name, and amout of repositories.
38+
> *Hint*: As we saw last week, the link to the repo's contributors is a property of a repo.
4439
45-
- Complete your GitHub app code from the previous week, if needed, to meet the requirements from that week's assignment.
46-
- Replace all asynchronous callbacks (e.g. as used with XMLHttpRequest) by ES6 promises.
47-
- Beautify your app's styling.
48-
- If not yet completed in week 1, make your app responsive (use CSS media queries and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)).
40+
- [ ] Clicking on the user should open this user's GitHub home page in a new tab.
41+
> *Hint*: `target`
4942
50-
### 3.3 Handing in your homework
43+
- [ ] When loading the repositories initially, and when loading the contributors after selecting a repo: display a 'loading' text or 'spinner'. Remove it once the data is loaded and displayed (or when an error occurs).
44+
> *Hint*: In Chrome DevTools, in the Network tab, you can simulate a 'Slow 3G' connection to test your loading text/spinner.
45+
> ![Simulate slow internet](assets/simulate_slow.png)
46+
47+
- [ ] When any error occurs - either when [fetching](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API) the repos or when loading contributers, clearly display a nice error message somewhere on the page.
48+
> *Hints*:
49+
>
50+
>- `fetch` will not `reject` on a 404; not even on a 500; it will actually *succeed* (resolve). You have to check the result's `status` to see whether its response has a statuscode in the 200-range.
51+
>
52+
> Give it a try - this will actually log the success!
53+
>
54+
> ```
55+
> fetch('this-isnt-even-a-proper-url')
56+
> .then((resp) => console.log('success', resp))
57+
> .catch((err) => console.error('error', err));
58+
> ```
59+
> `fetch` will only *reject* when there is really a network error, like when you're offline.
60+
>- You can re-use a function you pass as callback to `then`!
61+
>- Test this by changing your fetch urls, and by simulating having no internet. You can do this in DevTools, in the Network tab:
62+
> ![Simulate offline](assets/simulate_offline.png)
63+
64+
- [ ] If not yet completed in week 1, make your app responsive. Use CSS media queries and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)).
65+
66+
## Part 5 <small>- Handing in your homework</small>
67+
**Deadline: Thursday evening**
5168
5269
If necessary, review the instructions how to [Hand in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md) using GitHub pull request.
5370
@@ -78,8 +95,4 @@ If the answer is 'yes' to the preceding questions you are ready to follow these
7895
Note:
7996
8097
1. Please remove all redundant, commented-out code and console.log's from your files before pushing your homework as finished. There is no need for your mentors to review this stuff.
81-
2. Please make sure your code is well-formatted and follows the recommended naming conventions.
82-
83-
## Step 4: Read before next lecture
84-
85-
Go through the reading material in the [README.md](../Week3/README.md) to prepare for your next class.
98+
2. Please make sure your code is well-formatted and follows the recommended naming conventions.

‎Week2/assets/simulate_offline.png‎

30.6 KB
Loading

‎Week2/assets/simulate_slow.png‎

13.1 KB
Loading

‎Week2/exercise1.js‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
2+
const arrayOfWords = ['cucumber', 'tomatos', 'avocado']
3+
const complicatedArray = ['cucumber', 44, true]
4+
5+
const makeAllCaps = (array) => {
6+
return new Promise((resolve, reject) => {
7+
8+
let capsArray = array.map(word => {
9+
10+
if(typeof word === 'string'){
11+
return word.toUpperCase()
12+
} else {
13+
reject('Error: Not all items in the array are strings!')
14+
}
15+
})
16+
resolve(capsArray)
17+
})
18+
}
19+
20+
21+
const sortWords = (array) => {
22+
return new Promise((resolve, reject) => {
23+
if(array) {
24+
array.forEach((el) => {
25+
if(typeof el !== 'string'){
26+
reject('Error: Not all items in the array are strings!')
27+
}
28+
})
29+
resolve(array.sort());
30+
} else {
31+
reject('Error: Something went wrong with sorting words.')
32+
}
33+
})
34+
}
35+
36+
37+
makeAllCaps(arrayOfWords)
38+
.then(sortWords)
39+
.then((result) => console.log(result))
40+
.catch(error => console.log(error))
41+
42+
makeAllCaps(complicatedArray)
43+
.then(sortWords)
44+
.then((result) => console.log(result))
45+
.catch(error => console.log(error))
46+
47+

‎Week2/exercise2.js‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
const urls = [
2+
'https://jsonplaceholder.typicode.com/todos/1',
3+
'https://jsonplaceholder.typicode.com/todos/2',
4+
'https://jsonplaceholder.typicode.com/todos/3',
5+
'https://jsonplaceholder.typicode.com/todos/4',
6+
'https://jsonplaceholder.typicode.com/todos/5',
7+
]
8+
9+
// BASIC VERSION:
10+
11+
12+
// Start off with a promise that always resolves
13+
var sequence = Promise.resolve();
14+
15+
// Loop through our chapter urls
16+
story.chapterUrls.forEach((chapterUrl) => {
17+
// Add these actions to the end of the sequence
18+
sequence = sequence.then(() => {
19+
return getJSON(chapterUrl);
20+
}).then((chapter) => {
21+
addHtmlToPage(chapter.html);
22+
});
23+
})
24+
25+
26+
27+
// =============================== //
28+
29+
30+
31+
32+
// CLEAN VERSION:
33+
34+
35+
urls.reduce(
36+
(sequence, chapterUrl) => {
37+
// Add these actions to the end of the sequence
38+
return sequence.then(() => {
39+
return getJSON(chapterUrl);
40+
}).then((chapter) => {
41+
addHtmlToPage(chapter.html);
42+
});
43+
},
44+
Promise.resolve()
45+
);
46+
47+
48+
function getJSON(url) {
49+
return fetch(url).then(JSON.parse);
50+
}

0 commit comments

Comments
 (0)