HackYourFuture · mkruijt · Apr 30, 2018 · Apr 21, 2018 · Apr 30, 2018 · Apr 30, 2018
diff --git a/.eslintrc b/.eslintrc
@@ -0,0 +1,47 @@
+{
+  "env": {
+    "browser": true,
+    "commonjs": true,
+    "es6": true,
+    "node": true
+  },
+  "parserOptions": {
+    "ecmaVersion": 2017,
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "sourceType": "module"
+  },
+  "extends": [
+    "eslint:recommended"
+  ],
+  "rules": {
+    "no-const-assign": "warn",
+    "no-this-before-super": "warn",
+    "no-undef": "warn",
+    "no-unreachable": "warn",
+    "no-unused-vars": "warn",
+    "constructor-super": "warn",
+    "valid-typeof": "warn",
+    "no-var": "warn",
+    "prefer-const": "warn",
+    "no-multiple-empty-lines": "warn",
+    "eol-last": [
+      "error",
+      "always"
+    ],
+    "no-console": "off",
+    "camelcase": "warn",
+    "eqeqeq": [
+      "error",
+      "always",
+      {
+        "null": "ignore"
+      }
+    ],
+    "semi": [
+      "warn",
+      "always"
+    ]
+  }
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +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/
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,9 @@
+{
+  "cSpell.words": [
+    "Codewars",
+    "Maartje",
+    "Maartje's",
+    "blabla",
+    "roverjs"
+  ]
+}
diff --git a/LICENSE b/LICENSE
@@ -0,0 +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/ 
+or send a letter to Creative Commons, PO Box 1866, Mountain View, CA 94042, USA.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ Here you can find course content and homework for the JavaScript2 module
 
 |Week|Topic|Read|Homework|
 |----|-----|----|--------|
-|1.|• Capturing user input <br>• Events<br>• [Basic DOM manipulations (img src, innerHTML)](../../../fundamentals/blob/master/fundamentals/DOM_manipulation.md)<br>• Code debugging using the browser <br>• [Code commenting](../../../fundamentals/blob/master/fundamentals/code_commenting.md)<br>• Structuring code files<br>• [Code formatting](../../../fundamentals/blob/master/fundamentals/code_formatting.md) |[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)|
+|1.|• Capturing user input <br>• Events<br>• [Basic DOM manipulations (img src, innerHTML)](../../../fundamentals/blob/master/fundamentals/DOM_manipulation.md)<br>• Code debugging using the browser <br>• [Code commenting](../../../fundamentals/blob/master/fundamentals/code_commenting.md)<br>• Structuring code files<br>• [Code formatting](../../../fundamentals/blob/master/fundamentals/code_formatting.md)<br>• [Handing in homework via PR](../../..//fundamentals/blob/master/fundamentals/homework_pr.md) |[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)|
 |2.|• Functions + JSON/Arrays<br>• [Array Manipulations](../../../fundamentals/blob/master/fundamentals/array_manipulation.md)<br>• JSON<br>• [Map and filter](../../../fundamentals/blob/master/fundamentals/map_filter.md)<br>• Arrow functions |[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|
 |3.|• [Closures](../../../fundamentals/blob/master/fundamentals/scope_closures_this.md) <br>• Callbacks|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|
 
@@ -19,3 +19,5 @@ We expect you to __always__ come prepared to the class on Sunday.
 A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](../../../fundamentals/blob/master/fundamentals/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 :)*
+
+<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
@@ -54,37 +54,50 @@ Your fellow students have provided you with feedback in Trello.
 - Implement both feedback from Trello and Github.
 - Check on one of your fellow students code and issues and see if her or she implemented their feedback correctly. If there are some things that can be improved make an issue suggesting further improvements. If you think that the feedback has been implemented correctly create a issue saying something like: "nice work you can clear your issues".
 
-## Step 2: Reorganize your Github 
+## Step 2: Reorganize your GitHub 
 
 _Deadline Monday_
 
-Your Github should contain two repositories called `hyf-javascript1` and `hyf-javascript2`. Inside the JavaScript repositories you should have three folders, called week1, week2, and week3 (or something similar). Inside these folders you should have the different assignments (a file per exercises). Try and find proper names for the exercises that reflect somehow what is going on in the code. Avoid using spaces in your file names, this makes it harder to "run" you files. Also make sure that all your JavaScript files have a `.js` extension.
+Your Github should contain a repository called `hyf-javascript1`. Inside this JavaScript repository you should have three folders, called week1, week2, and week3 (or something similar). Inside these folders you should have the different assignments (a file per exercises). Try and find proper names for the exercises that reflect somehow what is going on in the code. Avoid using spaces in your file names, this makes it harder to "run" you files. Also make sure that all your JavaScript files have a `.js` extension.
 
 ## Step 3: Custom DOM manipulation challenge :mortar_board:
 
 _Deadline Saturday_
 
-1. Open a new js file and start by declaring an array that contains 10 strings. These strings should be of book titles you have read (or made up) and be lowercase without spaces or special characters so that you can use these later as Id's. (Example: Harry Potter's - The Chamber of Secrets -> `harry_potter_chamber_secrets`). 
+> **Preparation**: Fork this repository and use the [Homework Pull Request Workflow](../../../../fundamentals/blob/master/fundamentals/homework_pr.md) to hand in your homework.
 
-2. Create a basic html file called index.html and use it to load the js file, confirm the console.log show the array. (This is for debugging and making sure everything is in order. Delete it later when you're done :))
+Modify the (mostly empty) files in the `Week1/homework` folder for this step.
 
-3. Make a function (or functions) that generate a `ul` with `li` elements for each book ID in the array using a for loop. 
+**3.1** Open the `apps.js` and start by declaring an array that contains 10 strings. These strings should be of book titles you have read (or made up) and be lowercase without spaces so that you can use these later as HTML `id` attributes. (Example: _Harry Potter's - The Chamber of Secrets_ -> `harry_potter_chamber_secrets`). Add a console.log statement to output this array to console. (This is for debugging and making sure everything is in order. Delete it later when you're done :))
 
-4. Make an object containing information for each book. Each item (object) in this object should have the book ID you thought up in point 1 as a key, and it should have at least the following fields: title, language and author. 
+**3.2** Open the empty `index.html` and add the required HTML to load the `app.js` file. Open `index.html` in the browser and confirm that the `console.log` statement shows the array. (Open the Chrome Developer Tools and inspect the console.) 
 
-5. Now change the function you used to display the book ID's in a list to take the actual information about the book from the object and display that. Make sure you choose the right html elements for each piece of info, for instance, a heading for the title.
+**3.3** Remove the temporary `console.log` from step 3.1. Make a function (or functions) that generate a `ul` with `li` elements for each book ID in the array using a `for` loop. Make sure that the function names you choose are an accurate reflection of what they do. As a reminder, here are the recommended [Naming Conventions](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/naming_conventions.md).
 
-6. Beautify your html page with css, add sources and alts to each of the images.
+**3.4** Make an object (_not an array!_) containing information for each book. Each property of this object should be another (i.e., nested) object with the book ID you thought up in step 3.1 as a key, and at least the following properties: `title`, `language` and `author`. 
+
+**3.5** Now change the function from step 3.3 that you used to display the book ID's in a list to take the actual information about the book from the object and display that. Make sure you choose the correct HTML elements for each piece of info, for instance, a heading for the title.
+
+**3.6** Beautify your html page with css (use the `style.css` file for that), add sources and alts to each of the images.
 
-7. Download book covers for each book, construct a new Object which has as keys the bookId's again, and as value the path to the image source (e.g. `{"harry_potter_blabla": "./img/harry_potter_blabla.jpg", ...}`). Now loop over these entries (_hint: `Object.keys(objectName)` gives you an array containing the keys_). Then write a function which places an image at the corresponding `li` element. Remember that Objects are not ordered, so you cannot guarantee that the first key is the first `li` element. (_Hint: you could give each `li` item an `id` tag by modifying the function you made before_)
+**3.7** Find and download book covers for each book and construct a new object which has as keys the book IDs again, and as value the path to the image source (e.g. `{ harry_potter_blabla: './img/harry_potter_blabla.jpg', ... }`). 
 
-```
-How to hand in your homework:
-• Upload your homework in your "hyf-javascript2" Github repository. Make sure to create a new folder "week1" first. 
-• Upload your homework files inside the week1 folder and write a description for this “commit”.
-• Your hyf-javascript2/week1 should now contain an index.html, main.css and a script.js file (and the images folder)
-• Place the link to your repository folder in Trello.
-```
+Loop over these entries (_hint: `Object.keys(objectName)` gives you an array containing the keys_). Then write a function which places an image at the corresponding `li` element. Remember that objects are not ordered, so you cannot guarantee that the first key is the first `li` element. (_Hint: you could give each `li` item an `id` tag by modifying the function you made before._)
+
+
+### How to hand in your homework:
+
+Go over your homework one last time:
+
+- Does every file run without errors and with the correct results when you run them with Node?
+- Does every file start with `'use strict';`?
+- 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))?
+
+If the answer is 'yes' to all preceding questions you are ready to follow these instructions:
+
+- [Handing in homework](../../../../fundamentals/blob/master/fundamentals/homework_pr.md)
 
 ## Step 4: **FreeCodeCamp challenges:**
 
