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

Skip to content

Commit 340ba72

Browse files
mkruijtmkruijt
committed
changed homework week 5
1 parent 9b34da0 commit 340ba72

File tree

2 files changed

+63
-27
lines changed

2 files changed

+63
-27
lines changed

‎Week5/MAKEME.md

Lines changed: 12 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -95,32 +95,26 @@ Make a website that fetches (= to get) data asynchronously.
9595
9696
2) Add a button (e.g. 'click me') that when clicked `console.logs` 'you clicked me!'
9797
98-
3) Create a function that fetches from [this weather API](https://openweathermap.org/current). For example from [this page] (http://samples.openweathermap.org/data/2.5/weather?q=London,uk&appid=b1b15e88fa797225412429c1c50c122a1). For help on this check this [SO post](https://stackoverflow.com/questions/247483/http-get-request-in-javascript)
98+
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)
9999
100-
4) Display the data that you get from the weather API on your web page.
100+
4) Display the data that you get from the Github API on your web page.
101101
102-
5) Now link the two together: When you click the button -> get the data from the weather API and display it on your website
102+
5) Now link the two together: When you click the button -> get the data from the Github API and display it on your website
103103
104-
6) BONUS: if you look at this:
104+
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.
105105
106-
```
107-
http://samples.openweathermap.org/data/2.5/weather?q=London,uk&appid=b1b15e88fa797225412429c1c50c122a1
108-
```
109-
110-
you can see `?q=London,uk` 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 London or Amsterdam. Or go even more crazy and make users type in a search box 'amsterdam' and then send that to the API by changing the location.
106+
7) BONUS: if you look at this:
111107
108+
```js
109+
https://api.github.com/repos/HackYourFuture/CommandLine
110+
```
112111
112+
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.
113113
114-
<!--
115-
1. For each repository, show (in the right column) who the contributers are. You will need to use the `contributors_url` for this.
116-
2. 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.
117-
-->
118-
>TODO
119114
120-
<!-- 1. Extend the `hyf-movies` app with an input element. This is so the user will be able to type in text which will be later used to search the movie database for corresponding movies.
121115
122-
2. Also place a button near the input element. Capture the click even for this button and couple it to a function which grabs the user input from the text field and which initially logs the user input.
123116
117+
<!---
124118
3. Make a function which takes a single argument. The function should make an XHR request to `localhost:3000/movies?q=[SEARCH_TERM]` 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.
125119
126120
Look at the [documentation of the API](https://github.com/typicode/json-server) and see which other query parameters `json-server` support. Mess around with this to see how changing (or adding) parameters modifies your results.
@@ -129,11 +123,10 @@ you can see `?q=London,uk` in the URL. These are called "query parameters" and l
129123
130124
5. Change the layout of the page so that you only show a list of movie titles on the left side of your page. When the user hovers over a link (or maybe with a click) you want to show the additional information about the movie (poster, year etc.) on the right column.
131125
132-
6. If you have any questions, ask them on slack in the class 10 channel. We want to see more questions as both you and we can learn from them, also try to help each other!
133-
134126
135-
__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!
136127
-->
128+
__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!
129+
137130
138131
139132
```

‎Week6/MAKEME.md

Lines changed: 51 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@
22

33
>[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week6/README.md) you find the readings you have to complete before the fourth lecture.
44
5-
### Git
5+
### Step 0: Feedback
6+
7+
Give feedback on `step 3` of `week 5` to one of your fellow students (do this by creating issues in Github).
8+
9+
### Step 1: Git
610

711
1. Create a branch called `MyBranch` in the repository `MyFirst`.
812

@@ -12,29 +16,68 @@
1216

1317
4. Merge `MyBranch` with the `master` branch
1418

15-
<!-- - Add your github/repositories link to [this slack file](https://slack-files.com/T0EJTUQ87-F5DAMGML5-cd687fd9b6) -->
19+
### Step 2: Fix issues and API
20+
1621
- Fix the issues from the last week and make sure you explain how you fixed the issue in a comment (or commit message)
1722
- Write a script that [polls this API](https://sunrise-sunset.org/api) every 3 seconds and passes a new date every time where date is previous day ++.
1823

19-
### Main assignment
24+
25+
### Step 3: SPA :sweat_drops:
2026
You are going to write a SPA 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).
2127

22-
__Requirements__:
28+
Just like last week:
29+
30+
Make a website that fetches (= to get) data asynchronously.
31+
32+
1) Create a new website with external js file
33+
34+
2) Add a button (e.g. 'click me') that when clicked `console.logs` 'you clicked me!'
35+
36+
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+
38+
4) Display the data that you get from the Github API on your web page.
39+
40+
5) Now link the two together: When you click the button -> get the data from the Github API and display it on your website
41+
42+
Cool we are back where we left of.
43+
44+
6) Take a look at this:
45+
46+
```js
47+
https://api.github.com/repos/HackYourFuture/CommandLine
48+
```
49+
50+
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+
52+
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.
2353
- Make sure you handle user input well. That means you need to think about empty input, and input that doesn't yield any results.
54+
55+
So Github has this really nice documentation :octocat: :
56+
Check these out for exmple
57+
https://developer.github.com/v3/repos/collaborators/
58+
https://developer.github.com/v3/repos/commits/
59+
60+
9) Extend your page with an input element. This is so the user will be able to type in text.
61+
62+
10) For each repository, show (in the right column) who the contributers are. You will need to use the `contributors_url` for this.
63+
64+
!Important
2465
- 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:
2566
- So write a function called `makeRequest` which accepts (at least) the following parameters: `url` and `callback`.
2667
- Make sure your `callback` is called when the request errors or when it sends a response (look at the documentation)
2768
- Your `callback` functions should accept two parameters so it can handle both errors: `err` and `response`.
2869
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).
29-
- Make your functions small and reusable (modular)! That means create seperate functions to handle certain steps.
30-
70+
- Make your functions small and reusable (modular)! That means create separate functions to handle certain steps.
71+
72+
>TODO
73+
3174
1. Make a call to 'https://api.github.com/users/' + userInput (where userInput is a string typed into a searchfield by a user). You can do this by using some of the code of the previous week. Look at the response data.
3275
2. show the users name, avatar image (not the link to the image!) and the number of public repos they have
33-
3. When clicking on the users name, show all the other info you have about that user. When clicking on the avatar image, open their github profile in a new tab. When clicking on the number of public repos, make another API call to 'https://api.github.com/users/user/repos' and build an unorderdered list of the returned repos with just the name of each repo.
76+
3. When clicking on the users name, show all the other info you have about that user. When clicking on the avatar image, open their Github profile in a new tab. When clicking on the number of public repos, make another API call to 'https://api.github.com/users/user/repos' and build an unordered list of the returned repos with just the name of each repo.
3477
4. When hovering over the name of the repo, show on the right side of the page in an `<aside>` element the description of that repo, when it was created, and the number of open issues it has.
3578
5. Change the function your previously wrote that handles the hovering event and add functionality to it that shows the collaborators of that repo. Note: to do this, you will need to make ANOTHER API call to https://api.github.com/repos/user/repo/events and that lists the 3 last events. Show the type of the event and if the type is 'PushEvent' show the commit message. Take a look at this [API call](https://api.github.com/repos/Razpudding/realtime-slack/events) to see some sample data.
3679
6. Make sure that when a user goes to your app, your github account info is loaded. They can then use the search field to find info about other github accounts.
37-
7. BONUS: Look through the data that Github sends back to you on your first API call and think about what other info would be usefull. Add more functionalities to your app like showing how many people starred a repositories or showing the names of the people followed by the current user.
80+
7. Look through the data that Github sends back to you on your first API call and think about what other info would be useful. Add more functionalities to your app like showing how many people starred a repositories or showing the names of the people followed by the current user.
3881

3982
```
4083
How to hand in your homework:

0 commit comments

Comments
 (0)