HackYourFuture · remarcmij · Sep 8, 2019 · Aug 18, 2019 · Aug 19, 2019 · Aug 19, 2019
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -1,5 +1,5 @@
 {
-  "extends": ["airbnb", "prettier"],
+  "extends": ["airbnb-base", "prettier"],
   "plugins": ["prettier"],
   "env": {
     "browser": true,
@@ -9,14 +9,16 @@
     "page": true,
     "browser": true,
     "context": true,
-    "jestPuppeteer": true
+    "jestPuppeteer": true,
+    "axios": "readonly"
   },
   "rules": {
     "prettier/prettier": ["error"],
     "class-methods-use-this": "off",
     "strict": "off",
     "no-plusplus": "off",
     "linebreak-style": "off",
+    "no-restricted-syntax": "off",
     "no-param-reassign": [
       "error",
       {

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "CoenraadS.bracket-pair-colorizer",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "ritwickdey.LiveServer",
+    "streetsidesoftware.code-spell-checker",
+    "techer.open-in-browser"
+  ]
+}
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -5,7 +5,12 @@
   "editor.detectIndentation": false,
   "editor.tabSize": 2,
   "cSpell.words": [
+    "READYSTATE",
+    "Traversy",
+    "ajaxcrash",
     "networkidle",
-    "tabindex"
+    "remarcmij",
+    "tabindex",
+    "whiteframe"
   ]
-}
+}
diff --git a/README.md b/README.md
@@ -3,13 +3,13 @@ or links, please share them by [opening a pull request](https://github.com/HackY
 
 # HackYourFuture JavaScript 3
 
-Here you can find course content and homework for the JavaScript3 modules
+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) <br>• [XMLHttpRequests](../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md) <br>• 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)<br>• [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)<br>• [async/await](../../../fundamentals/blob/master/fundamentals/async_await.md)<br>• [The `this` keyword](../../../fundamentals/blob/master/fundamentals/this.md)<br>• call, apply, bind<br>• [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)|
+|1.|• Structure for a basic SPA (Single Page Application) <br>• AJAX & XMLHttpRequests<br>• API calls|[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)|
+|2.|• Event Loop (order of execution)<br>• Promises|[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|
+|3.|• fetch, axios<br>• async/await<br>• try...catch<br>• The `this` keyword<br>• call, apply, bind<br>• Object Oriented Programming and ES6 Classes|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|
 
 __Kind note:__
 
@@ -18,6 +18,6 @@ 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 :)*
+*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* :).
 
 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md
@@ -19,14 +19,12 @@ _This homework is more extensive and challenging than previous homework! Please
 
 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:
+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 in the first week 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.
+- The application should fetch repository information for the HYF GitHub account and display summary information for each repository.
+- This list of repositories should be sorted alphabetically by repository name.
 
-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.
+Figure 1 below shows an example of what your application could look like.
 
 ![UI Example](./assets/hyf-github.png)
 
@@ -48,11 +46,7 @@ If you open this URL in the browser (_try it!_) you will receive JSON data about
 
 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.
 
-#### 1.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.
-
-#### 1.2.3 GitHub API documentation
+#### 1.2.2 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.
 
@@ -70,11 +64,11 @@ While you do not need to read this guide in detail, it is recommended that you r
 
 You will be working on the 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` | Based on the `week1` branch:<br>- Refactor the callbacks to promises.<br>- Make the UI responsive.                               |
-|  3   | `week3` | Based on the `week2` branch:<br>- Refactor the application to use ES6 Classes and async/await.<br>- Make the app ARIA-compliant. |
+| Week | Branch  | Assignment |
+| :--: | ------- | ---------- |
+|  1   | `week1` | - Create a basic application using callbacks to handle network requests. |                                       
+|  2   | `week2` | Based on the `week1` branch:<br>- Display details on a single repository and its contributors<br>- Refactor the callbacks to promises. |
+|  3   | `week3` | Based on the `week2` branch:<br>- Refactor the application to use `fetch` and `async`/`await`.<br>- Reuse portions of the code to complete a provided Object Oriented (OOP) version of the application that uses ES6 classes. |
 
 <small>Table 1. Homework schedule</small>
 
@@ -83,17 +77,13 @@ You will be working on the same application during the next three weeks. For eac
 1. Fork the JavaScript3 repository (_this repository_) to your own GitHub account.
 2. Clone the fork to your laptop.
 3. Open the newly created `JavaScript3` folder from the cloned repository in VSCode.
-4. Install the following extension in VSCode:
-
-   **Prettier - Code formatter**.
-
-5. Open a Terminal window in VSCode and type the following command to install Prettier and ESLint tools as required for the homework:
+4. Open a Terminal window in VSCode and type the following command to install Prettier and ESLint tools as required for the homework:
 
    ```
    npm install
    ```
 
-6. Create a new branch for the week 1 homework with the following command:
+5. Create a new branch for the week 1 homework with the following command:
 
    ```
    git checkout -b week1
