diff --git a/.gitignore b/.gitignore
index 6c589c2f8..5d412928b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,61 +1,61 @@
-# Logs
-logs
-*.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (http://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Typescript v1 declaration files
-typings/
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variables file
-.env
-
-.netlify
-dist/
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+.netlify
+dist/
diff --git a/.vscode/settings.json b/.vscode/settings.json
index f7a55df12..36d993f4f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -1,10 +1,10 @@
-{
- "editor.formatOnSave": true,
- "editor.formatOnType": true,
- "editor.formatOnPaste": true,
- "editor.detectIndentation": false,
- "editor.tabSize": 2,
- "cSpell.words": [
- "tabindex"
- ]
+{
+ "editor.formatOnSave": true,
+ "editor.formatOnType": true,
+ "editor.formatOnPaste": true,
+ "editor.detectIndentation": false,
+ "editor.tabSize": 2,
+ "cSpell.words": [
+ "tabindex"
+ ]
}
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
index 79285a5eb..00cc5c9e4 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,3 +1,3 @@
-This work is licensed under the Creative Commons Attribution 4.0 International License.
-To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/
+This work is licensed under the Creative Commons Attribution 4.0 International License.
+To view a copy of this license, visit http://creativecommons.org/licenses/by/4.0/
or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
\ No newline at end of file
diff --git a/README.md b/README.md
index fa97dad57..9c77de7e1 100644
--- a/README.md
+++ b/README.md
@@ -1,23 +1,23 @@
-> Please help us improve and share your feedback! If you find better tutorials
-or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript3/pulls).
-
-# HackYourFuture JavaScript 3
-
-Here you can find course content and homework for the JavaScript3 modules
-
-|Week|Topic|Read|Homework|
-|----|-----|----|--------|
-|1.|• Structure for a basic SPA (Single Page Application) • [XMLHttpRequests](../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md) • API calls|[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)|
-|2.|• [Event Loop (order of execution)](../../../fundamentals/blob/master/fundamentals/event_loop.md) • [Promises](../../../fundamentals/blob/master/fundamentals/promises.md)|[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|
-|3.|• [try...catch](../../../fundamentals/blob/master/fundamentals/try_catch.md) • [async/await](../../../fundamentals/blob/master/fundamentals/async_await.md) • [The `this` keyword](../../../fundamentals/blob/master/fundamentals/this.md) • call, apply, bind • [Object Oriented Programming and ES6 Classes](../../../fundamentals/blob/master/fundamentals/oop_classes.md)|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|
-
-__Kind note:__
-
-We expect you to __always__ come prepared to the class on Sunday.
-
-### Overall
-A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](../../../fundamentals/blob/master/README.md) and research/ ask for help (Slack!) with the concepts that are not entirely clear.
-
-*The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)*
-
- This work is licensed under a Creative Commons Attribution 4.0 International License.
+> Please help us improve and share your feedback! If you find better tutorials
+or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript3/pulls).
+
+# HackYourFuture JavaScript 3
+
+Here you can find course content and homework for the JavaScript3 modules
+
+|Week|Topic|Read|Homework|
+|----|-----|----|--------|
+|1.|• Structure for a basic SPA (Single Page Application) • [XMLHttpRequests](../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md) • API calls|[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)|
+|2.|• [Event Loop (order of execution)](../../../fundamentals/blob/master/fundamentals/event_loop.md) • [Promises](../../../fundamentals/blob/master/fundamentals/promises.md)|[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|
+|3.|• [try...catch](../../../fundamentals/blob/master/fundamentals/try_catch.md) • [async/await](../../../fundamentals/blob/master/fundamentals/async_await.md) • [The `this` keyword](../../../fundamentals/blob/master/fundamentals/this.md) • call, apply, bind • [Object Oriented Programming and ES6 Classes](../../../fundamentals/blob/master/fundamentals/oop_classes.md)|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|
+
+__Kind note:__
+
+We expect you to __always__ come prepared to the class on Sunday.
+
+### Overall
+A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](../../../fundamentals/blob/master/README.md) and research/ ask for help (Slack!) with the concepts that are not entirely clear.
+
+*The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)*
+
+ This work is licensed under a Creative Commons Attribution 4.0 International License.
diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md
index 76498c97d..3a190b0cd 100644
--- a/Week1/MAKEME.md
+++ b/Week1/MAKEME.md
@@ -1,229 +1,229 @@
-# Homework Week 1
-
-```
-Topics discussed this week:
-• Structure for a basic SPA
-• XMLHttpRequests
-• API calls
-```
-
->[Here](/Week3/README.md) you find the readings you have to complete before the ninth lecture.
-
-## Step 1: Feedback
-
-**_Deadline Monday_**
-
-Please provide feedback on last week's homework from a fellow student as a GitHub issue.
-
-## Step 2: Single Page Application :sweat_drops:
-
-**_Deadline Thursday_**
-
-_This homework is more extensive and challenging than previous homework! Please read the instructions below carefully and follow them with great attention to detail. Start this homework as soon as you can and allow time for discussion and questions (slack!)._
-
-### 2.1 Introduction
-
-You are going to write a _Single Page Application_ (SPA) that uses the [GitHub API](https://developer.github.com/guides/getting-started/).
-
-This application should display information about the available [HYF GitHub repositories](https://github.com/hackyourfuture). The functionalities we would like to see in your application are as follows:
-
-- The user 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.
-- When clicking on the name of the selected repository the GitHub page for the corresponding repository should be opened in a new browser tab.
-- When clicking on a contributor, the GitHub page for the contributor should be opened in a new browser tab.
-
-Figure 1 below shows an example of what your application could look like. Note that this is just an example. If you find it boring or unimaginative, please improve on it! On the other hand, a simpler version is OK too, so long as you implement the expected functionality.
-
-
-
-In this assignment you will built upon some existing code that is already pre-written by your teachers. Your homework consist of writing the code to make the application work as requested per week.
-
-Figure 1. Example User Interface using [Material Design](https://material.io/guidelines/) principles.
-
-A live version of this application can be found here: http://hyf-github.netlify.com/
-
-### 2.2 The GitHub API
-
-#### 2.2.1 Get a list of HYF repositories
-
-You can fetch a list of HYF repositories through this API endpoint ([What is an API Endpoint?](https://teamtreehouse.com/community/what-is-an-api-endpoint)):
-
-```
-https://api.github.com/orgs/HackYourFuture/repos?per_page=100
-```
-
-If you open this URL in the browser (_try it!_) you will receive JSON data about the available HYF repositories. This is the data that you will need to work with in this assignment.
-
-Note the query string `?per_page=100` in the above URL. If you don't specify this query string you will only get the first 30 repositories (the default `per_page` is 30). HackYourFuture has more than 30 repositories but less than 100.
-
-The returned JSON data contains some basic information about each repository, such as `name`, `full_name`, `description` etc. There are also many properties that contain URLs that can be used to obtain detail information about certain aspects of the repository.
-
-#### 2.2.2 Get contributor information for a repository
-
-The JSON data that is returned from the initial request to get repository information includes a property named `contributors_url`. Use the value of this property to fetch a list of contributors.
-
-#### 2.2.3 GitHub API documentation
-
-You can find detailed information about the GitHub API by means of the link listed below. However, the documentation is very extensive and not easy to digest. For this homework it is not necessary to study the GitHub API documentation. We provide the link here for completeness.
-
-> GitHub API documentation: https://developer.github.com/v3/
-
-### 2.3 Preparation
-
-You will be working on this same application during the next three weeks. For each week you will need to create a new Git branch, as listed in the Table 1 below.
-
-| Week | Branch | Assignment |
-|:----:|--------|------------|
-| 1 | `week1` | Create a basic application using callbacks to handle network requests. |
-| 2 | `week2` | - Refactor the callbacks to promises. - Make the UI responsive.|
-| 3 | `week3` | - Refactor the application to use ES6 Classes and async/await. - Make the app ARIA-compliant. |
-
-Table 1. Homework schedule
-
-**Instructions**
-
-1. Fork the JavaScript3 repository (_this repository_) to your own GitHub account.
-2. Clone the fork to your laptop.
-3. Open the `homework` folder inside the cloned repository in VSCode.
-4. Create a new branch for the week 1 homework with the following command:
-
- ```
- git checkout -b week1
- ```
-
-### 2.4 Code Overview
-
-The files that make up the application are located in the `src` folder. It contains the following files:
-
-| Filename | Description |
-|------------------|-------------|
-| ~~`App.js`~~ | Not used in week 1 and 2. |
-| ~~`Contributor.js`~~ | Not used in week 1 and 2. |
-| `hyf.png` | Contains the HackYourFuture logo. |
-| `index.html` | The application's HTML file. |
-| `index.js` | A starter JavaScript file. |
-| ~~`Repository.js`~~ | Not used in week 1 and 2. |
-| `style.css` | A starter CSS file. |
-| ~~`Util.js`~~ | Not used in week 1 and 2. |
-
-In week 1, you should only modify `index.js` and `style.css`.
-
-_**Do not modify any other files at this time!**_
-
-#### 2.4.1 A first examination
-
-1. Open `index.html` and examine its contents (but don't modify anything). Notice that the HTML `body` looks like this:
-
- ```html
-
-
-
-
- ```
-
- The `body` tag contains a single `div` to which you will need to dynamically append HTML elements through your JavaScript code in `index.js`.
-
-2. Open `index.js`. This file contains a starter set of code for you to expand. It contains the following three functions:
-
- | Function | Description |
- |----------|-------------|
- | `fetchJSON` | Uses `XMLHttpRequest` to fetch JSON data from an API end point. This function uses an asynchronous callback. |
- | `createAndAppend` | A utility function for easily creating and appending HTML elements. |
- | `main` | Contains the start-up code for the application. |
-
- `index.js` also contains a constant with the URL for the HYF repositories as listed in section 2.2.1:
-
- ```js
- const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
- ```
-
-3. Open the `index.html` file in your browser. Notice that it produces the same JSON output that you saw previously when you opened the URL directly in the browser.
-
-4. Review the `main()` function in `index.js` and examine how this code renders the JSON output in the browser by means of a `pre` HTML element (for demonstration purposes).
-
-### 2.5 Week 1 Assignment
-
-The assignment is to produce an application similar to the one illustrated in Figure 1 above.
-
-It should include the following components:
-
-1. An HTML `select` element from which the user can select a HYF repository. This `select` element must be populated with `option` elements, one for each HYF repository.
-2. A left-hand column that displays basic information about the selected repository.
-3. A right-hand column that displays a list of contributors to the repository.
-
- >In case you run out of time, you can also do the contributors list in week 2.
-
-**Functional Requirements:**
-
-1. The list of repositories in the `select` element should be sorted (case-insensitive) on repository name.
-2. At start-up your application should display information about the first repository as displayed in the `select` element.
-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.
-6. You should render network errors to the DOM (see Figure 2 below for an example). Do not use `console.log` as regular users will not see the console output.
-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.
-
-
-
-Figure 2. Rendering of network errors.
-
-**Code modifications:**
-
-**`index.js`**
-
-- Add new functions and modify function `main()` as you see fit. It is not likely that you will need to modify `fetchJSON()` and `createAndAppend()`.
-
-**`style.css`**
-
-- Add your own styling.
-
-**Hints:**
-
-- Add one `option` element per repository to the `select` element, where each `option` element has the array index of the repository as its `value` attribute and the name of the repository as its text content:
-
- ```html
-
- ```
-
-
-- To sort the list repositories use [`.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) and [`.localeCompare()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare).
-
-- Use CSS media queries and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to make the UI responsive.
-
-- To force a `404` network error so that you can test the rendering of errors, change the URL to make an invalid GitHub request, e.g. append an `x` to `orgs`: `orgsx`.
-
-
-### 2.5 Handing in your homework
-
-- Have you removed all commented out code (should never be present in a PR)?
-- Have you used `const` and `let` and avoided `var`?
-- Do the variable, function and argument names you created follow the [Naming Conventions](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md)?
-- Is your code well-formatted (see [Code Formatting](../../../../fundamentals/blob/master/fundamentals/code_formatting.md))?
-- Have you resolved all issues flagged by ESLint and the spell checker (no wavy red and green underlines in VSCode)?
-
-If the answer is 'yes' to all preceding questions you are ready to follow these instructions:
-
-1. Push your `week1` branch to GitHub:
-
- ```
- git push -u origin week1
- ```
-
-2. Create a pull request for your `week1` branch.
-
----
-
-_BONUS_ : Code Kata Race
-
-- [Codewars](https://www.codewars.com/collections/hyf-homework-number-2)
-
-
-## Step 3: Read before next lecture
-
-_Deadline Sunday morning_
-
-Go through the reading material in the [README.md](/Week2/README.md) to prepare for your next class.
+# Homework Week 1
+
+```
+Topics discussed this week:
+• Structure for a basic SPA
+• XMLHttpRequests
+• API calls
+```
+
+>[Here](/Week3/README.md) you find the readings you have to complete before the ninth lecture.
+
+## Step 1: Feedback
+
+**_Deadline Monday_**
+
+Please provide feedback on last week's homework from a fellow student as a GitHub issue.
+
+## Step 2: Single Page Application :sweat_drops:
+
+**_Deadline Thursday_**
+
+_This homework is more extensive and challenging than previous homework! Please read the instructions below carefully and follow them with great attention to detail. Start this homework as soon as you can and allow time for discussion and questions (slack!)._
+
+### 2.1 Introduction
+
+You are going to write a _Single Page Application_ (SPA) that uses the [GitHub API](https://developer.github.com/guides/getting-started/).
+
+This application should display information about the available [HYF GitHub repositories](https://github.com/hackyourfuture). The functionalities we would like to see in your application are as follows:
+
+- The user 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.
+- When clicking on the name of the selected repository the GitHub page for the corresponding repository should be opened in a new browser tab.
+- When clicking on a contributor, the GitHub page for the contributor should be opened in a new browser tab.
+
+Figure 1 below shows an example of what your application could look like. Note that this is just an example. If you find it boring or unimaginative, please improve on it! On the other hand, a simpler version is OK too, so long as you implement the expected functionality.
+
+
+
+In this assignment you will built upon some existing code that is already pre-written by your teachers. Your homework consist of writing the code to make the application work as requested per week.
+
+Figure 1. Example User Interface using [Material Design](https://material.io/guidelines/) principles.
+
+A live version of this application can be found here: http://hyf-github.netlify.com/
+
+### 2.2 The GitHub API
+
+#### 2.2.1 Get a list of HYF repositories
+
+You can fetch a list of HYF repositories through this API endpoint ([What is an API Endpoint?](https://teamtreehouse.com/community/what-is-an-api-endpoint)):
+
+```
+https://api.github.com/orgs/HackYourFuture/repos?per_page=100
+```
+
+If you open this URL in the browser (_try it!_) you will receive JSON data about the available HYF repositories. This is the data that you will need to work with in this assignment.
+
+Note the query string `?per_page=100` in the above URL. If you don't specify this query string you will only get the first 30 repositories (the default `per_page` is 30). HackYourFuture has more than 30 repositories but less than 100.
+
+The returned JSON data contains some basic information about each repository, such as `name`, `full_name`, `description` etc. There are also many properties that contain URLs that can be used to obtain detail information about certain aspects of the repository.
+
+#### 2.2.2 Get contributor information for a repository
+
+The JSON data that is returned from the initial request to get repository information includes a property named `contributors_url`. Use the value of this property to fetch a list of contributors.
+
+#### 2.2.3 GitHub API documentation
+
+You can find detailed information about the GitHub API by means of the link listed below. However, the documentation is very extensive and not easy to digest. For this homework it is not necessary to study the GitHub API documentation. We provide the link here for completeness.
+
+> GitHub API documentation: https://developer.github.com/v3/
+
+### 2.3 Preparation
+
+You will be working on this same application during the next three weeks. For each week you will need to create a new Git branch, as listed in the Table 1 below.
+
+| Week | Branch | Assignment |
+|:----:|--------|------------|
+| 1 | `week1` | Create a basic application using callbacks to handle network requests. |
+| 2 | `week2` | - Refactor the callbacks to promises. - Make the UI responsive.|
+| 3 | `week3` | - Refactor the application to use ES6 Classes and async/await. - Make the app ARIA-compliant. |
+
+Table 1. Homework schedule
+
+**Instructions**
+
+1. Fork the JavaScript3 repository (_this repository_) to your own GitHub account.
+2. Clone the fork to your laptop.
+3. Open the `homework` folder inside the cloned repository in VSCode.
+4. Create a new branch for the week 1 homework with the following command:
+
+ ```
+ git checkout -b week1
+ ```
+
+### 2.4 Code Overview
+
+The files that make up the application are located in the `src` folder. It contains the following files:
+
+| Filename | Description |
+|------------------|-------------|
+| ~~`App.js`~~ | Not used in week 1 and 2. |
+| ~~`Contributor.js`~~ | Not used in week 1 and 2. |
+| `hyf.png` | Contains the HackYourFuture logo. |
+| `index.html` | The application's HTML file. |
+| `index.js` | A starter JavaScript file. |
+| ~~`Repository.js`~~ | Not used in week 1 and 2. |
+| `style.css` | A starter CSS file. |
+| ~~`Util.js`~~ | Not used in week 1 and 2. |
+
+In week 1, you should only modify `index.js` and `style.css`.
+
+_**Do not modify any other files at this time!**_
+
+#### 2.4.1 A first examination
+
+1. Open `index.html` and examine its contents (but don't modify anything). Notice that the HTML `body` looks like this:
+
+ ```html
+
+
+
+
+ ```
+
+ The `body` tag contains a single `div` to which you will need to dynamically append HTML elements through your JavaScript code in `index.js`.
+
+2. Open `index.js`. This file contains a starter set of code for you to expand. It contains the following three functions:
+
+ | Function | Description |
+ |----------|-------------|
+ | `fetchJSON` | Uses `XMLHttpRequest` to fetch JSON data from an API end point. This function uses an asynchronous callback. |
+ | `createAndAppend` | A utility function for easily creating and appending HTML elements. |
+ | `main` | Contains the start-up code for the application. |
+
+ `index.js` also contains a constant with the URL for the HYF repositories as listed in section 2.2.1:
+
+ ```js
+ const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+ ```
+
+3. Open the `index.html` file in your browser. Notice that it produces the same JSON output that you saw previously when you opened the URL directly in the browser.
+
+4. Review the `main()` function in `index.js` and examine how this code renders the JSON output in the browser by means of a `pre` HTML element (for demonstration purposes).
+
+### 2.5 Week 1 Assignment
+
+The assignment is to produce an application similar to the one illustrated in Figure 1 above.
+
+It should include the following components:
+
+1. An HTML `select` element from which the user can select a HYF repository. This `select` element must be populated with `option` elements, one for each HYF repository.
+2. A left-hand column that displays basic information about the selected repository.
+3. A right-hand column that displays a list of contributors to the repository.
+
+ >In case you run out of time, you can also do the contributors list in week 2.
+
+**Functional Requirements:**
+
+1. The list of repositories in the `select` element should be sorted (case-insensitive) on repository name.
+2. At start-up your application should display information about the first repository as displayed in the `select` element.
+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.
+6. You should render network errors to the DOM (see Figure 2 below for an example). Do not use `console.log` as regular users will not see the console output.
+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.
+
+
+
+Figure 2. Rendering of network errors.
+
+**Code modifications:**
+
+**`index.js`**
+
+- Add new functions and modify function `main()` as you see fit. It is not likely that you will need to modify `fetchJSON()` and `createAndAppend()`.
+
+**`style.css`**
+
+- Add your own styling.
+
+**Hints:**
+
+- Add one `option` element per repository to the `select` element, where each `option` element has the array index of the repository as its `value` attribute and the name of the repository as its text content:
+
+ ```html
+
+ ```
+
+
+- To sort the list repositories use [`.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) and [`.localeCompare()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare).
+
+- Use CSS media queries and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to make the UI responsive.
+
+- To force a `404` network error so that you can test the rendering of errors, change the URL to make an invalid GitHub request, e.g. append an `x` to `orgs`: `orgsx`.
+
+
+### 2.5 Handing in your homework
+
+- Have you removed all commented out code (should never be present in a PR)?
+- Have you used `const` and `let` and avoided `var`?
+- Do the variable, function and argument names you created follow the [Naming Conventions](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md)?
+- Is your code well-formatted (see [Code Formatting](../../../../fundamentals/blob/master/fundamentals/code_formatting.md))?
+- Have you resolved all issues flagged by ESLint and the spell checker (no wavy red and green underlines in VSCode)?
+
+If the answer is 'yes' to all preceding questions you are ready to follow these instructions:
+
+1. Push your `week1` branch to GitHub:
+
+ ```
+ git push -u origin week1
+ ```
+
+2. Create a pull request for your `week1` branch.
+
+---
+
+_BONUS_ : Code Kata Race
+
+- [Codewars](https://www.codewars.com/collections/hyf-homework-number-2)
+
+
+## Step 3: Read before next lecture
+
+_Deadline Sunday morning_
+
+Go through the reading material in the [README.md](/Week2/README.md) to prepare for your next class.
diff --git a/Week1/README.md b/Week1/README.md
index bd82e7722..f2bfc5b85 100644
--- a/Week1/README.md
+++ b/Week1/README.md
@@ -1,22 +1,22 @@
-# Reading material for the first lecture:
-
-```
-In week one we will discuss the following topics:
-• Structure for a basic SPA (Single Page Application)
-• XMLHttpRequests
-• API calls
-```
-
-Here are resources that we like you to read as a preparation for the first lecture:
-
-### Fundamentals
-
-- [XMLHttpRequest](../../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md)
-
-### APIs
-
-- Read about APIS: https://www.programmableweb.com/api-university/what-are-apis-and-how-do-they-work
-
-### XMLHttpRequests
-
-- [Making HTTP Requests in JavaScript](https://www.kirupa.com/html5/making_http_requests_js.htm)
+# Reading material for the first lecture:
+
+```
+In week one we will discuss the following topics:
+• Structure for a basic SPA (Single Page Application)
+• XMLHttpRequests
+• API calls
+```
+
+Here are resources that we like you to read as a preparation for the first lecture:
+
+### Fundamentals
+
+- [XMLHttpRequest](../../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md)
+
+### APIs
+
+- Read about APIS: https://www.programmableweb.com/api-university/what-are-apis-and-how-do-they-work
+
+### XMLHttpRequests
+
+- [Making HTTP Requests in JavaScript](https://www.kirupa.com/html5/making_http_requests_js.htm)
diff --git a/Week1/assets/app.js b/Week1/assets/app.js
new file mode 100644
index 000000000..7230a5235
--- /dev/null
+++ b/Week1/assets/app.js
@@ -0,0 +1,95 @@
+"use strict";
+let username = "HackYourFuture";
+let mainRepo;
+let url = `https://api.github.com/users/${username}/repos`;
+let ul = document.getElementById("list");
+let repo_title = document.getElementById("card-title");
+let repo_description = document.getElementById("card-description");
+let repo_forks = document.getElementById("card-forks");
+let repo_updated = document.getElementById("card-updated");
+
+let dropdown = document.getElementById("gitContributors");
+dropdown.length = 0;
+
+let defaultOption = document.createElement("option");
+defaultOption.text = "Choose Repo";
+
+dropdown.add(defaultOption);
+dropdown.selectedIndex = 0;
+
+// Get Repos from Github/hackyourfutue
+fetch(url)
+ .then(response => response.json())
+ .then(data => {
+ console.log(data); // Prints result from `response.json()` in getRequest
+ let option;
+
+ for (let i = 0; i < data.length; i++) {
+ option = document.createElement("option");
+ option.text = data[i].name;
+ option.value = i;
+ dropdown.add(option);
+ }
+ mainRepo = data;
+ })
+ .catch(error => console.error(error));
+
+// Get Contributors
+function getContributors(repo) {
+ let contributorURL = `https://api.github.com/repos/hackyourfuture/${repo}/contributors`;
+ //Ul clearing
+ if (ul.hasChildNodes()) {
+ while (ul.hasChildNodes()) {
+ ul.removeChild(ul.firstChild);
+ }
+ }
+ //Repo Information
+ repo_title.innerHTML = dropdown.options[dropdown.selectedIndex].text;
+ repo_description.innerHTML =
+ mainRepo[dropdown.options[dropdown.selectedIndex].value].description;
+ repo_forks.innerHTML =
+ mainRepo[dropdown.options[dropdown.selectedIndex].value].forks;
+ repo_updated.innerHTML = dateConverter(
+ mainRepo[dropdown.options[dropdown.selectedIndex].value].updated_at
+ );
+
+ //Fetching contributors list
+ fetch(contributorURL)
+ .then(response => response.json())
+ .then(data => {
+ console.log(data);
+
+ data.map( e => {
+ let a = document.createElement('a');
+ a.setAttribute('target','_blank');
+ a.href = e.html_url;
+
+ let li = document.createElement("li");
+ li.className ="list-group-item d-flex justify-content-between align-items-center";
+ let title = document.createElement("h6");
+ let span = document.createElement("span");
+ span.className = "badge badge-success"
+ span.appendChild(document.createTextNode(e.contributions));
+ let img = document.createElement('img');
+ img.src = e.avatar_url;
+ img.setAttribute("width", "50");
+ img.setAttribute("height", "50");
+ img.setAttribute("alt", e.login);
+ li.appendChild(img);
+ title.innerHTML = e.login;
+ li.appendChild(title);
+ li.appendChild(span);
+ a.appendChild(li)
+ ul.appendChild(a);
+ });
+ })
+ .catch(error => console.error(error));
+}
+
+//Helping functions
+function dateConverter(date) {
+ let newDate = new Date(date);
+ return `${newDate.toLocaleDateString()} - ${newDate.toLocaleTimeString()}`;
+}
+
+
diff --git a/Week1/assets/index.html b/Week1/assets/index.html
new file mode 100644
index 000000000..2502c839b
--- /dev/null
+++ b/Week1/assets/index.html
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+ HYF Github API
+
+
+
+
+
+
+
+
+
+
+
+
Github Repo Information
+
+
Select Repo
+
Description:
+
+
Total Forks:
+
+
Last Updated:
+
+
+
+
+
Contributors
+
+
+
+
+
+
+
+
+
diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md
index 04c09b4da..4be7d4f1c 100644
--- a/Week2/MAKEME.md
+++ b/Week2/MAKEME.md
@@ -1,77 +1,77 @@
-# Homework Week 2
-
-```
-Topics discussed this week:
-• Async vs Sync
-• Event Loop (order of execution)
-• Promises
-```
-
-## Step 1: Read
-
-- Read this article on scopes & closures: [explaining-javascript-scope-and-closures](https://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/)
-
-- If you are still not completely clear on promises, here are some additional resources :ring:
-
- - [Google's post about Promises](https://developers.google.com/web/fundamentals/getting-started/primers/promises)
- - [A nice article from David Walsh](https://davidwalsh.name/promises)
- - [A real life example](https://github.com/mdn/js-examples/blob/master/promises-test/index.html)
- - [stackoverflow](http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript)
- - YouTube: [promises](https://www.youtube.com/watch?v=WBupia9oidU)
-
-
-## Step 2: Implement requested PR changes
-
-- Fix Requested Changes (if any) on the Pull Request.
-
-## Step 3: Convert callbacks to promises
-
-**_Deadline Thursday_**
-
-### 3.1 Preparation
-
-The homework for week 2 will build on the work you did in week 1. You will create a new branch based on the `week1` branch.
-
-1. Make sure that you committed all changes in the week 1 version of your homework.
-2. Create a new `week2` branch:
-
- ```
- git checkout -b week2
- ```
-
-### 3.2 Assignment
-
-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.
-- Replace all asynchronous callbacks (e.g. as used with XMLHttpRequest) by ES6 promises.
-- 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/)).
-
-### 3.3 Handing in your homework
-
-- Have you removed all commented out code (should never be present in a PR)?
-- Have you used `const` and `let` and avoided `var`?
-- Do the variable, function and argument names you created follow the [Naming Conventions](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md)?
-- Is your code well-formatted (see [Code Formatting](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md))?
-- Have you resolved all issues flagged by ESLint and the spell checker (no wavy red and green underlines in VSCode)?
-
-If the answer is 'yes' to all preceding questions you are ready to follow these instructions:
-
-1. Push your `week2` branch to GitHub:
-
- ```
- git push -u origin week2
- ```
-
-2. Create a pull request for your `week2` branch.
-
-Note:
-
-1. Please remove all redundant, commented-out code and console.log's from your files before pushing your homework as finished. There is no need for your mentors to review this stuff.
-2. Please make sure your code is well-formatted and follows the recommended naming conventions.
-
-## Step 4: Read before next lecture
-
-Go through the reading material in the [README.md](../Week3/README.md) to prepare for your next class.
-
+# Homework Week 2
+
+```
+Topics discussed this week:
+• Async vs Sync
+• Event Loop (order of execution)
+• Promises
+```
+
+## Step 1: Read
+
+- Read this article on scopes & closures: [explaining-javascript-scope-and-closures](https://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/)
+
+- If you are still not completely clear on promises, here are some additional resources :ring:
+
+ - [Google's post about Promises](https://developers.google.com/web/fundamentals/getting-started/primers/promises)
+ - [A nice article from David Walsh](https://davidwalsh.name/promises)
+ - [A real life example](https://github.com/mdn/js-examples/blob/master/promises-test/index.html)
+ - [stackoverflow](http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript)
+ - YouTube: [promises](https://www.youtube.com/watch?v=WBupia9oidU)
+
+
+## Step 2: Implement requested PR changes
+
+- Fix Requested Changes (if any) on the Pull Request.
+
+## Step 3: Convert callbacks to promises
+
+**_Deadline Thursday_**
+
+### 3.1 Preparation
+
+The homework for week 2 will build on the work you did in week 1. You will create a new branch based on the `week1` branch.
+
+1. Make sure that you committed all changes in the week 1 version of your homework.
+2. Create a new `week2` branch:
+
+ ```
+ git checkout -b week2
+ ```
+
+### 3.2 Assignment
+
+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.
+- Replace all asynchronous callbacks (e.g. as used with XMLHttpRequest) by ES6 promises.
+- 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/)).
+
+### 3.3 Handing in your homework
+
+- Have you removed all commented out code (should never be present in a PR)?
+- Have you used `const` and `let` and avoided `var`?
+- Do the variable, function and argument names you created follow the [Naming Conventions](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md)?
+- Is your code well-formatted (see [Code Formatting](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md))?
+- Have you resolved all issues flagged by ESLint and the spell checker (no wavy red and green underlines in VSCode)?
+
+If the answer is 'yes' to all preceding questions you are ready to follow these instructions:
+
+1. Push your `week2` branch to GitHub:
+
+ ```
+ git push -u origin week2
+ ```
+
+2. Create a pull request for your `week2` branch.
+
+Note:
+
+1. Please remove all redundant, commented-out code and console.log's from your files before pushing your homework as finished. There is no need for your mentors to review this stuff.
+2. Please make sure your code is well-formatted and follows the recommended naming conventions.
+
+## Step 4: Read before next lecture
+
+Go through the reading material in the [README.md](../Week3/README.md) to prepare for your next class.
+
diff --git a/Week2/README.md b/Week2/README.md
index e55018f74..8eb7db96b 100644
--- a/Week2/README.md
+++ b/Week2/README.md
@@ -1,24 +1,24 @@
-# Reading material for the second lecture:
-
-```
-In week two we will discuss the following topics:
-• Async vs Sync
-• Event Loop (order of execution)
-• Promises
-```
-
-Here are resources that we like you to read as a preparation for the second lecture:
-
-### Async VS Sync
-
-- [Stacks/Queues](https://www.youtube.com/watch?v=wjI1WNcIntg) (5 mins)
-- Read about Asynchronous vs. Synchronous programming: http://www.hongkiat.com/blog/synchronous-asynchronous-javascript/
-- [Why closures are helpful with async code](http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript)
-
-### Fundamentals
-
-- [Event Loop](../../../../fundamentals/blob/master/fundamentals/event_loop.md)
-- [Promises](../../../../fundamentals/blob/master/fundamentals/promises.md)
-
-
-_Please go through the material and come to class prepared!_
+# Reading material for the second lecture:
+
+```
+In week two we will discuss the following topics:
+• Async vs Sync
+• Event Loop (order of execution)
+• Promises
+```
+
+Here are resources that we like you to read as a preparation for the second lecture:
+
+### Async VS Sync
+
+- [Stacks/Queues](https://www.youtube.com/watch?v=wjI1WNcIntg) (5 mins)
+- Read about Asynchronous vs. Synchronous programming: http://www.hongkiat.com/blog/synchronous-asynchronous-javascript/
+- [Why closures are helpful with async code](http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript)
+
+### Fundamentals
+
+- [Event Loop](../../../../fundamentals/blob/master/fundamentals/event_loop.md)
+- [Promises](../../../../fundamentals/blob/master/fundamentals/promises.md)
+
+
+_Please go through the material and come to class prepared!_
diff --git a/Week2/assets/app.js b/Week2/assets/app.js
new file mode 100644
index 000000000..c7a01df56
--- /dev/null
+++ b/Week2/assets/app.js
@@ -0,0 +1,95 @@
+"use strict";
+let username = "HackYourFuture";
+let mainRepo;
+let url = `https://api.github.com/users/${username}/repos`;
+let ul = document.getElementById("list");
+let repo_title = document.getElementById("card-title");
+let repo_description = document.getElementById("card-description");
+let repo_forks = document.getElementById("card-forks");
+let repo_updated = document.getElementById("card-updated");
+
+let dropdown = document.getElementById("gitContributors");
+dropdown.length = 0;
+
+let defaultOption = document.createElement("option");
+defaultOption.text = "Choose Repo";
+
+dropdown.add(defaultOption);
+dropdown.selectedIndex = 0;
+
+// Get Repos from Github/hackyourfutue
+fetch(url)
+ .then(response => response.json())
+ .then(data => {
+ console.log(data); // Prints result from `response.json()` in getRequest
+ let option;
+
+ for (let i = 0; i < data.length; i++) {
+ option = document.createElement("option");
+ option.text = data[i].name;
+ option.value = i;
+ dropdown.add(option);
+ }
+ mainRepo = data;
+ })
+ .catch(error => console.error(error));
+
+// Get Contributors
+function getContributors(repo) {
+ let contributorURL = `https://api.github.com/repos/hackyourfuture/${repo}/contributors`;
+ //Ul clearing
+ if (ul.hasChildNodes()) {
+ while (ul.hasChildNodes()) {
+ ul.removeChild(ul.firstChild);
+ }
+ }
+ //Repo Information
+ repo_title.innerHTML = dropdown.options[dropdown.selectedIndex].text;
+ repo_description.innerHTML =
+ mainRepo[dropdown.options[dropdown.selectedIndex].value].description;
+ repo_forks.innerHTML =
+ mainRepo[dropdown.options[dropdown.selectedIndex].value].forks;
+ repo_updated.innerHTML = dateConverter(
+ mainRepo[dropdown.options[dropdown.selectedIndex].value].updated_at
+ );
+
+ //Fetching contributors list
+ fetch(contributorURL)
+ .then(response => response.json())
+ .then(data => {
+ console.log(data);
+
+ data.map( e => {
+ let a = document.createElement('a');
+ a.setAttribute('target','_blank');
+ a.href = e.html_url;
+
+ let li = document.createElement("li");
+ li.className ="list-group-item d-flex justify-content-between align-items-center";
+ let title = document.createElement("h6");
+ let span = document.createElement("span");
+ span.className = "badge badge-success"
+ span.appendChild(document.createTextNode(e.contributions));
+ let img = document.createElement('img');
+ img.src = e.avatar_url;
+ img.setAttribute("width", "50");
+ img.setAttribute("height", "50");
+ img.setAttribute("alt", e.login);
+ li.appendChild(img);
+ title.innerHTML = e.login;
+ li.appendChild(title);
+ li.appendChild(span);
+ a.appendChild(li)
+ ul.appendChild(a);
+ });
+ })
+ .catch(error => console.error(error));
+}
+
+//Helping functions
+function dateConverter(date) {
+ let newDate = new Date(date);
+ return `${newDate.toLocaleDateString()} - ${newDate.toLocaleTimeString()}`;
+}
+
+
diff --git a/Week2/assets/hyf-github-error.png b/Week2/assets/hyf-github-error.png
new file mode 100644
index 000000000..545c658f4
Binary files /dev/null and b/Week2/assets/hyf-github-error.png differ
diff --git a/Week2/assets/hyf-github.png b/Week2/assets/hyf-github.png
new file mode 100644
index 000000000..bfc5ac470
Binary files /dev/null and b/Week2/assets/hyf-github.png differ
diff --git a/Week2/assets/index.html b/Week2/assets/index.html
new file mode 100644
index 000000000..125356145
--- /dev/null
+++ b/Week2/assets/index.html
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+ HYF Github API
+
+
+
+
+
+
+
+
+
+
+
+
Github Repo Information
+
+
Select Repo
+
Description:
+
+
Total Forks:
+
+
Last Updated:
+
+
+
+
+
Contributors
+
+
+
+
+
+
+
+
+
diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md
index ad6e7286e..85e8f8ce2 100644
--- a/Week3/MAKEME.md
+++ b/Week3/MAKEME.md
@@ -1,140 +1,140 @@
-# Homework Week 3
-
-```
-Topics discussed this week:
-• Object Oriented Programming and ES6 Classes
-• The this keyword
-• call, apply, bind
-```
-
-
-## Step 1: Fix requested changes
-
-_Deadline Monday_
-
-- Fix Requested Changes (if any) on the Pull Request.
-
-## Step 2
-
-**_Deadline Thursday_**
-
-### 2.1 Preparation
-
-**Read the fundamental pages on:**
-
-- [try...catch](../../../../fundamentals/blob/master/fundamentals/try_catch.md)
-- [async/await](../../../../fundamentals/blob/master/fundamentals/async_await.md)
-
-
-The homework for week 3 will build on the work you did in week 2. You will create a new branch based on the `week2` branch.
-
-1. Make sure that you committed all changes in the week 2 version of your homework.
-2. Create a new `week3` branch:
-
- ```
- git checkout -b week3
- ```
-
-### 2.2 Assignment
-
-This week you will work with all JavaScript files in the `src` folder. The assignment consists of two parts:
-
-1. Refactor all `.then()` and `.catch()` methods with `async`/`await` and `try...catch`.
-2. Make your app ARIA-compliant (see below).
-3. Refactor your application to use ES6 classes.
-
-
-#### 2.2.1 async/await
-
-**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.
-
-
-#### 2.2.2 ES6 Classes
-
-**_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`.
-
-| File | Description |
-|------------------|-------------|
-| `App.js` | The `App` class contains the start-up code and manages the overall orchestration of the app. |
-| `Repository.js` | The `Repository` class holds code and data for a single repository. |
-| `Contributor.js` | The `Contributor` class holds code and data for a single contributor. |
-| `Util.js` | The `Util` class contains static helper methods for use in the other classes. |
-
-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.
-
-_Read:_
-
-- 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)
-
-_Instructions:_
-
-1. Copy `index.html` to file named `classes.html` and change the content of the `body` tag of `classes.html` as follows:
-
- ```html
-
-
-
-
-
-
-
- ```
-
-#### 2.2.3 ARIA-compliance (BONUS)
-
-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.
-
-#### 2.2.4 Handing in your homework
-
-- Have you removed all commented out code (should never be present in a PR)?
-- Have you used `const` and `let` and avoided `var`?
-- Do the variable, function and argument names you created follow the [Naming Conventions](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md)?
-- Is your code well-formatted (see [Code Formatting](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md))?
-- Have you resolved all issues flagged by ESLint and the spell checker (no wavy red and green underlines in VSCode)?
-
-If the answer is 'yes' to all preceding questions you are ready to follow these instructions:
-
-1. Push your `week3` branch to GitHub:
-
- ```
- git push -u origin week3
- ```
-
-2. Create a pull request for your `week3` branch.
-
-## Step 3: Read before next lecture
-
-_Deadline Sunday morning_
-
-Go trough the reading material in the [README.md](https://github.com/HackYourFuture/Node.js) of the Node repository to prepare for your next class.
-
-## Alternative _BONUS_ : Code Kata Race
-
-If you haven't already join our clan: "Hack Your Future" in codewars
-
-Solve the following problems:
-- [Problem 1](https://www.codewars.com/kata/keep-up-the-hoop)
-- [Problem 2](https://www.codewars.com/kata/find-the-first-non-consecutive-number)
-- [Problem 3](https://www.codewars.com/kata/negation-of-a-value)
-- Some more [Homework](https://www.codewars.com/collections/hyf-homework-1)
-
-_Hints_
-- Hint for Q1: split your code into two parts, one part for the case that one of the two strings has an extra letter at the start or the end but is otherwise identical & one part for the case that the strings are the same length but one character is different in one of the strings
-- Also for Q1 this function on strings might be useful: [JavaScript String slice() method](https://www.w3schools.com/jsref/jsref_slice_string.asp)
-- Also potentially useful: [JavaScript String charAt() Method](https://www.w3schools.com/jsref/jsref_charat.asp)
-- [Hint for Q2](https://www.w3schools.com/jsref/jsref_sort.asp) Also there are no sample tests, you need to use submit
-
-Remember the person with the most kata points gets a prize from Gijs (and you can do exercises on this website without us assigning them - anything kyu 7 or kyu 8 you can try to do - kyu 6 or lower is probably too hard) -->
-
--[MORE BONUS](https://www.codewars.com/collections/hyf-homework-1-bonus-credit) :collision:
+# Homework Week 3
+
+```
+Topics discussed this week:
+• Object Oriented Programming and ES6 Classes
+• The this keyword
+• call, apply, bind
+```
+
+
+## Step 1: Fix requested changes
+
+_Deadline Monday_
+
+- Fix Requested Changes (if any) on the Pull Request.
+
+## Step 2
+
+**_Deadline Thursday_**
+
+### 2.1 Preparation
+
+**Read the fundamental pages on:**
+
+- [try...catch](../../../../fundamentals/blob/master/fundamentals/try_catch.md)
+- [async/await](../../../../fundamentals/blob/master/fundamentals/async_await.md)
+
+
+The homework for week 3 will build on the work you did in week 2. You will create a new branch based on the `week2` branch.
+
+1. Make sure that you committed all changes in the week 2 version of your homework.
+2. Create a new `week3` branch:
+
+ ```
+ git checkout -b week3
+ ```
+
+### 2.2 Assignment
+
+This week you will work with all JavaScript files in the `src` folder. The assignment consists of two parts:
+
+1. Refactor all `.then()` and `.catch()` methods with `async`/`await` and `try...catch`.
+2. Make your app ARIA-compliant (see below).
+3. Refactor your application to use ES6 classes.
+
+
+#### 2.2.1 async/await
+
+**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.
+
+
+#### 2.2.2 ES6 Classes
+
+**_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`.
+
+| File | Description |
+|------------------|-------------|
+| `App.js` | The `App` class contains the start-up code and manages the overall orchestration of the app. |
+| `Repository.js` | The `Repository` class holds code and data for a single repository. |
+| `Contributor.js` | The `Contributor` class holds code and data for a single contributor. |
+| `Util.js` | The `Util` class contains static helper methods for use in the other classes. |
+
+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.
+
+_Read:_
+
+- 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)
+
+_Instructions:_
+
+1. Copy `index.html` to file named `classes.html` and change the content of the `body` tag of `classes.html` as follows:
+
+ ```html
+
+
+
+
+
+
+
+ ```
+
+#### 2.2.3 ARIA-compliance (BONUS)
+
+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.
+
+#### 2.2.4 Handing in your homework
+
+- Have you removed all commented out code (should never be present in a PR)?
+- Have you used `const` and `let` and avoided `var`?
+- Do the variable, function and argument names you created follow the [Naming Conventions](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md)?
+- Is your code well-formatted (see [Code Formatting](../../../../fundamentals/blob/master/fundamentals/naming_conventions.md))?
+- Have you resolved all issues flagged by ESLint and the spell checker (no wavy red and green underlines in VSCode)?
+
+If the answer is 'yes' to all preceding questions you are ready to follow these instructions:
+
+1. Push your `week3` branch to GitHub:
+
+ ```
+ git push -u origin week3
+ ```
+
+2. Create a pull request for your `week3` branch.
+
+## Step 3: Read before next lecture
+
+_Deadline Sunday morning_
+
+Go trough the reading material in the [README.md](https://github.com/HackYourFuture/Node.js) of the Node repository to prepare for your next class.
+
+## Alternative _BONUS_ : Code Kata Race
+
+If you haven't already join our clan: "Hack Your Future" in codewars
+
+Solve the following problems:
+- [Problem 1](https://www.codewars.com/kata/keep-up-the-hoop)
+- [Problem 2](https://www.codewars.com/kata/find-the-first-non-consecutive-number)
+- [Problem 3](https://www.codewars.com/kata/negation-of-a-value)
+- Some more [Homework](https://www.codewars.com/collections/hyf-homework-1)
+
+_Hints_
+- Hint for Q1: split your code into two parts, one part for the case that one of the two strings has an extra letter at the start or the end but is otherwise identical & one part for the case that the strings are the same length but one character is different in one of the strings
+- Also for Q1 this function on strings might be useful: [JavaScript String slice() method](https://www.w3schools.com/jsref/jsref_slice_string.asp)
+- Also potentially useful: [JavaScript String charAt() Method](https://www.w3schools.com/jsref/jsref_charat.asp)
+- [Hint for Q2](https://www.w3schools.com/jsref/jsref_sort.asp) Also there are no sample tests, you need to use submit
+
+Remember the person with the most kata points gets a prize from Gijs (and you can do exercises on this website without us assigning them - anything kyu 7 or kyu 8 you can try to do - kyu 6 or lower is probably too hard) -->
+
+-[MORE BONUS](https://www.codewars.com/collections/hyf-homework-1-bonus-credit) :collision:
diff --git a/Week3/README.md b/Week3/README.md
index 2c317379f..2de0471a6 100644
--- a/Week3/README.md
+++ b/Week3/README.md
@@ -1,29 +1,29 @@
-# Reading material for the third lecture:
-
-```
-In week three we will discuss the following topics:
-• Object Oriented Programming and ES6 Classes
-• The this keyword
-• call, apply, bind
-```
-
-Here are resources that we like you to read as a preparation for the third lecture:
-
-### Fundamentals
-
-- [Object-Oriented Programming & Classes](../../../../fundamentals/blob/master/fundamentals/oop_classes.md)
-- [What is 'this'?](../../../../fundamentals/blob/master/fundamentals/this.md)
-
-### `call` `apply`, `bind`
-
-- [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call)
-- [Function.prototype.apply()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)
-- [Function.prototype.bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)
-
-
-## Recommended Readings
-
-[Eloquent JavaScript: Chapter 6 - The Secret Life of Objects](http://eloquentjavascript.net/06_object.html). Read up to the section of **Maps**.
-
-
+# Reading material for the third lecture:
+
+```
+In week three we will discuss the following topics:
+• Object Oriented Programming and ES6 Classes
+• The this keyword
+• call, apply, bind
+```
+
+Here are resources that we like you to read as a preparation for the third lecture:
+
+### Fundamentals
+
+- [Object-Oriented Programming & Classes](../../../../fundamentals/blob/master/fundamentals/oop_classes.md)
+- [What is 'this'?](../../../../fundamentals/blob/master/fundamentals/this.md)
+
+### `call` `apply`, `bind`
+
+- [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call)
+- [Function.prototype.apply()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)
+- [Function.prototype.bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)
+
+
+## Recommended Readings
+
+[Eloquent JavaScript: Chapter 6 - The Secret Life of Objects](http://eloquentjavascript.net/06_object.html). Read up to the section of **Maps**.
+
+
_Please go through the material and come to class prepared!_
\ No newline at end of file
diff --git a/Week3/assets/app.js b/Week3/assets/app.js
new file mode 100644
index 000000000..c7a01df56
--- /dev/null
+++ b/Week3/assets/app.js
@@ -0,0 +1,95 @@
+"use strict";
+let username = "HackYourFuture";
+let mainRepo;
+let url = `https://api.github.com/users/${username}/repos`;
+let ul = document.getElementById("list");
+let repo_title = document.getElementById("card-title");
+let repo_description = document.getElementById("card-description");
+let repo_forks = document.getElementById("card-forks");
+let repo_updated = document.getElementById("card-updated");
+
+let dropdown = document.getElementById("gitContributors");
+dropdown.length = 0;
+
+let defaultOption = document.createElement("option");
+defaultOption.text = "Choose Repo";
+
+dropdown.add(defaultOption);
+dropdown.selectedIndex = 0;
+
+// Get Repos from Github/hackyourfutue
+fetch(url)
+ .then(response => response.json())
+ .then(data => {
+ console.log(data); // Prints result from `response.json()` in getRequest
+ let option;
+
+ for (let i = 0; i < data.length; i++) {
+ option = document.createElement("option");
+ option.text = data[i].name;
+ option.value = i;
+ dropdown.add(option);
+ }
+ mainRepo = data;
+ })
+ .catch(error => console.error(error));
+
+// Get Contributors
+function getContributors(repo) {
+ let contributorURL = `https://api.github.com/repos/hackyourfuture/${repo}/contributors`;
+ //Ul clearing
+ if (ul.hasChildNodes()) {
+ while (ul.hasChildNodes()) {
+ ul.removeChild(ul.firstChild);
+ }
+ }
+ //Repo Information
+ repo_title.innerHTML = dropdown.options[dropdown.selectedIndex].text;
+ repo_description.innerHTML =
+ mainRepo[dropdown.options[dropdown.selectedIndex].value].description;
+ repo_forks.innerHTML =
+ mainRepo[dropdown.options[dropdown.selectedIndex].value].forks;
+ repo_updated.innerHTML = dateConverter(
+ mainRepo[dropdown.options[dropdown.selectedIndex].value].updated_at
+ );
+
+ //Fetching contributors list
+ fetch(contributorURL)
+ .then(response => response.json())
+ .then(data => {
+ console.log(data);
+
+ data.map( e => {
+ let a = document.createElement('a');
+ a.setAttribute('target','_blank');
+ a.href = e.html_url;
+
+ let li = document.createElement("li");
+ li.className ="list-group-item d-flex justify-content-between align-items-center";
+ let title = document.createElement("h6");
+ let span = document.createElement("span");
+ span.className = "badge badge-success"
+ span.appendChild(document.createTextNode(e.contributions));
+ let img = document.createElement('img');
+ img.src = e.avatar_url;
+ img.setAttribute("width", "50");
+ img.setAttribute("height", "50");
+ img.setAttribute("alt", e.login);
+ li.appendChild(img);
+ title.innerHTML = e.login;
+ li.appendChild(title);
+ li.appendChild(span);
+ a.appendChild(li)
+ ul.appendChild(a);
+ });
+ })
+ .catch(error => console.error(error));
+}
+
+//Helping functions
+function dateConverter(date) {
+ let newDate = new Date(date);
+ return `${newDate.toLocaleDateString()} - ${newDate.toLocaleTimeString()}`;
+}
+
+
diff --git a/Week3/assets/hyf-github-error.png b/Week3/assets/hyf-github-error.png
new file mode 100644
index 000000000..545c658f4
Binary files /dev/null and b/Week3/assets/hyf-github-error.png differ
diff --git a/Week3/assets/hyf-github.png b/Week3/assets/hyf-github.png
new file mode 100644
index 000000000..bfc5ac470
Binary files /dev/null and b/Week3/assets/hyf-github.png differ
diff --git a/Week3/assets/index.html b/Week3/assets/index.html
new file mode 100644
index 000000000..125356145
--- /dev/null
+++ b/Week3/assets/index.html
@@ -0,0 +1,84 @@
+
+
+
+
+
+
+ HYF Github API
+
+
+
+
+
+
+
