dist/

"editor.detectIndentation": false,

"editor.tabSize": 2,

"cSpell.words": [

"tabindex"

]

}

<small>Figure 1. Example User Interface using [Material Design](https://material.io/guidelines/) principles.</small>

The files that make up the application are located in the `homework` folder. It contains the following files:

Although you should only modify files in the `homework` folder, we recommend that you always open the `JavaScript3` folder rather than directly opening the `homework` folder in VSCode. The `JavaScript3` folder contains the actual git repository and the configuration files required by the installed tools.

3. When the user changes the selection, the information in the web page should be refreshed for the newly selected repository.

4. You should be able to click on the repository name of the selected repository to open a new browser tab with the GitHub page for that repository.

5. You should be able to click on a contributor to open a new browser tab with the GitHub page for that contributor.

7. Your UI should be responsive. Try it with Chrome Developer Tools in the browser, using a mobile phone format and a tablet format, portrait and landscape. If necessary, you can also do this work in week 2.


You will continue to work on the files `index.js` and (possibly) `style.css`.

- Complete your GitHub app code from the previous week, if needed, to meet the requirements from that week's assignment.

- Beautify your app's styling.

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

This week you will work with all JavaScript files in the `src` folder. The assignment consists of two parts:

**Instructions:**

1. Refactor all `.then()` and `.catch()` methods with `async`/`await` and `try...catch`.

2. Make sure that your error handling code still works. See the week2 MAKEME on how to force an error response from GitHub.

**_Deadline Saturday_**

This final assignment requires you to go the extra mile and master Object Oriented Programming and ES6 classes.

In this assignment you need to redistribute and adapt the code from `index.js` to the files `App.js`, `Repository.js` and `Contributor.js`. You do not need to modify `Util.js`.

The `App.js`, `Repository.js` and `Contributor.js` files each contain skeleton code that you can use to migrate portions of your code from `index.js` to.

- HYF fundamental: [ES6 Classes](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/oop_classes.md#es6-classes)

- More on ES6 classes: [ES6 Classes in Depth](https://ponyfoo.com/articles/es6-classes-in-depth)

Please review the material from the HTML/CSS module: [Get familiar with Accessible Rich Internet Applications (ARIA)](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1#get-familiar-with-accessible-rich-internet-applications-aria).

For the GitHub application ARIA-compliance means that the Contributors list should either be a native HTML list (i.e. using `ul` and `li` elements) or otherwise marked with an appropriate ARIA **role**. Furthermore, a user should be able to navigate through all interactive elements using the keyboard (e.g., using the **Tab** key). Pressing **Enter** on such an element should be equivalent to clicking the mouse.

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.

class App {

constructor(url) {

this.initialize(url);

}

// 2. Make an initial XMLHttpRequest using Util.fetchJSON() to populate your <select> element

const root = document.getElementById('root');

try {

const repos = await Util.fetchJSON(url);

}

}

/**

try {

const contributors = await repo.fetchContributors();

contributors

.map(contributor => new Contributor(contributor))

}

/**

renderError(error) {

}

const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';

window.onload = () => new App(HYF_REPOS_URL);

xhr.open('GET', url);

xhr.responseType = 'json';

xhr.onload = () => {

resolve(xhr.response);

} else {

reject(new Error(`Network error: ${xhr.status} - ${xhr.statusText}`));