@@ -135,37 +125,23 @@ _**Do not change or delete any files outside of the `homework` folder!**_
    | `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:
+   `index.js` also contains a constant with the URL required for fetching information about the HYF repositories:
 
    ```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.
+3. Open the `index.html` file in your browser. You will see an unordered list with the names of the HYF repositories.
 
-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).
+4. Review the `main()` function in `index.js` and examine how this code fetches the JSON data and calls renders the data as unordered list in the web page.
 
 ### 1.6 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.
+1. The assignment is to produce an application similar to the one illustrated in Figure 1 above.
 
-   > In case you run out of time, you can also do the contributors list in week 2.
+2. 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. Use the predefined `alert-error` class from `style.css` to style your error.
 
-**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. Use the predefined `alert-error` class from `style.css` to style your error.
-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.
+3. 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.
 
 ![Error rendering](./assets/hyf-github-error.png)
 
@@ -179,31 +155,24 @@ It should include the following components:
 
 **`style.css`**
 
-- Add your own styling.
-
-**Hints:**
+- Add your own CSS styling. Use `style.css` for all your styling your HTML. Avoid using JavaScript for styling unless there is a genuine need. 
 
-- 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:
+    **You are not allowed to use a CSS library such as Bootstrap.**
 
-  ```html
-  <select>
-    <option value="0">alumni</option>
-    <option value="1">angular</option>
-    <!-- etc -->
-  </select>
-  ```
+**Hints:**
 
 * 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`.
 
+
 ### 1.7 Handing in your homework
 
 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.
 
-To test whether your code will be accepted when you submit your homework as a pull request you need to ensure that it does not contain ESLinr errors. Open a terminal window in VSCode and type the following command:
+To test whether your code will be accepted when you submit your homework as a pull request you need to ensure that it does not contain ESLint errors. Open a terminal window in VSCode and type the following command:
 
 ```
 npm test

diff --git a/Week1/README.md b/Week1/README.md
@@ -3,32 +3,73 @@
 ```
 In week one we will discuss the following topics:
 • Structure for a basic SPA (Single Page Application)
-• XMLHttpRequests
+• AJAX & XMLHttpRequests
 • API calls
 ```
 
 Here are resources that we like you to read as a preparation for the first lecture:
 
-### Fundamentals
+## 1. DOM manipulation
 
-- [XMLHttpRequest](../../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md)
+To refresh your DOM manipulation skills, watch this YouTube video series from Traversy Media:
 