@@ -116,13 +129,4 @@ it’s a great way to really practice JavaScript a lot in various problems.
 
 Please note, there are various challenges all sorted on difficultly called KIU. Kiu 8 is the easiest, Kiu 1 is the hardest, we expect you to do challenges around level 8, 7 maybe.
 
-enjoy!
-
-:octocat: 
-```
-How to hand in your homework:
-• Create a new repository "hyf-javascript2". Also create a new folder "week1" inside this repository. 
-• Upload your homework files inside the week1 folder and write a description for this “commit”.
-• Your hyf-javascript2/week1 should now contain the files of your homework.
-• Place the link to your repository folder in Trello.
-```
+Enjoy!
diff --git a/Week1/README.md b/Week1/README.md
@@ -10,7 +10,7 @@ In week one we will discuss the following topics:
 • Structuring code files
 ```
 
-- Chrome DevTools [Debugging](https://developers.google.com/web/tools/chrome-devtools/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3) 
+- Chrome DevTools [Debugging](https://developers.google.com/web/tools/chrome-devtools/) 
 
 ### A Refresher from some previous covered topics:
 

diff --git a/Week1/code_examples/Closures (class 10).md b/Week1/code_examples/Closures (class 10).md
diff --git a/Week1/code_examples/closure1.js b/Week1/code_examples/closure1.js
diff --git a/Week1/code_examples/closure2.js b/Week1/code_examples/closure2.js
diff --git a/Week1/code_examples/equal.js b/Week1/code_examples/equal.js