HackYourFuture · remarcmij · Nov 22, 2018 · Nov 21, 2018 · Nov 21, 2018 · Nov 21, 2018
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -0,0 +1,13 @@
+{
+  "extends": ["airbnb", "prettier"],
+  "plugins": ["prettier"],
+  "env": {
+    "browser": true
+  },
+  "rules": {
+    "prettier/prettier": ["error"],
+    "class-methods-use-this": "off",
+    "strict": "off",
+    "no-plusplus": "off"
+  }
+}
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,6 @@
+language: node_js
+node_js:
+  - '10'
+
+script:
+  - npm run lint
diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md
@@ -7,21 +7,15 @@ Topics discussed this week:
 • 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:
+## Step 1: 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
+### 1.1 Introduction
+
+> 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.
 
 You are going to write a _Single Page Application_ (SPA) that uses the [GitHub API](https://developer.github.com/guides/getting-started/).
 
@@ -36,15 +30,13 @@ Figure 1 below shows an example of what your application could look like. Note t
 
 ![UI Example](./assets/hyf-github.png)
 
-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.
-
 <small>Figure 1. Example User Interface using [Material Design](https://material.io/guidelines/) principles.</small>
 
 A live version of this application can be found here: http://hyf-github.netlify.com/
 
-### 2.2 The GitHub API
+### 1.2 The GitHub API
 
-#### 2.2.1 Get a list of HYF repositories
+#### 1.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)):
 
@@ -58,90 +50,113 @@ 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.
 
-#### 2.2.2 Get contributor information for a 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.
 
-#### 2.2.3 GitHub API documentation
+#### 1.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
+### 1.3 Coding Style
 
-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.
+In this homework we will be introducing a preferred coding style and supporting tools to help you write _"clean code"_. A number of popular [_JavaScript Style Guides_](https://codeburst.io/5-javascript-style-guides-including-airbnb-github-google-88cbc6b2b7aa) have recently emerged of which the one developed by [Airbnb](https://github.com/airbnb/javascript) has been chosen for this homework and is recommended for subsequent use during the HYF curriculum. It is documented here:
 
-| Week | Branch | Assignment |
-|:----:|--------|------------|
-| 1   | `week1` | Create a basic application using callbacks to handle network requests. |
-| 2   | `week2` | - Refactor the callbacks to promises.<br>- Make the UI responsive.|
-| 3   | `week3` | - Refactor the application to use ES6 Classes and async/await.<br>- Make the app ARIA-compliant. |
+- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)
+
+While you do not need to read this guide in detail, it is recommended that you review sections 1-8, 12-13, 15-21 and 23. The tools installed during the project preparation step below will help you to implement these guidelines in your code. You will see error and warning messages in the VSCode editor when your code deviates from the recommended style. An additional check will be done when you submit your homework as a pull request on GitHub.
+
+### 1.5 Preparation
+
+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. |
 
 <small>Table 1. Homework schedule</small>
 
 **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:
+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:
 
-    ```
-    git checkout -b week1
-    ```
+   ```
+   npm install
+   ```
 
-### 2.4 Code Overview
+6. Create a new branch for the week 1 homework with the following command:
 
-The files that make up the application are located in the `src` folder. It contains the following files:
+   ```
+   git checkout -b week1
+   ```
 
-| Filename         | Description |
-|------------------|-------------|
-| ~~`App.js`~~         | Not used in week 1 and 2. |
-| ~~`Contributor.js`~~ | Not used in week 1 and 2. |
+### 1.5 Code Overview
+
+The files that make up the application are located in the `homework` 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. |
+| `index.html`         | The application's HTML file.      |
+| ~~`index2.html`~~    | Not used in week 1 and 2.         |
+| `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
+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.
+
+_**Do not change or delete any files outside of the `homework` folder!**_
+
+#### 1.5.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
-    <body>
-      <div id="root"></div>
-      <script src="./index.js"></script>
-    </body>
-    ```
+   ```html
+   <body>
+     <div id="root"></div>
+     <script src="./index.js"></script>
+   </body>
+   ```
 
-    The `body` tag contains a single `div` to which you will need to dynamically append HTML elements through your JavaScript code in `index.js`.
+   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:
+   | 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';
-    ```
+   ```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
+### 1.6 Week 1 Assignment
 
 The assignment is to produce an application similar to the one illustrated in Figure 1 above.
 
@@ -151,7 +166,7 @@ It should include the following components:
 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.
+   > In case you run out of time, you can also do the contributors list in week 2.
 
 **Functional Requirements:**
 
@@ -181,37 +196,45 @@ It should include the following components:
 
 - 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
-    <select>
-      <option value="0">alumni</option>
-      <option value="1">angular</option>
-      <!-- etc -->
-    </select>
-    ```
+  ```html
+  <select>
+    <option value="0">alumni</option>
+    <option value="1">angular</option>
+    <!-- etc -->
+  </select>
+  ```
 
+* 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).
 
-- 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.
 
-- 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`.
 
-- 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.
 
-### 2.5 Handing in your homework
+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:
+
+```
+npm test
+```
+
+If any errors or warnings are reported by this command you need to fix them before submitting a pull request.
+
+In addition, check for the following:
 
 - 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:
+If the answer is 'yes' to the preceding questions you are ready to follow these instructions:
 
 1. Push your `week1` branch to GitHub:
 
-    ```
-    git push -u origin week1
-    ```
+   ```
+   git push -u origin week1
+   ```
 
 2. Create a pull request for your `week1` branch.
 
@@ -221,8 +244,7 @@ _BONUS_ : Code Kata Race
 
 - [Codewars](https://www.codewars.com/collections/hyf-homework-number-2)
 
-
-## Step 3: Read before next lecture
+## Step 2: Read before next lecture
 
 _Deadline Sunday morning_
 

diff --git a/Week1/README.md b/Week1/README.md
@@ -20,3 +20,15 @@ Here are resources that we like you to read as a preparation for the first lectu
 ### XMLHttpRequests
 
 - [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.
+
+- [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)
diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md
@@ -13,12 +13,11 @@ Topics discussed this week:
 
 - 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)
-
+  - [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
 
@@ -35,9 +34,9 @@ The homework for week 2 will build on the work you did in week 1. You will creat
 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
-    ```
+   ```
+   git checkout -b week2
+   ```
 
 ### 3.2 Assignment
 
@@ -50,19 +49,29 @@ You will continue to work on the files `index.js` and (possibly) `style.css`.
 
 ### 3.3 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:
+
+```
+npm test
+```
+
+If any errors or warnings are reported by this command you need to fix them before submitting a pull request.
+
+In addition, check for the following:
+
 - 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)?
+- Is your code well-formatted (see [Code Formatting](../../../../fundamentals/blob/master/fundamentals/code_formatting.md))?
 
-If the answer is 'yes' to all preceding questions you are ready to follow these instructions:
+If the answer is 'yes' to the preceding questions you are ready to follow these instructions:
 
 1. Push your `week2` branch to GitHub:
 
-    ```
-    git push -u origin week2
-    ```
+   ```
+   git push -u origin week2
+   ```
 
 2. Create a pull request for your `week2` branch.
 
@@ -74,4 +83,3 @@ Note:
 ## Step 4: Read before next lecture
 
 Go through the reading material in the [README.md](../Week3/README.md) to prepare for your next class.
-