-### APIs
+- [JavaScript DOM Crash Course](https://youtu.be/0ik6X4DJKCc).
 
-- Read about APIS: https://www.programmableweb.com/api-university/what-are-apis-and-how-do-they-work
+You will be using these particular DOM manipulation methods and properties in the JS3 homework for the next three weeks:
 
-### XMLHttpRequests
+#### Course Video Part 1 (39 mins):
+
+- `document.getElementById()`
+- `element.textContent`
+
+#### Course Video Part 2 (21 mins):
+
+- `document.createElement()`
+- `element.setAttribute()`
+- `element.appendChild()` 
+
+#### Course Video Part 3 (34 mins):
+
+- `change` event (`<select>` element)
+- `element.addEventListener()`
+
+Note that throughout the video lectures the presenter uses `var` to declare variables. We prefer that you use `const` and `let` instead in your homework.
+
+## 2. APIs
+
+In the homework we will be using the GitHub API. Learn about remote Web APIs in general from this YouTube video (18 min) from Traversy Media:
+
+- [What Is A RESTful API? Explanation of REST & HTTP](https://youtu.be/Q-BpqyOT3a8).
+
+For more research, check out the following resources:
+
+- [What are APIs - series](https://www.youtube.com/watch?v=cpRcK4GS068&list=PLcgRuP1JhcBP8Kh0MC53GH_pxqfOhTVLa)
+
+## 3. AJAX & XMLHttpRequests
+
+Please watch the first 45 mins of the Ajax Crash Course (up until the PHP examples) by Traversy Media:
+
+- [Ajax Crash Course](https://youtu.be/82hnvUYY6QA)
+
+The example code in this course is using on ES5 syntax. In the **traversy_ajax_crash** folder in this repo you will find updated example code (**ajax1**...**ajax3**) that use the ES6 syntax and styling that we prefer in HYF. Specifically, the following changes have been made:
+
+1. The JavaScript code has been placed in a separate file, loaded with a `<script>` tag from the HTML file.
+2. Instead of **var** to declare a variable, **const** and **let** are used.
+3. The non-strict equality operator `==` has been replaced with the strict version `===`.
+4. Functions are defined before they are used.
+5. Anonymous functions use the arrow syntax instead of the **function** keyword. Consequently, the `this` value inside the **XMLHttpRequest** event handlers have been replaced with the `xhr` variable name.
+6. The `for...in` loops for iterating through an array have been replace with `for...of`. 
+
+Read more about using **XMLHttpRequest**:
 
 - [Making HTTP Requests in JavaScript](https://www.kirupa.com/html5/making_http_requests_js.htm)
 
 ### Clean Code
 
-- [How to write clean code? Lessons learnt from “The Clean Code” — Robert C. Martin](https://medium.com/mindorks/how-to-write-clean-code-lessons-learnt-from-the-clean-code-robert-c-martin-9ffc7aef870c).
-
-  > Note that this article includes some code examples writte in Java, but the same principles can equally be applied to JavaScript.
+- [How to write clean code? Lessons learnt from “The Clean Code” — Robert C. Martin](https://medium.com/mindorks/how-to-write-clean-code-lessons-learnt-from-the-clean-code-robert-c-martin-9ffc7aef870c). Note that this article includes some code examples written in Java, but the same principles can equally be applied to JavaScript.
 
 - [Clean Code concepts adapted for JavaScript](https://github.com/ryanmcdermott/clean-code-javascript)
 
 ### Handing in homework using GitHub pull requests
 
-- [Handing in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md)
+- HYF Fundamental - [Handing in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md)
diff --git a/Week1/assets/hyf-github-error.png b/Week1/assets/hyf-github-error.png
diff --git a/Week1/assets/hyf-github.png b/Week1/assets/hyf-github.png
diff --git a/Week1/traversy_ajax_crash/README.md b/Week1/traversy_ajax_crash/README.md
@@ -0,0 +1,16 @@
+# AJAX Crash Course
+
+Please watch the first 45 mins of the Ajax Crash Course by Traversy Media (see link below).
+
+The example code in this course is using on ES5 syntax. In the **ajaxcrash** folder in this repo you will find updated example code (**ajax1** to **ajax3**) that use the ES6 syntax and styling that we prefer in HYF. Specifically, the following changes have been made:
+
+1. The JavaScript code has been placed in a separate file, loaded with a `<script>` tag from the HTML file.
+2. Instead of **var** to declare a variable, **const** and **let** are used.
+3. The non-strict equality operator `==` has been replaced with the strict version `===`.
+4. Functions are defined before they are used.
+5. Anonymous functions use the arrow syntax instead of the **function** keyword. Consequently, the `this` value inside the **XMLHttpRequest** event handlers have been replaced with the `xhr` variable name.
+6. The `for...in` loops for iterating through an array have been replace with `for...of`. 
+
+Watch this YouTube video up until the PHP examples (the first 45 mins):
+
+- Traversy Media - [Ajax Crash Course](https://youtu.be/82hnvUYY6QA)