|3.|• Git work flow :smiling_imp:<br>• Advanced data types [Objects] <br>• Conditions <br>• Statements vs Expressions<br> • Loops (for/while)<br>• Functions |[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|[Review](/Week2/REVIEW.md)|

|4.|• Capturing user input <br>• Basic DOM manipulations[img src, innerHTML] <br>• Code debugging using the browser <br>• Code commenting <br>• Structuring code files |[Reading Week 4](/Week4/README.md)|[JS](/Week4/MAKEME.md)|Review|

:star: You can also already go through the [review](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md) of the upcoming lecture.

6\. Arrays!

7\. More strings

_Deadline Saturday_

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.'

:star: Additional resources and review: [here](/Week3/REVIEW.md):star:

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

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.

[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).

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

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).

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)

Cool we are back where we left of.

6) Take a look at this:

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.

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.

- Make sure you handle user input well. That means you need to think about empty input, and input that doesn't yield any results.

So Github has this really nice documentation :octocat: :

Check these out for example

9) Extend your page with an input element. This is so the user will be able to type in text.

10) For each repository, show (in the right column) who the contributers are. You will need to use the `contributors_url` for this.

!Important

- 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:

- So write a function called `makeRequest` which accepts (at least) the following parameters: `url` and `callback`.

- Make sure your `callback` is called when the request errors or when it sends a response (look at the documentation)

- Your `callback` functions should accept two parameters so it can handle both errors: `err` and `response`.

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).

- Make your functions small and reusable (modular)! That means create separate functions to handle certain steps.

11) GO WILD

Again, check out the Github API documentation to see what kind of magic stuff you can do with it.

The assignment is to implement something extra that is not in the assignment :scream: (nice and vague right?)

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.

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)!