You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: Week6/MAKEME.md
+1-32Lines changed: 1 addition & 32 deletions
Original file line number
Diff line number
Diff line change
@@ -103,38 +103,7 @@ console.log(y);
103
103
If you are confused please run the code and then consult the Google for "javaScript pass by value pass by reference"
104
104
105
105
106
-
<!-- Write assignment with more fun API -->
107
-
108
-
### Step 4: Some more JavaScript
109
-
110
-
_Deadline Saturday_
111
-
112
-
Make a website that fetches (= to get) data asynchronously.
113
-
114
-
1) Create a new website with external js file
115
-
116
-
2) Add a button (e.g. 'click me') that when clicked `console.logs` 'you clicked me!'
117
-
118
-
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)
119
-
120
-
4) Display the data that you get from the Github API on your web page.
121
-
122
-
5) Now link the two together: When you click the button -> get the data from the Github API and display it on your website
123
-
124
-
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.
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.
133
-
134
-
__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!
Copy file name to clipboardExpand all lines: Week7/MAKEME.md
+8-35Lines changed: 8 additions & 35 deletions
Original file line number
Diff line number
Diff line change
@@ -22,64 +22,37 @@ Give feedback on the SPA (Github API) and git branching homework of one of you f
22
22
23
23
- Fix the issues from the last week and make sure you explain how you fixed the issue in a comment (or commit message)
24
24
25
+
<!-- Write assignment with more fun API -->
25
26
26
-
### Step 4: SPA :sweat_drops:
27
-
You are going to write a SPA (Single Page Application) that uses the [Github API](https://developer.github.com/guides/getting-started/). Make sure that your app uses a logical pattern just like [this codepen](http://codepen.io/Razpudding/pen/MmVpeW).
27
+
### Step 4: Some more JavaScript
28
28
29
-
Just like last week:
29
+
_Deadline Saturday_
30
30
31
31
Make a website that fetches (= to get) data asynchronously.
32
32
33
33
1) Create a new website with external js file
34
34
35
35
2) Add a button (e.g. 'click me') that when clicked `console.logs` 'you clicked me!'
36
36
37
-
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). For help on this check this [SO post](https://stackoverflow.com/questions/247483/http-get-request-in-javascript)
37
+
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)
38
38
39
39
4) Display the data that you get from the Github API on your web page.
40
40
41
41
5) Now link the two together: When you click the button -> get the data from the Github API and display it on your website
42
42
43
-
Cool we are back where we left of.
43
+
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.
7) Make a function which takes a single argument. The function should make an XHR request to `https://api.github.com/repos/HackYourFuture/[SearchTerm]` where the search term will be the argument. This argument will be the input the user has given you, so make sure that when the user clicks the button you call this function with the argument.
51
+
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.
52
52
53
-
8) 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.
53
+
__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!
54
54
55
-
- Make sure you handle user input well. That means you need to think about empty input, and input that doesn't yield any results.
56
55
57
-
So Github has this really nice documentation :octocat: :
9) Extend your page with an input element. This is so the user will be able to type in text.
63
-
64
-
10) For each repository, show (in the right column) who the contributers are. You will need to use the `contributors_url` for this.
65
-
66
-
!Important
67
-
- Do not duplicate code! This is especially important for making requests since we are making multiple ones with different urls and we want to do different actions based on the call we are making. Here are some handles to get you started:
68
-
- So write a function called `makeRequest` which accepts (at least) the following parameters: `url` and `callback`.
69
-
- Make sure your `callback` is called when the request errors or when it sends a response (look at the documentation)
70
-
- Your `callback` functions should accept two parameters so it can handle both errors: `err` and `response`.
71
-
So based on your users actions (input, hovering, clicking) you want to call `makeRequest` with a different `url` and supply it with a function that handles both errors (display an error message to the user for example) and responses (render it correctly, as described below).
72
-
- Make your functions small and reusable (modular)! That means create separate functions to handle certain steps.
73
-
74
-
11) GO WILD
75
-
76
-
Again, check out the Github API documentation to see what kind of magic stuff you can do with it.
77
-
78
-
The assignment is to implement something extra that is not in the assignment :scream: (nice and vague right?)
79
-
80
-
So for example, we have teams in our organization. You can find out who are in there and make a call to 'https://api.github.com/users/' + userInput (where userInput is a string typed into a search field by a user). You can show the users name, avatar image (not the link to the image!) and the number of public repos they have. Or you could make an API call to 'https://api.github.com/users/user/repos' to find out the public repo's they have. Or you can show how many people starred a specific repository.
81
-
82
-
Anyway, endless fun and possibilities. Need inspiration, check out the Github API documentation. Oh and please make it look nice (hint: use the stuff you learned in HTML/CSS)!
Copy file name to clipboardExpand all lines: Week8/MAKEME.md
+62-1Lines changed: 62 additions & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -100,8 +100,69 @@ data = data.map(function (x) { return x * 8; });
100
100
writeDataToFile(data);
101
101
```
102
102
103
+
### Step 5: SPA :sweat_drops:
104
+
You are going to write a SPA (Single Page Application) that uses the [Github API](https://developer.github.com/guides/getting-started/). Make sure that your app uses a logical pattern just like [this codepen](http://codepen.io/Razpudding/pen/MmVpeW).
103
105
104
-
### Step 5: Read before next lecture
106
+
Just like last week:
107
+
108
+
Make a website that fetches (= to get) data asynchronously.
109
+
110
+
1) Create a new website with external js file
111
+
112
+
2) Add a button (e.g. 'click me') that when clicked `console.logs` 'you clicked me!'
113
+
114
+
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). For help on this check this [SO post](https://stackoverflow.com/questions/247483/http-get-request-in-javascript)
115
+
116
+
4) Display the data that you get from the Github API on your web page.
117
+
118
+
5) Now link the two together: When you click the button -> get the data from the Github API and display it on your website
7) Make a function which takes a single argument. The function should make an XHR request to `https://api.github.com/repos/HackYourFuture/[SearchTerm]` where the search term will be the argument. This argument will be the input the user has given you, so make sure that when the user clicks the button you call this function with the argument.
129
+
130
+
8) 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.
131
+
132
+
- Make sure you handle user input well. That means you need to think about empty input, and input that doesn't yield any results.
133
+
134
+
So Github has this really nice documentation :octocat: :
9) Extend your page with an input element. This is so the user will be able to type in text.
140
+
141
+
10) For each repository, show (in the right column) who the contributers are. You will need to use the `contributors_url` for this.
142
+
143
+
!Important
144
+
- Do not duplicate code! This is especially important for making requests since we are making multiple ones with different urls and we want to do different actions based on the call we are making. Here are some handles to get you started:
145
+
- So write a function called `makeRequest` which accepts (at least) the following parameters: `url` and `callback`.
146
+
- Make sure your `callback` is called when the request errors or when it sends a response (look at the documentation)
147
+
- Your `callback` functions should accept two parameters so it can handle both errors: `err` and `response`.
148
+
So based on your users actions (input, hovering, clicking) you want to call `makeRequest` with a different `url` and supply it with a function that handles both errors (display an error message to the user for example) and responses (render it correctly, as described below).
149
+
- Make your functions small and reusable (modular)! That means create separate functions to handle certain steps.
150
+
151
+
11) GO WILD
152
+
153
+
Again, check out the Github API documentation to see what kind of magic stuff you can do with it.
154
+
155
+
The assignment is to implement something extra that is not in the assignment :scream: (nice and vague right?)
156
+
157
+
So for example, we have teams in our organization. You can find out who are in there and make a call to 'https://api.github.com/users/' + userInput (where userInput is a string typed into a search field by a user). You can show the users name, avatar image (not the link to the image!) and the number of public repos they have. Or you could make an API call to 'https://api.github.com/users/user/repos' to find out the public repo's they have. Or you can show how many people starred a specific repository.
158
+
159
+
Anyway, endless fun and possibilities. Need inspiration, check out the Github API documentation. Oh and please make it look nice (hint: use the stuff you learned in HTML/CSS)!
Copy file name to clipboardExpand all lines: Week9/MAKEME.md
+10-24Lines changed: 10 additions & 24 deletions
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,14 @@ Topics discussed this week:
6
6
• Promises
7
7
```
8
8
9
-
## Step 0: Read
9
+
## Step 1: Read
10
+
- If you need to refresh your memory on es6 classes: [es6-classes-in-depth](https://ponyfoo.com/articles/es6-classes-in-depth)
11
+
- Also read this article on scopes & closures: [explaining-javascript-scope-and-closures](https://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/)
12
+
13
+
## Step 2: Feedback
14
+
15
+
- Create at least 2 issues (bug / feature / code improvement) on another teams github repository. Do this in pairs.
16
+
- Solve the issue proposed by another students in your github repo. More info [here](https://hackyourfuture.slack.com/files/michahell/F31BX1XT6/Merging_a_local_branch_into_master)
10
17
11
18
## Step 3: Pair programming promises challenge
12
19
@@ -19,31 +26,10 @@ So please:
19
26
- Follow the instructions in the REAME of the above repository
20
27
- To hand in your homework you make a PR to the existing repository
- If you need to refresh your memory on es6 classes: [es6-classes-in-depth](https://ponyfoo.com/articles/es6-classes-in-depth)
26
-
- Also read this article on scopes & closures: [explaining-javascript-scope-and-closures](https://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/)
27
-
28
-
## Step 2: Feedback
29
-
30
-
- Create at least 2 issues (bug / feature / code improvement) on another teams github repository. Do this in pairs.
31
-
- Solve the issue proposed by another students in your github repo. More info [here](https://hackyourfuture.slack.com/files/michahell/F31BX1XT6/Merging_a_local_branch_into_master)
32
-
33
-
### Step 3: Read before next lecture
29
+
### Step 4: Read before next lecture
34
30
35
31
_Deadline Sunday morning_
36
32
37
33
Go trough the reading material in the [README.md](/Week9/README.md) to prepare for your next class
38
34
39
-
<!-- ## Step 3: Pair programming homework/tdd
40
-
41
-
You will complete the TicTacToe game we started building in class. The code we build in class is available here: https://github.com/HackYourFuture/TicTacToeTDD.
42
-
One of your teammates should fork the above repo. Work in this repository *together* so you can see who wrote which code. Make a Pull Request to hand in this part of the homework. -->
43
-
44
-
<!-- rewatch the Hangouts session here: https://www.youtube.com/watch?v=oc9ogCJz9rYs -->
45
-
46
-
>Upload your homework in your "hyf-javascript3" Github repository. Make sure to create a new folder "week3" first.
47
-
Upload your homework files inside the week3 folder and write a description for this “commit”.
48
-
Your hyf-javascript3/week3 should now contain all your homework files.
49
-
Place the link to your repository folder in Trello.
35
+
>To hand in your homework, make a pull request to the original repository you forked from. Remember, our master branches are protected, you cannot push to a directly cloned repository you first have to make a fork to your own Github.
0 commit comments