|1.|• Structure for a basic SPA (Single Page Application) <br>• [XMLHttpRequests](../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md) <br>• API calls|[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week2/MAKEME.md)|

|2.|• [Promises](../../../fundamentals/blob/master/fundamentals/promises.md)<br> • (re)writing data structures (in JSON) <br>• Async vs Sync <br>• [Event Loop (order of execution)](../../../fundamentals/blob/master/fundamentals/event_loop.md) |[Reading Week 2](/Week3/README.md)|[Homework Week 2](/Week3/MAKEME.md)|

|3.|• [Object Oriented Programming and Classes](../../../fundamentals/blob/master/fundamentals/oop_classes.md)<br>• [The `this` keyword](../../../fundamentals/blob/master/fundamentals/this.md) |[Reading Week 3](/Week1/README.md)|[Homework Week 3](/Week1/MAKEME.md)|

_Deadline Saturday_

- You should be able to select a repository from a list of available repositories.

- The application should display high-level information about the selected repository and show a list of its contributors.

1. Create this application in the `week1` folder of your `hyf-javascript1` repo. Your application should at minimum consist of the files `index.html`, `style.css` and `app.js`.

2. Your `index.html` file should load the `style.css` and `app.js` files, using the appropriate HTML tags.

3. The `body` of your `index.html` should contain a single `div` element like this: `<div id="root"></div>`.

4. All other HTML elements should be generated programmatically by your `app.js` file and ultimately be hanging of the root `div` element.

5. Implement the repository selection list by means of an HTML [\<select\>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) element.

You can obtain a list of HYF repositories through this API endpoint ([What is an API Endpoint?](https://teamtreehouse.com/community/what-is-an-api-endpoint)):

GitHub API documentation: [List organization repositories](https://developer.github.com/v3/repos/#list-organization-repositories)

Note the query string `?per_page=100`. If you don't specify this query string you will only get the first 30 repositories (the default `per_page` is 30 and HYF has more than 30 - but less than 100).

You can get information about a specific repository through this API endpoint:

You should replace `[repositoryName]` with the actual name of the repository.

GitHub API documentation: [Get](https://developer.github.com/v3/repos/#get)

The response object that is returned by GitHub from the request to get repository information includes a property with the `contributors_url`. Use the value of this property to make a new request to GitHub to obtain a list of contributors.

Note that, as a result of selecting a repository from the `\<select>` element, your code must make two XMLHttpRequests, one after the other:

1. A first request to obtain repository information.

2. A second request using the `contributors_url` obtained from (1) to get a list of contributor information.

Both request must be done asynchronously.

Making two XMLHttpRequests in a row, where the second requests depends on the response of the first request is part of the assignment. While it is possible to figure out beforehand what the value of the `contributors_url` will be (by carefully reading the documentation), and subsequently make two independent XMLHttpRequests, this is not what is expected.

- Make all the repositories link to 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.

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

- Write a function called `fetchJSON` (or copy from the lecture code) 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 when a user selects a repository from the list you want to call `fetchJSON` 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 HTML elements in your page).

- When the user changes the selected repository, any existing repository information in your page should be cleared before displaying the new information.

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

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

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

_BONUS_ : Code Kata Race

Go trough the reading material in the [README.md](/Week2/README.md) to prepare for your next class.

Make sure that your commit message are meaningful.

Place the link to your repository folder in Trello.

- Read about APIS: https://www.programmableweb.com/api-university/what-are-apis-and-how-do-they-work

- HYF fundamental: [XMLHttpRequest](../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md)

- [Making HTTP Requests in JavaScript](https://www.kirupa.com/html5/making_http_requests_js.htm)