From 05fb0e5e4945ded2f1098042113580f8a3baa136 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Thu, 6 Apr 2017 14:32:31 +0200 Subject: [PATCH 001/472] update class9 --- README.md | 40 ++++++++++++++++++++++++---------------- Week0/README.md | 14 +++++++------- Week1/MAKEME.md | 30 +++++++++++++----------------- Week1/README.md | 2 +- Week2/MAKEME.md | 2 +- Week3/README.md | 2 ++ Week4/MAKEME.md | 4 ++++ Week5/MAKEME.md | 6 +++++- Week6/MAKEME.md | 2 +- Week7/MAKEME.md | 5 +++++ Week7/README.md | 1 + 11 files changed, 64 insertions(+), 44 deletions(-) create mode 100644 Week7/MAKEME.md create mode 100644 Week7/README.md diff --git a/README.md b/README.md index 20efb644f..fc6ecbbf1 100644 --- a/README.md +++ b/README.md @@ -1,30 +1,38 @@ - +> Please help us improve and share your feedback! If you find better tutorials or links, please share them by opening a Pull Request. # Hack Your JavaScript -This is the description of the classes for JavaScript fundamentals. +Here you can find course content and homework for the JavaScript 1,2 and 3 modules ## Composition (Module goals) |Week|Topic|Read|Homework| |----|-----|----|--------| -|0.|Preparation for first JavaScript session|[Reading Week 0](https://github.com/HackYourFuture/JavaScript/tree/master/Week0)|-| -|1.|Values, Operators and Variables. Primitives Types ( Strings, Numbers, Arrays, Functions, Objects literals) Conditions|[Reading Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1)| [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/MAKEME.md)| -|2.|Functions, For and While Loops,String and Array Manipulations |[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2)|[Homework Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/MAKEME.md)| -|3.|String and Array Manipulations|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/MAKEME.md)| -|4.|Closures, Scope and Immediately Invoked function expression, Callbacks and Promises|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/README.md)|[Homework Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/MAKEME.md)| -|5.|Async VS Sync, XHTTP Requests|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5/README.md)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5/MAKEME.md)| -|6.|Recap: Closures, Promises, Callbacks, XHTTP Requests, Objects and Instances|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6/README.md)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6/MAKEME.md)| -|7.|Test Driven Development|TBA|TBA| -|8.|Test Driven Development|TBA|TBA| +|0.|Preparation for your first JavaScript session|[Reading Week 0](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week0)|-| +|1.| - Intro JavaScript (What is it, where can you use it for)
- Basic Data types [Strings, Numbers, Arrays]
- Variables
- Operators
- Conditions -
- Naming conventions| [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md)| [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week1/MAKEME.md)| +|2.| CLI session with Unmesh <3|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week2)|[CLI Homework Week 2](https://github.com/HackYourFuture/CommandLine/blob/master/HomeWork.md)| +|3.|- Loops (for/while) - Functions
-Scope
-Advanced data types [Objects]
- Array Manipulations
- Basic DOM manipulations [img src, innerHTML] - Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3/MAKEME.md)| +|4.|- First Git Session with Unmesh :smiling_imp:
- JSON
- Code debugging using the browser
- Functions + JSON/Arrays
- Code flow (order of execution)
- (capturing user input)
- Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/laurens_thomas/README.md)|[Git Homework Week 4](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/laurens_thomas/MAKEME.md)| +|5.|- Second Git Session :see_no_evil:
- Events
-Callbacks
- XHTTP Requests
- API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5/README.md)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5/MAKEME.md)| +|6.|- Async VS Sync
- Polling|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/README.md)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/MAKEME.md)| +|7.|Third Git Session (Git work flow :muscle:)
- (re)writing data structures (in JSON)
-Map, reduce filter
|[Reading Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7/MAKEME.md)|[Homework Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7/MAKEME.md)| +|8.| - Closures
- Promises|TBA|TBA| |9.|Test Driven Development|TBA|TBA| -# References -_We demand our student to be prepared (or at least to briefly read) the content of the class._ +__Kind note:__ +We expected you to __always__ come prepared to the class on Sunday. + +## Module goals: + +### Week 1-3: +- Deliverable Module 1 +A basic program with multiple functions (reacting to user input) + +### Week 4-6: + +### Week 7-9: -I'm concerned that a lot of students would like to have video resources, although my preference goes trough books. -If you would like to recommend resource that I should add, please pm me. -Module goals: +### Overall A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](https://github.com/HackYourFuture/JavaScript/tree/master/fundamentalsand) and research/ ask for help (Slack!) with the concepts that are not entirely clear. diff --git a/Week0/README.md b/Week0/README.md index 181c7e65e..70c900586 100644 --- a/Week0/README.md +++ b/Week0/README.md @@ -1,11 +1,11 @@ -#Reading material for your first JavaScript lesson: +# Reading material for your first JavaScript lesson: -## Lesson 1 +## Read before session 1: -- Introduction ~ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction -- Introduction with scalfolding ~ http://jsforcats.com/ -- Values ~ http://eloquentjavascript.net/01_values.html +- Read this ~ http://speakingjs.com/es5/ch01.html read up to and including the *Strings* chapter (it’s okay if you don’t understand all of it yet, we will cover these concepts in class as well. Do make sure to write or document the questions you have so we can discuss them in class) -_Please go through the material and come to class prepared!_ +- Read the entire JavaScript Introduction at MDN~ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction -Helpful resource: http://jsbooks.revolunet.com/ \ No newline at end of file +_Please go through all of the material and come to class prepared!_ + +Helpful resource: http://jsbooks.revolunet.com/ (here you can find tons of free JavaScript books online) \ No newline at end of file diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index b91276f26..36f387542 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -1,20 +1,16 @@ -##Assignments week 1: +## Assignments week 1: -Create a .js file that prints something to the console -Create a function that takes 3 arguments and returns the sum of the three arguments. -Write a program to answer the following questions: -* Can you store multiple types in an array? Numbers and strings? -* Can you compare inifities? (Not in Eyad's world) - does 6/0 == 10/0? How can you test this? -Create an object and a function that takes the object as a parameter and prints out all of its names and values. -On freecodecamp.com please try to do all [Basic JavaScript](https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works) exercies (there are some topics we did not cover but you can do it). Please make sure you REALLY understand the exercies below: +1. Create a .js file that prints something to the console +2. Create a function that takes 3 arguments and returns the sum of the three arguments. +3. Write a program to answer the following questions: + * Can you store multiple types in an array? Numbers and strings? + * Can you compare inifities? (Not in Eyad's world) - does 6/0 == 10/0? How can you test this? +4. Create an object and a function that takes the object as a parameter and prints out all of its names and values. +On freecodecamp.com please try to do all [Basic JavaScript](https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works) exercises (there are some topics we did not cover but you can do it). Please make sure you REALLY understand the exercises below: -https://www.freecodecamp.com/challenges/multiply-two-decimals-with-javascript - -https://www.freecodecamp.com/challenges/store-multiple-values-in-one-variable-using-javascript-arrays - -https://www.freecodecamp.com/challenges/build-javascript-objects - -https://www.freecodecamp.com/challenges/add-new-properties-to-a-javascript-object - -https://www.freecodecamp.com/challenges/delete-properties-from-a-javascript-object +- https://www.freecodecamp.com/challenges/multiply-two-decimals-with-javascript +- https://www.freecodecamp.com/challenges/store-multiple-values-in-one-variable-using-javascript-arrays +- https://www.freecodecamp.com/challenges/build-javascript-objects +- https://www.freecodecamp.com/challenges/add-new-properties-to-a-javascript-object +- https://www.freecodecamp.com/challenges/delete-properties-from-a-javascript-object diff --git a/Week1/README.md b/Week1/README.md index f710a91f3..bc1f2149b 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -1,4 +1,4 @@ -#Reading material for the second lecture: +# Reading material for the second lecture: - Functions ~ http://eloquentjavascript.net/03_functions.html - Program structure ~ http://eloquentjavascript.net/02_program_structure.html diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index d63cd520f..7b1d73d5a 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -1,4 +1,4 @@ -##Assignment week 2 +## Assignment week 2 1. Create a function that takes two objects as parameters and compares them. You will actually need to write two functions - one that compares with == and one that compares with ===. Remember that objects can have objects inside of them so you'll need to find a way to compare every element of every object (types and values). For example: diff --git a/Week3/README.md b/Week3/README.md index babd6a127..2a484342a 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -1,6 +1,8 @@ # Reading material for the fourth lecture +Next week Unmesh will give you your first Git session, please look through the [GIT](https://github.com/HackYourFuture/Gitrepository) and read the learning goals + Function call() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call Function apply() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply Function bind() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index 2b585e99b..83ef5ec45 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -1,5 +1,9 @@ # Homework Week 4 +## Git Homework: + +[Make these assignments](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md) + ## Reading * code style conventions diff --git a/Week5/MAKEME.md b/Week5/MAKEME.md index ba7557652..f42254adf 100644 --- a/Week5/MAKEME.md +++ b/Week5/MAKEME.md @@ -1,4 +1,8 @@ -## Homework week 5 +## Homework Week 5 + +## Git Homework: + +[Make these assignments](https://github.com/HackYourFuture/Git/blob/master/Lecture-2.md) ### Refresher http://conceptf1.blogspot.nl/2013/11/javascript-closures.html diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md index 92ad1b891..09314b47f 100644 --- a/Week6/MAKEME.md +++ b/Week6/MAKEME.md @@ -1,4 +1,4 @@ -# Homework week 6 +# Homework Week 6 Finish homework week 5: https://github.com/HackYourFuture/JavaScript/blob/master/Week5/MAKEME.md and hand in the link to your Github Repository in Trello diff --git a/Week7/MAKEME.md b/Week7/MAKEME.md new file mode 100644 index 000000000..2acaa9f71 --- /dev/null +++ b/Week7/MAKEME.md @@ -0,0 +1,5 @@ +# Homework Week 7 + +## Git Homework: + +[Make these assignments](https://github.com/HackYourFuture/Git/blob/master/Lecture-3.md) \ No newline at end of file diff --git a/Week7/README.md b/Week7/README.md new file mode 100644 index 000000000..d1d43cec8 --- /dev/null +++ b/Week7/README.md @@ -0,0 +1 @@ +# Reading to be done before the 8th lecture \ No newline at end of file From ff62aa55bcf5095501fb1d70f4cd677954c7ec1b Mon Sep 17 00:00:00 2001 From: mkruijt Date: Thu, 6 Apr 2017 14:54:13 +0200 Subject: [PATCH 002/472] class9 --- README.md | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index fc6ecbbf1..2d7ad0784 100644 --- a/README.md +++ b/README.md @@ -8,30 +8,31 @@ Here you can find course content and homework for the JavaScript 1,2 and 3 modul |Week|Topic|Read|Homework| |----|-----|----|--------| |0.|Preparation for your first JavaScript session|[Reading Week 0](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week0)|-| -|1.| - Intro JavaScript (What is it, where can you use it for)
- Basic Data types [Strings, Numbers, Arrays]
- Variables
- Operators
- Conditions -
- Naming conventions| [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md)| [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week1/MAKEME.md)| -|2.| CLI session with Unmesh <3|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week2)|[CLI Homework Week 2](https://github.com/HackYourFuture/CommandLine/blob/master/HomeWork.md)| -|3.|- Loops (for/while) - Functions
-Scope
-Advanced data types [Objects]
- Array Manipulations
- Basic DOM manipulations [img src, innerHTML] - Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3/MAKEME.md)| -|4.|- First Git Session with Unmesh :smiling_imp:
- JSON
- Code debugging using the browser
- Functions + JSON/Arrays
- Code flow (order of execution)
- (capturing user input)
- Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/laurens_thomas/README.md)|[Git Homework Week 4](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/laurens_thomas/MAKEME.md)| -|5.|- Second Git Session :see_no_evil:
- Events
-Callbacks
- XHTTP Requests
- API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5/README.md)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5/MAKEME.md)| -|6.|- Async VS Sync
- Polling|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/README.md)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/MAKEME.md)| -|7.|Third Git Session (Git work flow :muscle:)
- (re)writing data structures (in JSON)
-Map, reduce filter
|[Reading Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7/MAKEME.md)|[Homework Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7/MAKEME.md)| -|8.| - Closures
- Promises|TBA|TBA| +|1.|• Intro JavaScript (What is it, where can you use it for)
• Basic Data types [Strings, Numbers, Arrays]
• Variables
• Operators
• Conditions
• Naming conventions| [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md)| [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week1/MAKEME.md)| +|2.| CLI session with Unmesh :heart:|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week2)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week2/MAKEME.md) + [CLI Homework Week 2](https://github.com/HackYourFuture/CommandLine/blob/master/HomeWork.md)| +|3.|• Loops (for/while)
• Functions
• Scope
• Advanced data types [Objects]
• Array Manipulations
• Basic DOM manipulations [img src, innerHTML]
• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3/MAKEME.md)| +|4.|• First Git Session with Unmesh :smiling_imp:
•JSON
• Code debugging using the browser
• Functions + JSON/Arrays
• Code flow (order of execution)
• (capturing user input)
• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/laurens_thomas/README.md)|[Git Homework Week 4](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/laurens_thomas/MAKEME.md)| +|5.|• Second Git Session :see_no_evil:
• Events
• Callbacks
• XHTTP Requests
• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5/README.md)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5/MAKEME.md)| +|6.|• Async VS Sync
• Polling|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/README.md)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/MAKEME.md)| +|7.|• Third Git Session (Git Workflow :muscle:)
• (re)writing data structures (in JSON)
• Map, reduce filter|[Reading Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7/MAKEME.md)|[Homework Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7/MAKEME.md)| +|8.|• Closures
• Promises|TBA|TBA| |9.|Test Driven Development|TBA|TBA| -__Kind note:__ +__Kind note:__
We expected you to __always__ come prepared to the class on Sunday. + ## Module goals: ### Week 1-3: -- Deliverable Module 1 A basic program with multiple functions (reacting to user input) ### Week 4-6: +TBA ### Week 7-9: - +TBA ### Overall A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](https://github.com/HackYourFuture/JavaScript/tree/master/fundamentalsand) and research/ ask for help (Slack!) with the concepts that are not entirely clear. From 5256a723d4094489f893265f32977ff213f219e5 Mon Sep 17 00:00:00 2001 From: Laurens Date: Thu, 6 Apr 2017 15:25:10 +0200 Subject: [PATCH 003/472] Updated the deliverables of the different modules --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 2d7ad0784..ec7f25928 100644 --- a/README.md +++ b/README.md @@ -20,7 +20,7 @@ Here you can find course content and homework for the JavaScript 1,2 and 3 modul __Kind note:__
-We expected you to __always__ come prepared to the class on Sunday. +We expect you to __always__ come prepared to the class on Sunday. ## Module goals: @@ -29,10 +29,10 @@ We expected you to __always__ come prepared to the class on Sunday. A basic program with multiple functions (reacting to user input) ### Week 4-6: -TBA +A tool capable of loading a JSON file and repreenting it in the DOM ### Week 7-9: -TBA +A web app with external data source using at least one API 《〠_〠》 ### Overall A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](https://github.com/HackYourFuture/JavaScript/tree/master/fundamentalsand) and research/ ask for help (Slack!) with the concepts that are not entirely clear. From 5341c1ce719b3ef65e93b0151ac2e63d29f01362 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Thu, 6 Apr 2017 17:29:54 +0200 Subject: [PATCH 004/472] update class9 --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index ec7f25928..80aac2f10 100644 --- a/README.md +++ b/README.md @@ -9,10 +9,10 @@ Here you can find course content and homework for the JavaScript 1,2 and 3 modul |----|-----|----|--------| |0.|Preparation for your first JavaScript session|[Reading Week 0](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week0)|-| |1.|• Intro JavaScript (What is it, where can you use it for)
• Basic Data types [Strings, Numbers, Arrays]
• Variables
• Operators
• Conditions
• Naming conventions| [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md)| [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week1/MAKEME.md)| -|2.| CLI session with Unmesh :heart:|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week2)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week2/MAKEME.md) + [CLI Homework Week 2](https://github.com/HackYourFuture/CommandLine/blob/master/HomeWork.md)| +|2.| [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :heart:|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week2)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week2/MAKEME.md) + [CLI Homework Week 2](https://github.com/HackYourFuture/CommandLine/blob/master/HomeWork.md)| |3.|• Loops (for/while)
• Functions
• Scope
• Advanced data types [Objects]
• Array Manipulations
• Basic DOM manipulations [img src, innerHTML]
• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3/MAKEME.md)| -|4.|• First Git Session with Unmesh :smiling_imp:
•JSON
• Code debugging using the browser
• Functions + JSON/Arrays
• Code flow (order of execution)
• (capturing user input)
• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/laurens_thomas/README.md)|[Git Homework Week 4](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/laurens_thomas/MAKEME.md)| -|5.|• Second Git Session :see_no_evil:
• Events
• Callbacks
• XHTTP Requests
• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5/README.md)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5/MAKEME.md)| +|4.|• First Git Session with Unmesh :smiling_imp:
• JSON
• Code debugging using the browser
• Functions + JSON/Arrays
• Code flow (order of execution)
• (capturing user input)
• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/laurens_thomas/README.md)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week4/MAKEME.md) + [Git Homework Week 4](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md)| +|5.|• Second Git Session :see_no_evil:
• Events
• Callbacks
• XHTTP Requests
• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5/README.md)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5/MAKEME.md) + [Git Homework Week 5](https://github.com/HackYourFuture/Git/blob/master/Lecture-2.md)| |6.|• Async VS Sync
• Polling|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/README.md)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/MAKEME.md)| |7.|• Third Git Session (Git Workflow :muscle:)
• (re)writing data structures (in JSON)
• Map, reduce filter|[Reading Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7/MAKEME.md)|[Homework Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7/MAKEME.md)| |8.|• Closures
• Promises|TBA|TBA| From 1ebe4a071bf535f54b13df470225ec965a660dd6 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Thu, 6 Apr 2017 17:57:44 +0200 Subject: [PATCH 005/472] update --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 80aac2f10..fa0093b92 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ Here you can find course content and homework for the JavaScript 1,2 and 3 modul |Week|Topic|Read|Homework| |----|-----|----|--------| |0.|Preparation for your first JavaScript session|[Reading Week 0](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week0)|-| -|1.|• Intro JavaScript (What is it, where can you use it for)
• Basic Data types [Strings, Numbers, Arrays]
• Variables
• Operators
• Conditions
• Naming conventions| [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md)| [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week1/MAKEME.md)| +|1.|• Intro JavaScript (What is it, where can you
use it for)
• Basic Data types [Strings, Numbers, Arrays]
• Variables
• Operators
• Conditions
• Naming conventions| [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md)| [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week1/MAKEME.md)| |2.| [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :heart:|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week2)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week2/MAKEME.md) + [CLI Homework Week 2](https://github.com/HackYourFuture/CommandLine/blob/master/HomeWork.md)| |3.|• Loops (for/while)
• Functions
• Scope
• Advanced data types [Objects]
• Array Manipulations
• Basic DOM manipulations [img src, innerHTML]
• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3/MAKEME.md)| |4.|• First Git Session with Unmesh :smiling_imp:
• JSON
• Code debugging using the browser
• Functions + JSON/Arrays
• Code flow (order of execution)
• (capturing user input)
• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/laurens_thomas/README.md)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week4/MAKEME.md) + [Git Homework Week 4](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md)| From d198aeec8e4515a4a5dab08c27b6f206cd747ec9 Mon Sep 17 00:00:00 2001 From: Onne Date: Sun, 9 Apr 2017 15:45:44 +0200 Subject: [PATCH 006/472] Update MAKEME.md --- Week1/MAKEME.md | 23 ++++++++++++++++------- 1 file changed, 16 insertions(+), 7 deletions(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 36f387542..c3f84cc77 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -1,11 +1,21 @@ ## Assignments week 1: -1. Create a .js file that prints something to the console -2. Create a function that takes 3 arguments and returns the sum of the three arguments. -3. Write a program to answer the following questions: - * Can you store multiple types in an array? Numbers and strings? - * Can you compare inifities? (Not in Eyad's world) - does 6/0 == 10/0? How can you test this? -4. Create an object and a function that takes the object as a parameter and prints out all of its names and values. +1. Create a `.js` file that prints `Hello` when you run it from the command line. (Hint: `node` is the program that can run your javascript files.) + +2. Create a function named `colorCar` that receives a color, and prints out, "a red car" for example. (Hint: put it in your file and run it like before.) + +3. Create a function named `vehicleType` that receives a color, and a code, 1 for car, 2 for motorbike. And prints "a blue motorbike" for example when called as `vehicleType("blue", 2)` + +4. Create a function called `vehicle`, like before, but takes another parameter called age, so that `vehicle("blue", 1, 5)` prints "a blue used car" + +5. Make a list of vehicles, you can add `"motorbike"`, `"caravan"`, `"bike"`, or more. + +6. How do you get the third element from that list? + +7. Change the function `vehicle` to use the list of question 5. So that `vehicle("green", 3, 1)` prints "a green new caravan". + +8. Use the list of vehicles to write an advertisment. So that it prints something like: `"Amazing Joe's Garage, we service cars, motorbikes, caravans and bikes."`. What if you add one more vehicle to the list, can you have that added to the list without changing your code. + On freecodecamp.com please try to do all [Basic JavaScript](https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works) exercises (there are some topics we did not cover but you can do it). Please make sure you REALLY understand the exercises below: - https://www.freecodecamp.com/challenges/multiply-two-decimals-with-javascript @@ -13,4 +23,3 @@ On freecodecamp.com please try to do all [Basic JavaScript](https://www.freecode - https://www.freecodecamp.com/challenges/build-javascript-objects - https://www.freecodecamp.com/challenges/add-new-properties-to-a-javascript-object - https://www.freecodecamp.com/challenges/delete-properties-from-a-javascript-object - From 8e134b338132845ec1c5d5c56281cad31ac13cac Mon Sep 17 00:00:00 2001 From: Onne Date: Sun, 9 Apr 2017 15:58:01 +0200 Subject: [PATCH 007/472] Update MAKEME.md --- Week1/MAKEME.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index c3f84cc77..c4100a0df 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -14,7 +14,9 @@ 7. Change the function `vehicle` to use the list of question 5. So that `vehicle("green", 3, 1)` prints "a green new caravan". -8. Use the list of vehicles to write an advertisment. So that it prints something like: `"Amazing Joe's Garage, we service cars, motorbikes, caravans and bikes."`. What if you add one more vehicle to the list, can you have that added to the list without changing your code. +8. Use the list of vehicles to write an advertisment. So that it prints something like: `"Amazing Joe's Garage, we service cars, motorbikes, caravans and bikes."`. (Hint: use a `for` loop.) + +9. What if you add one more vehicle to the list, can you have that added to the advertisement without changing the code for question 8? On freecodecamp.com please try to do all [Basic JavaScript](https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works) exercises (there are some topics we did not cover but you can do it). Please make sure you REALLY understand the exercises below: From 940177f2412ce6d501604f0a5bf7de17549e5a5a Mon Sep 17 00:00:00 2001 From: Laurens Date: Tue, 25 Apr 2017 13:25:26 +0200 Subject: [PATCH 008/472] Updated the README Added some resources to the reading material --- Week3/README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/Week3/README.md b/Week3/README.md index 2a484342a..15f12a738 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -3,7 +3,14 @@ Next week Unmesh will give you your first Git session, please look through the [GIT](https://github.com/HackYourFuture/Gitrepository) and read the learning goals +Here are some reading materials explaining the material of the previous class in more detail. Function call() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call Function apply() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply Function bind() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind Arguments - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/arguments +Closures - http://javascriptissexy.com/understand-javascript-closures-with-ease/ +Array - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype +strict mode - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode + +Read this is preparation for the material taught in the upcoming class +JSON - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON From 5fbcd5d6bf8bf64223c4034d9277f0fb709fae89 Mon Sep 17 00:00:00 2001 From: Laurens Date: Tue, 25 Apr 2017 13:31:52 +0200 Subject: [PATCH 009/472] Updated styling --- Week3/README.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/Week3/README.md b/Week3/README.md index 15f12a738..1cc349775 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -3,14 +3,14 @@ Next week Unmesh will give you your first Git session, please look through the [GIT](https://github.com/HackYourFuture/Gitrepository) and read the learning goals -Here are some reading materials explaining the material of the previous class in more detail. -Function call() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call -Function apply() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply -Function bind() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind -Arguments - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/arguments -Closures - http://javascriptissexy.com/understand-javascript-closures-with-ease/ -Array - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype -strict mode - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode +### Here are some reading materials explaining the material of the previous class in more detail. +- Function call() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call +- Function apply() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply +- Function bind() - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind +- Arguments - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/arguments +- Closures - http://javascriptissexy.com/understand-javascript-closures-with-ease/ +- Array - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype +- strict mode - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode -Read this is preparation for the material taught in the upcoming class -JSON - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON +### Read this is preparation for the material taught in the upcoming class +- JSON - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON From 768590d99cca49bd29fcb940e2b25b405728645e Mon Sep 17 00:00:00 2001 From: Laurens Date: Tue, 25 Apr 2017 13:54:19 +0200 Subject: [PATCH 010/472] Rewrote the homework Added a custom challenge that focuses on DOM manipulation --- Week3/MAKEME.md | 127 ++++-------------------------------------------- 1 file changed, 9 insertions(+), 118 deletions(-) diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 8a502204f..56c5bf41e 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -1,10 +1,7 @@ # Homework Week 3 ## Read: -- https://en.wikipedia.org/wiki/Object-oriented_programming -- https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/this -- https://developer.mozilla.org/en-US/docs/Glossary/Scope -- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions +- https://github.com/HackYourFuture/JavaScript/blob/laurens_thomas/Week3/README.md ## Challenges: - https://www.freecodecamp.com/challenges/declare-javascript-objects-as-variables @@ -12,117 +9,11 @@ - https://www.freecodecamp.com/challenges/make-unique-objects-by-passing-parameters-to-our-constructor - https://www.freecodecamp.com/challenges/make-object-properties-private -And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range - -Loops practice - https://www.freecodecamp.com/challenges/iterate-with-javascript-for-loops -https://www.freecodecamp.com/challenges/iterate-with-javascript-while-loops -https://developer.mozilla.org/en/docs/Web/JavaScript/Closures - - -### Refresher -https://forum.freecodecamp.com/t/javascript-callback-functions/14658/2 - -http://www.learn-js.org/en/Callbacks - -### Homework - -1. -We learned a little bit about callbacks in JS. A callback is simply a function passed to another function that gets executed (run) after a potentially long running operation has completed. There is another function called `setTimeout` that will wait a specified period of time and then execute a function. For example: - - ``` - function doIt() { - console.log('I am done'); - } - setTimeout(doIt, 5000) - ``` - If you run the above code it will wait 5 seconds and print `I am done`. Please read something about setTimeout on MDN. The first argument to the `setTimeout` call is the callback (`doIt`) - - You must write a function that takes 4 arguments. - - A start value - - An end value - - A callback to call if the number is divisible by 3 - - A callback to use if the number is divisible by 5 - - The function should generate an array containing values from start value to end value (inclusive). - - Then the function should itereate over the array and call the second argument if the array value is divisible by 3 - - The function should call the second argument if the array value is divisible by 5 - - Both functions should be called if the array value is divisible by both 3 and 5 - - ``` - THIS IS FAKE CODE - function threeFive(startIndex, stopIndex, threeCallback, fiveCallback) { - // make array - // start at beginning of array and check if you should call threeCallback or fiveCallback or go on to next - } - threeFive(10, 15, sayThree, sayFive); - - // Should create an array [10,11,12,13,14,15] - // and call sayFive, sayThree, sayThree, sayFive - please make sure you see why these calls are made before you start coding - ``` - - -2. -Please solve this problem using: -https://www.freecodecamp.com/challenges/repeat-a-string-repeat-a-string - 1. A for loop - 2. A while loop - 3. A do loop - -3. -Some practice with objects -https://www.freecodecamp.com/challenges/construct-javascript-objects-with-functions - -4. -Nested loops -https://www.freecodecamp.com/challenges/nesting-for-loops - - -5. -We did some work with arrays - `var arr = [1,2,3]` -We can also nest arrays inside arrays like this `var arr2d = [[1,2], [3,4], [5,6]]` (for math people you can think of this as a matrix) -How would you print all the items of an array with 3 dimensions? -How about with K dimensions? -What if you didn't know how deep the array was nested? (You don't have to write code for this but think about it) - -6. -Here are two functions that look like they do the something similar but they print different results. Please explain what's going on here. - -``` -var x = 9; -function f1(val) { - val = val+1; - return val; -} -f1(x); -console.log(x); - - -var y = { x: 9 }; -function f2(val) { - val.x = val.x + 1; - return val; -} -f2(y); -console.log(y); -``` -If you are confused please run the code and then consult the Google for "javascript pass by value pass by reference" - -7. -Next time we're going to cover the following Javascript topics: -- Immediately Invoked Function Execution (IIFE) and anonymous functions -- The this variable -- Scope and closures -- Promises (callbacks part 2) -- Using APIs - -Please read up on these topics - - - - - - - +And a custom DOM manipulation challenge :mortar_board: +1. Make a list of >= 10 books you've read, store it in an array, log the array +2. Create a basic html file called inxed.html and use it to load the js file, confirm the console.log show the lists +3. Generate a `ul` with a `li` for each book in the array using a forloop and a function +4. Use a forloop to generate objects for each book, then add at least the following properties to each object: title, language, author. Change the function generating the `ul` so that it now generates a section for each object. +5. Fill each section with the details you have for each book using a function. Make sure you choose the right html elements for each piece of info, for instance, a heading for the title. +6. Download book covers for each book, give each book object a property storing the location of the cover image for that book. write a function that uses a query selector to select each of the previously generated sections and insert a generated `img` element that shows the books cover. +7. Beautify your html page with css, add sources and alts to each of the images. From 990b0410b3d1318887b9b67b0223088ffdb47d49 Mon Sep 17 00:00:00 2001 From: Laurens Date: Tue, 25 Apr 2017 17:34:08 +0200 Subject: [PATCH 011/472] Changed by Thomas --- Week3/MAKEME.md | 21 ++++++++++++++------- 1 file changed, 14 insertions(+), 7 deletions(-) diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 56c5bf41e..f0c9ec6ec 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -10,10 +10,17 @@ - https://www.freecodecamp.com/challenges/make-object-properties-private And a custom DOM manipulation challenge :mortar_board: -1. Make a list of >= 10 books you've read, store it in an array, log the array -2. Create a basic html file called inxed.html and use it to load the js file, confirm the console.log show the lists -3. Generate a `ul` with a `li` for each book in the array using a forloop and a function -4. Use a forloop to generate objects for each book, then add at least the following properties to each object: title, language, author. Change the function generating the `ul` so that it now generates a section for each object. -5. Fill each section with the details you have for each book using a function. Make sure you choose the right html elements for each piece of info, for instance, a heading for the title. -6. Download book covers for each book, give each book object a property storing the location of the cover image for that book. write a function that uses a query selector to select each of the previously generated sections and insert a generated `img` element that shows the books cover. -7. Beautify your html page with css, add sources and alts to each of the images. + +1. Open a new js file and start by declaring in array with in there 10 strings. These strings should be of book title's 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`). + +2. Create a basic html file called inxed.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 :)) + +3. Make a function (or functions) that generate a `ul` with `li` elements for each book ID in the array using a for loop. + +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. + +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. + +6. Beautify your html page with css, add sources and alts to each of the images. + +7. __Optional (expert)__ 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 this array (_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_) From 85c748c793ca10f02499e47526a68bd57003a66f Mon Sep 17 00:00:00 2001 From: "T.M. Meijers" Date: Wed, 26 Apr 2017 10:12:25 +0200 Subject: [PATCH 012/472] Update MAKEME.md --- Week3/MAKEME.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index f0c9ec6ec..8f3e10a8d 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -23,4 +23,4 @@ And a custom DOM manipulation challenge :mortar_board: 6. Beautify your html page with css, add sources and alts to each of the images. -7. __Optional (expert)__ 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 this array (_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_) +7. __Optional (expert)__ 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_) From 9337aff78cbebb1a0a8b996156fbec844b983029 Mon Sep 17 00:00:00 2001 From: "T.M. Meijers" Date: Wed, 26 Apr 2017 10:12:58 +0200 Subject: [PATCH 013/472] Update MAKEME.md --- Week3/MAKEME.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 8f3e10a8d..6113487a0 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -23,4 +23,4 @@ And a custom DOM manipulation challenge :mortar_board: 6. Beautify your html page with css, add sources and alts to each of the images. -7. __Optional (expert)__ 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_) +7. __Optional (expert)__ 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_) From c5bec8d5516acd92eb7eafd07c6b3071449df29c Mon Sep 17 00:00:00 2001 From: Laurens Date: Sun, 30 Apr 2017 15:44:07 +0200 Subject: [PATCH 014/472] Updated the homework It's not finished yet. --- Week4/MAKEME.md | 48 +++++++++--------------------------------------- 1 file changed, 9 insertions(+), 39 deletions(-) diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index 83ef5ec45..21c4c175a 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -1,45 +1,15 @@ # Homework Week 4 -## Git Homework: - -[Make these assignments](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md) - -## Reading - -* code style conventions - * read http://javascript.crockford.com/code.html - -* private members, the this keyword, closures - * read about: private members in javascript - * study: javascript equality table - * read about: closures - +## Read: +- https://github.com/HackYourFuture/JavaScript/blob/laurens_thomas/Week4/README.md ## Challenges: -### Object Oriented and Functional Programming -- https://www.freecodecamp.com/challenges/iterate-over-arrays-with-map -- https://www.freecodecamp.com/challenges/condense-arrays-with-reduce -- https://www.freecodecamp.com/challenges/filter-arrays-with-filter -- https://www.freecodecamp.com/challenges/sort-arrays-with-sort -- https://www.freecodecamp.com/challenges/reverse-arrays-with-reverse -- https://www.freecodecamp.com/challenges/concatenate-arrays-with-concat -- https://www.freecodecamp.com/challenges/split-strings-with-split -- https://www.freecodecamp.com/challenges/join-strings-with-join - - -### Basic Algorithm Scripting -- https://www.freecodecamp.com/challenges/get-set-for-our-algorithm-challenges -- https://www.freecodecamp.com/challenges/reverse-a-string -- https://www.freecodecamp.com/challenges/factorialize-a-number -- https://www.freecodecamp.com/challenges/check-for-palindromes -- https://www.freecodecamp.com/challenges/find-the-longest-word-in-a-string - -## Tutorial - -Go through this tutorial from [SoloLearn](https://www.sololearn.com/Course/JavaScript/) to check in with some of the fundamental concepts from the previous weeks. - -## Future readings: -- http://eloquentjavascript.net/06_object.html -- http://eloquentjavascript.net/05_higher_order.html +custom challenge: +1. Go to http://www.omdbapi.com/?s=dog and change the word dog in the url to a different common word. You will get as a result, a list of movie with this word in the title. Make sure you get at least 5 results. +2. You can copy the JSON and put it at the bottom of your javascript file. Print the title of the 3rd movie in the array to the console. +3. Make a ul with a li for each title (just like you did with the books in the previous assignment +4. Use CSS to divide the page in two columns. The left column will have a list of the titles for each movie. The right column will have all the information listed for each movie. +5. Replace the "Poster" property with the actual image of the poster. +6. Use the imdbID to create an URL to the IMDB page for that movie (hint: IMDB urls always look like this http://www.imdb.com/title/[imdbId] where [imdbId] would be replaced by the actual Id. If you do this correctly, each movie From 64d51a504c6f6b21ab7032b85c36c64e0cf6b339 Mon Sep 17 00:00:00 2001 From: Laurens Date: Wed, 3 May 2017 16:00:32 +0200 Subject: [PATCH 015/472] Updated the structure a little bit Shifted some things around to better reflect reality --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index fa0093b92..023673741 100644 --- a/README.md +++ b/README.md @@ -10,10 +10,10 @@ Here you can find course content and homework for the JavaScript 1,2 and 3 modul |0.|Preparation for your first JavaScript session|[Reading Week 0](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week0)|-| |1.|• Intro JavaScript (What is it, where can you
use it for)
• Basic Data types [Strings, Numbers, Arrays]
• Variables
• Operators
• Conditions
• Naming conventions| [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md)| [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week1/MAKEME.md)| |2.| [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :heart:|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week2)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week2/MAKEME.md) + [CLI Homework Week 2](https://github.com/HackYourFuture/CommandLine/blob/master/HomeWork.md)| -|3.|• Loops (for/while)
• Functions
• Scope
• Advanced data types [Objects]
• Array Manipulations
• Basic DOM manipulations [img src, innerHTML]
• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3/MAKEME.md)| +|3.|• Loops (for/while)
• Functions
• Closures
• Scope
• Advanced data types [Objects]
• Array Manipulations
• Basic DOM manipulations [img src, innerHTML]
• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3/MAKEME.md)| |4.|• First Git Session with Unmesh :smiling_imp:
• JSON
• Code debugging using the browser
• Functions + JSON/Arrays
• Code flow (order of execution)
• (capturing user input)
• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/laurens_thomas/README.md)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week4/MAKEME.md) + [Git Homework Week 4](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md)| |5.|• Second Git Session :see_no_evil:
• Events
• Callbacks
• XHTTP Requests
• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5/README.md)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5/MAKEME.md) + [Git Homework Week 5](https://github.com/HackYourFuture/Git/blob/master/Lecture-2.md)| -|6.|• Async VS Sync
• Polling|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/README.md)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/MAKEME.md)| +|6.|• Async VS Sync
• Polling
• Structure for a basic SPA|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/README.md)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/MAKEME.md)| |7.|• Third Git Session (Git Workflow :muscle:)
• (re)writing data structures (in JSON)
• Map, reduce filter|[Reading Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7/MAKEME.md)|[Homework Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7/MAKEME.md)| |8.|• Closures
• Promises|TBA|TBA| |9.|Test Driven Development|TBA|TBA| From 85aa162921e5d1eee4ba471ce0d189692187f343 Mon Sep 17 00:00:00 2001 From: Laurens Date: Wed, 3 May 2017 16:33:46 +0200 Subject: [PATCH 016/472] Updated reading materials Thomas will update this further with some reading from the JS book --- Week4/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Week4/README.md b/Week4/README.md index cc540779f..9ce6796f7 100644 --- a/Week4/README.md +++ b/Week4/README.md @@ -1,6 +1,6 @@ ### Reading Week 4 To be read before the 5th lecture: - -- http://eloquentjavascript.net/06_object.html -- http://eloquentjavascript.net/05_higher_order.html \ No newline at end of file +- Code conventions: http://javascript.crockford.com/code.html +- Objects continued: http://eloquentjavascript.net/06_object.html +- XHTTP requests: https://www.kirupa.com/html5/making_http_requests_js.htm From aa71e84f5cff3b7d2e09021931bc89d6a38c5a95 Mon Sep 17 00:00:00 2001 From: Laurens Date: Wed, 3 May 2017 17:21:36 +0200 Subject: [PATCH 017/472] Updated the homework Included some freecodecamp challenges --- Week4/MAKEME.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index 21c4c175a..5747dc530 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -4,12 +4,14 @@ - https://github.com/HackYourFuture/JavaScript/blob/laurens_thomas/Week4/README.md ## Challenges: - +- https://www.freecodecamp.com/challenges/using-objects-for-lookups +- https://www.freecodecamp.com/challenges/manipulating-complex-objects +- https://www.freecodecamp.com/challenges/convert-json-data-to-html custom challenge: -1. Go to http://www.omdbapi.com/?s=dog and change the word dog in the url to a different common word. You will get as a result, a list of movie with this word in the title. Make sure you get at least 5 results. -2. You can copy the JSON and put it at the bottom of your javascript file. Print the title of the 3rd movie in the array to the console. +1. Go to http://www.omdbapi.com/?s=dog and change the word dog in the url to a different common word. You will get as a result, a list of movies with this word in the title. Make sure you get at least 5 results. +2. You can copy the JSON and put it in a string at the top of your js file. Print the title of the 3rd movie in the array to the console. 3. Make a ul with a li for each title (just like you did with the books in the previous assignment 4. Use CSS to divide the page in two columns. The left column will have a list of the titles for each movie. The right column will have all the information listed for each movie. 5. Replace the "Poster" property with the actual image of the poster. -6. Use the imdbID to create an URL to the IMDB page for that movie (hint: IMDB urls always look like this http://www.imdb.com/title/[imdbId] where [imdbId] would be replaced by the actual Id. If you do this correctly, each movie +6. Use the imdbID to create an URL to the IMDB page for that movie (hint: IMDB urls always look like this http://www.imdb.com/title/[imdbId] where [imdbId] would be replaced by the actual Id. If you do this correctly, each movie will have a link to its own IMDB page. Make sure the link opens in a new tab From f50399e01161d48f424b576fcd92b7c65edef0fb Mon Sep 17 00:00:00 2001 From: Laurens Date: Wed, 3 May 2017 17:23:42 +0200 Subject: [PATCH 018/472] Update MAKEME.md From 54592386601efc1d8b9aed6fddc0d251aa7d9aa2 Mon Sep 17 00:00:00 2001 From: Laurens Date: Wed, 3 May 2017 17:31:48 +0200 Subject: [PATCH 019/472] Added a line saying hw should be handed in on github :rainbow: --- Week4/MAKEME.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index 5747dc530..7acec979c 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -15,3 +15,4 @@ custom challenge: 4. Use CSS to divide the page in two columns. The left column will have a list of the titles for each movie. The right column will have all the information listed for each movie. 5. Replace the "Poster" property with the actual image of the poster. 6. Use the imdbID to create an URL to the IMDB page for that movie (hint: IMDB urls always look like this http://www.imdb.com/title/[imdbId] where [imdbId] would be replaced by the actual Id. If you do this correctly, each movie will have a link to its own IMDB page. Make sure the link opens in a new tab +7. Make a Github Repository for your javascript homework. Store your solutions in this repo. Put the repo link in trello. NO MORE ZIP FILES :octopus: From 7f5d0b5ba3f74efea46ce03cfb31d57ddfbc7764 Mon Sep 17 00:00:00 2001 From: Laurens Date: Wed, 3 May 2017 17:34:12 +0200 Subject: [PATCH 020/472] Update MAKEME.md --- Week4/MAKEME.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index 7acec979c..ee72921da 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -13,6 +13,6 @@ custom challenge: 2. You can copy the JSON and put it in a string at the top of your js file. Print the title of the 3rd movie in the array to the console. 3. Make a ul with a li for each title (just like you did with the books in the previous assignment 4. Use CSS to divide the page in two columns. The left column will have a list of the titles for each movie. The right column will have all the information listed for each movie. -5. Replace the "Poster" property with the actual image of the poster. +5. Replace the "Poster" property with the actual image of the poster. If you do this correctly, in the right column there will be a picture for each movie. 6. Use the imdbID to create an URL to the IMDB page for that movie (hint: IMDB urls always look like this http://www.imdb.com/title/[imdbId] where [imdbId] would be replaced by the actual Id. If you do this correctly, each movie will have a link to its own IMDB page. Make sure the link opens in a new tab -7. Make a Github Repository for your javascript homework. Store your solutions in this repo. Put the repo link in trello. NO MORE ZIP FILES :octopus: +7. Make a Github Repository for your javascript homework. Store your solutions in this repo. Put the repo link in trello. NO MORE ZIP FILES :octocat: From 3b8c031f48b78465251efd762f7788aa4b19f640 Mon Sep 17 00:00:00 2001 From: tmmeijers Date: Thu, 4 May 2017 17:31:41 +0200 Subject: [PATCH 021/472] Fixed links --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 023673741..dffce35c3 100644 --- a/README.md +++ b/README.md @@ -11,10 +11,10 @@ Here you can find course content and homework for the JavaScript 1,2 and 3 modul |1.|• Intro JavaScript (What is it, where can you
use it for)
• Basic Data types [Strings, Numbers, Arrays]
• Variables
• Operators
• Conditions
• Naming conventions| [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md)| [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week1/MAKEME.md)| |2.| [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :heart:|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week2)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week2/MAKEME.md) + [CLI Homework Week 2](https://github.com/HackYourFuture/CommandLine/blob/master/HomeWork.md)| |3.|• Loops (for/while)
• Functions
• Closures
• Scope
• Advanced data types [Objects]
• Array Manipulations
• Basic DOM manipulations [img src, innerHTML]
• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3/MAKEME.md)| -|4.|• First Git Session with Unmesh :smiling_imp:
• JSON
• Code debugging using the browser
• Functions + JSON/Arrays
• Code flow (order of execution)
• (capturing user input)
• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/laurens_thomas/README.md)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week4/MAKEME.md) + [Git Homework Week 4](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md)| -|5.|• Second Git Session :see_no_evil:
• Events
• Callbacks
• XHTTP Requests
• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5/README.md)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5/MAKEME.md) + [Git Homework Week 5](https://github.com/HackYourFuture/Git/blob/master/Lecture-2.md)| -|6.|• Async VS Sync
• Polling
• Structure for a basic SPA|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/README.md)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/MAKEME.md)| -|7.|• Third Git Session (Git Workflow :muscle:)
• (re)writing data structures (in JSON)
• Map, reduce filter|[Reading Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7/MAKEME.md)|[Homework Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7/MAKEME.md)| +|4.|• First Git Session with Unmesh :smiling_imp:
• JSON
• Code debugging using the browser
• Functions + JSON/Arrays
• Code flow (order of execution)
• (capturing user input)
• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week4)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week4/MAKEME.md) + [Git Homework Week 4](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md)| +|5.|• Second Git Session :see_no_evil:
• Events
• Callbacks
• XHTTP Requests
• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5/MAKEME.md) + [Git Homework Week 5](https://github.com/HackYourFuture/Git/blob/master/Lecture-2.md)| +|6.|• Async VS Sync
• Polling
• Structure for a basic SPA|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/MAKEME.md)| +|7.|• Third Git Session (Git Workflow :muscle:)
• (re)writing data structures (in JSON)
• Map, reduce filter|[Reading Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7)|[Homework Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7/MAKEME.md)| |8.|• Closures
• Promises|TBA|TBA| |9.|Test Driven Development|TBA|TBA| From 6bc8ecef3a02371f32b94de71fcaf1663dfc682c Mon Sep 17 00:00:00 2001 From: tmmeijers Date: Thu, 4 May 2017 17:33:35 +0200 Subject: [PATCH 022/472] Chapters in reading material --- Week4/README.md | 19 +++++++++++++++++-- 1 file changed, 17 insertions(+), 2 deletions(-) diff --git a/Week4/README.md b/Week4/README.md index 9ce6796f7..8085b16a5 100644 --- a/Week4/README.md +++ b/Week4/README.md @@ -1,6 +1,21 @@ ### Reading Week 4 +Read your book ('A Smarter Way To Learn JavaScript')! If you don't do it on yourself, here's the chapters to read next for next week: +*Note: If you already know the material you are reading just take a glance over it and don't use too much time. Just be sure that you get everything! You may have already read about it, or used it in the previous classes. Note that this also has 'catch up' material in it, about functions and objects. If you did not take the time to read your book yet about these things please do so!* + +* DOM (may have known material, know how to select/search/append elements etc.!): +Chapters 58 - 68 + +* Reading/setting input fields: +Chapters 49 - 50 + +* Functions (if you think you need a bit more understanding of them read this): +Chapters 35 - 38 + +* Objects (important to really understand them, read this if you are unsure! You may also read chapters 72, 73 and 74 if you have time and want to learn more): +Chapters 70-71, 75 + To be read before the 5th lecture: - Code conventions: http://javascript.crockford.com/code.html -- Objects continued: http://eloquentjavascript.net/06_object.html -- XHTTP requests: https://www.kirupa.com/html5/making_http_requests_js.htm +- Objects continued: http://eloquentjavascript.net/06\_object.html +- XHTTP requests: https://www.kirupa.com/html5/making\_http\_requests\_js.htm From 708c319b8b20a284e3367726525318e1a7eb4532 Mon Sep 17 00:00:00 2001 From: "T.M. Meijers" Date: Thu, 4 May 2017 17:39:05 +0200 Subject: [PATCH 023/472] Update README.md --- Week4/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Week4/README.md b/Week4/README.md index 8085b16a5..3a8ecd425 100644 --- a/Week4/README.md +++ b/Week4/README.md @@ -3,16 +3,16 @@ Read your book ('A Smarter Way To Learn JavaScript')! If you don't do it on yourself, here's the chapters to read next for next week: *Note: If you already know the material you are reading just take a glance over it and don't use too much time. Just be sure that you get everything! You may have already read about it, or used it in the previous classes. Note that this also has 'catch up' material in it, about functions and objects. If you did not take the time to read your book yet about these things please do so!* -* DOM (may have known material, know how to select/search/append elements etc.!): +* DOM (may have known material, know how to select/search/append elements etc.!):
Chapters 58 - 68 -* Reading/setting input fields: +* Reading/setting input fields:
Chapters 49 - 50 -* Functions (if you think you need a bit more understanding of them read this): +* Functions (if you think you need a bit more understanding of them read this):
Chapters 35 - 38 -* Objects (important to really understand them, read this if you are unsure! You may also read chapters 72, 73 and 74 if you have time and want to learn more): +* Objects (important to really understand them, read this if you are unsure! You may also read chapters 72, 73 and 74 if you have time and want to learn more):
Chapters 70-71, 75 To be read before the 5th lecture: From 4833101dbf7be9817bcdf709d2021a3e21988671 Mon Sep 17 00:00:00 2001 From: "T.M. Meijers" Date: Thu, 4 May 2017 17:39:33 +0200 Subject: [PATCH 024/472] Update README.md --- Week4/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Week4/README.md b/Week4/README.md index 3a8ecd425..def80d680 100644 --- a/Week4/README.md +++ b/Week4/README.md @@ -3,16 +3,16 @@ Read your book ('A Smarter Way To Learn JavaScript')! If you don't do it on yourself, here's the chapters to read next for next week: *Note: If you already know the material you are reading just take a glance over it and don't use too much time. Just be sure that you get everything! You may have already read about it, or used it in the previous classes. Note that this also has 'catch up' material in it, about functions and objects. If you did not take the time to read your book yet about these things please do so!* -* DOM (may have known material, know how to select/search/append elements etc.!):
+* DOM (*may have known material, know how to select/search/append elements etc.!*):
Chapters 58 - 68 * Reading/setting input fields:
Chapters 49 - 50 -* Functions (if you think you need a bit more understanding of them read this):
+* Functions (*if you think you need a bit more understanding of them read this*):
Chapters 35 - 38 -* Objects (important to really understand them, read this if you are unsure! You may also read chapters 72, 73 and 74 if you have time and want to learn more):
+* Objects (*important to really understand them, read this if you are unsure! You may also read chapters 72, 73 and 74 if you have time and want to learn more*):
Chapters 70-71, 75 To be read before the 5th lecture: From 9ef24d472590aac6d311d5af94588b07271c1361 Mon Sep 17 00:00:00 2001 From: "T.M. Meijers" Date: Sun, 7 May 2017 13:35:04 +0200 Subject: [PATCH 025/472] Update MAKEME.md --- Week5/MAKEME.md | 113 +++++++++++++----------------------------------- 1 file changed, 29 insertions(+), 84 deletions(-) diff --git a/Week5/MAKEME.md b/Week5/MAKEME.md index f42254adf..e5e7ad058 100644 --- a/Week5/MAKEME.md +++ b/Week5/MAKEME.md @@ -2,102 +2,47 @@ ## Git Homework: +*Verify with Unmesh if this is still up to date* [Make these assignments](https://github.com/HackYourFuture/Git/blob/master/Lecture-2.md) -### Refresher -http://conceptf1.blogspot.nl/2013/11/javascript-closures.html -https://toddmotto.com/everything-you-wanted-to-know-about-javascript-scope/ -http://www.adequatelygood.com/JavaScript-Scoping-and-Hoisting.html -https://medium.freecodecamp.com/5-javascript-bad-parts-that-are-fixed-in-es6-c7c45d44fd81 - -https://www.reddit.com/r/learnjavascript/comments/1v6n8p/closure_explain_likei_am_in_high_school/?st=ixsp0mbe&sh=5526d150 -A VERY popular StackOverflow article: -http://stackoverflow.com/questions/111102/how-do-javascript-closures-work - ### Homework -1. -Let's continue to learn a little more about scope and Closures. +You are going to continue using your homework from the previous weeks, and we are going to extend it. +You will have to change some functions you wrote, and depending on how well you did you may or may +not have to change all your code ;). -Please solve the following three questions as a warm up to thinking about scope. +1. Extend your site with an input element. This is so the user will be able to type in text which will be later used to search the movie database for corresponding movies. -https://www.freecodecamp.com/challenges/global-scope-and-functions -https://www.freecodecamp.com/challenges/local-scope-and-functions -https://www.freecodecamp.com/challenges/global-vs-local-scope-in-functions +2. Also place a button near the input element. Capture the click even for this button and couple it to a function which grabs the user input from the text field and which initially logs the user input. -2. -What will be the output of the following code - and more importantly - WHY? +3. Make a function which takes a single argument. The function should make an XHR request to `http://www.omdbapi.com/?s=[SEARCH_TERM]` where the search term will be the argument. This argument will be the input the user has given you, so make sure that when the user clicks the button you call this function with the argument. Use the code below to make the request (change it if you need to): ``` -for (var i = 0; i < 3; i++) { - setTimeout(function() { alert(i); }, 1000 + i); -} -``` +function loadMovies(){ + //This function keeps track of changes to the xhr request + function processRequest() { + console.log(xhr.readyState); + if (xhr.readyState == 4){ + console.log("xhr request DONE SON"); + console.log(xhr.response); + // Call a function which renders the response + } + }; -3. -Write a function that would allow you to do this: + console.log("retrieving movie data request"); + var requestURL = 'http://www.omdbapi.com/?s=dog'; + var xhr = new XMLHttpRequest(); + //Build an XHR request and then send it. + //Read this for more info: https://www.kirupa.com/html5/making_http_requests_js.htm + xhr.open('GET', requestURL, true); + xhr.send(); + xhr.onreadystatechange = processRequest; +}; ``` -var addSix = createBase(6); -addSix(10); // returns 16 -addSix(21); // returns 27 -``` - -4. -You will need to create an HTML document out of the below snippet to run the below code. A hint - the code is syntactically correct but doesn't do what you would expect. Can you see why and fix it? - -Don't cheat - but if you get stuck ... http://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example - -``` - - - - - -``` - -Rewrite to Async: -``` -1. - -var sum = calculateSum(2, 6); -console.log(sum); - -2. - -var results = $.getJSON('http://myapi.com'); -showResults(results); - -3. - -var sum = calculateSum(2, 6); -if (sum > 8) { - console.log('larger than 8'); -} - -4. - -var data = $.getJSON('http://myapi.com'); -data = data.map(function (x) { return x * 8; }); - -writeDataToFile(data); -``` +4. Use the code from your previous assignment to render the new results. If you have already displayed previous results make sure you clear them (hint: `someElement.removeChild(someChild)`). Make sure you style these results, use a stylesheet for this! Also make sure you do not use javascript to construct static elements. This way you can handle the positioning of elements easier. -## TODO !!! -1. Choose two "GET" API endpoints from http://reqres.in -2. Use $.getJSON to load data from those two endpoints -3. Display the data on your web page. -4. It should not matter which endpoint is loaded first, the data should *always* look the same (you can add "?delay=" after the endpoint to simulate a delay). +5. Change the layout of the page so that you only show a list of movie titles on the left side of your page. When the user hovers over a link (or maybe with a click) you want to show the additional information about the movie (poster, year etc.) on the right column. -- Create at least 1 issue (bug / feature / code improvement) on another students github repository. Do this in pairs. -- solve the issue proposed by another student in your github repo. More info [here](https://hackyourfuture.slack.com/files/michahell/F31BX1XT6/Merging_a_local_branch_into_master) +6. If you have any questions, ask them on slack in the class 9 channel. We want to see more questions as both you and we can learn from them, also try to help eachother! From 5bc47e90e80eb504781ff17f3bf5231dab8bcedf Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 7 May 2017 14:19:56 +0200 Subject: [PATCH 026/472] update --- Week1/MAKEME.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index c4100a0df..6113f1a70 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -1,6 +1,6 @@ ## Assignments week 1: -1. Create a `.js` file that prints `Hello` when you run it from the command line. (Hint: `node` is the program that can run your javascript files.) +1. Create a `.js` file that prints `Hello` when you run it from the command line. (Hint: `node` is the program that can run your JavaScript files.) 2. Create a function named `colorCar` that receives a color, and prints out, "a red car" for example. (Hint: put it in your file and run it like before.) From 3e4a8ad64f615c763b938ae773427379c44f4609 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 7 May 2017 14:29:09 +0200 Subject: [PATCH 027/472] fixed links --- Week4/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Week4/README.md b/Week4/README.md index def80d680..e689df2f0 100644 --- a/Week4/README.md +++ b/Week4/README.md @@ -17,5 +17,5 @@ Chapters 70-71, 75 To be read before the 5th lecture: - Code conventions: http://javascript.crockford.com/code.html -- Objects continued: http://eloquentjavascript.net/06\_object.html -- XHTTP requests: https://www.kirupa.com/html5/making\_http\_requests\_js.htm +- Objects continued: http://eloquentjavascript.net/06_object.html +- XHTTP requests: https://www.kirupa.com/html5/making_http_requests_js.htm From d3cb0285d522640abe29526dadef32f1581d7ceb Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 7 May 2017 14:41:06 +0200 Subject: [PATCH 028/472] updated link --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index dffce35c3..22967fc51 100644 --- a/README.md +++ b/README.md @@ -35,5 +35,5 @@ A tool capable of loading a JSON file and repreenting it in the DOM A web app with external data source using at least one API 《〠_〠》 ### Overall -A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](https://github.com/HackYourFuture/JavaScript/tree/master/fundamentalsand) and research/ ask for help (Slack!) with the concepts that are not entirely clear. +A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/fundamentals) and research/ ask for help (Slack!) with the concepts that are not entirely clear. From 9bffc6ea2f186a42f4b419b06d10198e7e361f01 Mon Sep 17 00:00:00 2001 From: "T.M. Meijers" Date: Sun, 7 May 2017 16:18:05 +0200 Subject: [PATCH 029/472] Update MAKEME.md --- Week5/MAKEME.md | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/Week5/MAKEME.md b/Week5/MAKEME.md index e5e7ad058..4c009da1b 100644 --- a/Week5/MAKEME.md +++ b/Week5/MAKEME.md @@ -15,7 +15,11 @@ not have to change all your code ;). 2. Also place a button near the input element. Capture the click even for this button and couple it to a function which grabs the user input from the text field and which initially logs the user input. -3. Make a function which takes a single argument. The function should make an XHR request to `http://www.omdbapi.com/?s=[SEARCH_TERM]` where the search term will be the argument. This argument will be the input the user has given you, so make sure that when the user clicks the button you call this function with the argument. Use the code below to make the request (change it if you need to): +3. Make a function which takes a single argument. The function should make an XHR request to `http://www.omdbapi.com/?s=[SEARCH_TERM]` where the search term will be the argument. This argument will be the input the user has given you, so make sure that when the user clicks the button you call this function with the argument. + + Look at the [documentation of the API](http://www.omdbapi.com/) and see which other query parameters they support. Mess around with this to see how changing (or adding) parameters modifies your results. + + Use the code below to make the request (change it if you need to): ``` function loadMovies(){ @@ -41,8 +45,11 @@ function loadMovies(){ }; ``` + 4. Use the code from your previous assignment to render the new results. If you have already displayed previous results make sure you clear them (hint: `someElement.removeChild(someChild)`). Make sure you style these results, use a stylesheet for this! Also make sure you do not use javascript to construct static elements. This way you can handle the positioning of elements easier. 5. Change the layout of the page so that you only show a list of movie titles on the left side of your page. When the user hovers over a link (or maybe with a click) you want to show the additional information about the movie (poster, year etc.) on the right column. 6. If you have any questions, ask them on slack in the class 9 channel. We want to see more questions as both you and we can learn from them, also try to help eachother! + +__Bonus__: Write a function takes this array `['a', 'b', 'c', 'd', 'a', 'e', 'f', 'c']` and returns an array which only has unique values in it (so it removes the duplicate ones). Make it a 'smart' algorithm that could do it for every array (only strings/number). Try to make it as fast as possible! From 5ad1bc81dcbc6855911a805e9fc3f88cb81d3117 Mon Sep 17 00:00:00 2001 From: "T.M. Meijers" Date: Mon, 8 May 2017 09:48:57 +0200 Subject: [PATCH 030/472] Update MAKEME.md --- Week5/MAKEME.md | 7 ------- 1 file changed, 7 deletions(-) diff --git a/Week5/MAKEME.md b/Week5/MAKEME.md index 4c009da1b..130dc8de5 100644 --- a/Week5/MAKEME.md +++ b/Week5/MAKEME.md @@ -1,12 +1,5 @@ ## Homework Week 5 -## Git Homework: - -*Verify with Unmesh if this is still up to date* -[Make these assignments](https://github.com/HackYourFuture/Git/blob/master/Lecture-2.md) - -### Homework - You are going to continue using your homework from the previous weeks, and we are going to extend it. You will have to change some functions you wrote, and depending on how well you did you may or may not have to change all your code ;). From 53d6aecfdab15630022cb77178dcadbed04636d2 Mon Sep 17 00:00:00 2001 From: "T.M. Meijers" Date: Mon, 8 May 2017 09:52:21 +0200 Subject: [PATCH 031/472] Update MAKEME.md --- Week5/MAKEME.md | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/Week5/MAKEME.md b/Week5/MAKEME.md index 130dc8de5..f94b13a00 100644 --- a/Week5/MAKEME.md +++ b/Week5/MAKEME.md @@ -1,5 +1,17 @@ ## Homework Week 5 +### Git + +1. Create a branch called `MyBranch` in the repository `MyFirst`. + +2. Create the files `leaf1.txt`, `leaf2.txt`, `flower.txt` and `fruit.txt` and write some content in them. + +3. Create a corresponding remote tracking branch on GitHub and push this branch to the Github remote you just created. + +4. Merge `MyBranch` with the `master` branch + +### JS + You are going to continue using your homework from the previous weeks, and we are going to extend it. You will have to change some functions you wrote, and depending on how well you did you may or may not have to change all your code ;). From c4f556ee40245612f6e2ba3de3e86eab9864047e Mon Sep 17 00:00:00 2001 From: "T.M. Meijers" Date: Mon, 8 May 2017 09:53:41 +0200 Subject: [PATCH 032/472] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 22967fc51..7cf6b2ce5 100644 --- a/README.md +++ b/README.md @@ -12,7 +12,7 @@ Here you can find course content and homework for the JavaScript 1,2 and 3 modul |2.| [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :heart:|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week2)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week2/MAKEME.md) + [CLI Homework Week 2](https://github.com/HackYourFuture/CommandLine/blob/master/HomeWork.md)| |3.|• Loops (for/while)
• Functions
• Closures
• Scope
• Advanced data types [Objects]
• Array Manipulations
• Basic DOM manipulations [img src, innerHTML]
• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3/MAKEME.md)| |4.|• First Git Session with Unmesh :smiling_imp:
• JSON
• Code debugging using the browser
• Functions + JSON/Arrays
• Code flow (order of execution)
• (capturing user input)
• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week4)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week4/MAKEME.md) + [Git Homework Week 4](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md)| -|5.|• Second Git Session :see_no_evil:
• Events
• Callbacks
• XHTTP Requests
• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5/MAKEME.md) + [Git Homework Week 5](https://github.com/HackYourFuture/Git/blob/master/Lecture-2.md)| +|5.|• Second Git Session :see_no_evil:
• Events
• Callbacks
• XHTTP Requests
• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5/MAKEME.md) | |6.|• Async VS Sync
• Polling
• Structure for a basic SPA|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/MAKEME.md)| |7.|• Third Git Session (Git Workflow :muscle:)
• (re)writing data structures (in JSON)
• Map, reduce filter|[Reading Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7)|[Homework Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7/MAKEME.md)| |8.|• Closures
• Promises|TBA|TBA| From 6dcd21b054b4c04299b7b8ab51b6626d1d49fec3 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 8 May 2017 10:25:12 +0200 Subject: [PATCH 033/472] homework class8 --- Extra module class8/README.md | 36 +++++++++++++++++++++++++++++++++++ Week6/MAKEME.md | 4 +++- Week8/README.md | 3 +++ Week9/README.md | 6 ++++++ 4 files changed, 48 insertions(+), 1 deletion(-) create mode 100644 Extra module class8/README.md create mode 100644 Week8/README.md create mode 100644 Week9/README.md diff --git a/Extra module class8/README.md b/Extra module class8/README.md new file mode 100644 index 000000000..527e7883b --- /dev/null +++ b/Extra module class8/README.md @@ -0,0 +1,36 @@ +# Homework for the extra JavaScript module Class8 + +## What we did in lecture 1: +Code Kata Race + +- 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 + + +## Homework week 1: (I EXPECT ALL OF YOU TO AT LEAST ATTEMPT PROBLEMS 1-5): +- https://www.codewars.com/collections/hyf-homework-1 +- https://www.codewars.com/collections/hyf-homework-1-bonus-credit + +Remember the person with the most kata points gets a prize from Gijs (and you can do exercises on this website without me telling you to - anything kyu 7 or kyu 8 you can try to do - kyu 6 or lower is probably too hard) + +- 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 https://www.w3schools.com/jsref/jsref_slice_string.asp +- Also potentially useful +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 + +## To watch before second lecture: +(watch in this order) + +1. Stacks/Queues https://www.youtube.com/watch?v=wjI1WNcIntg (5 mins) +2. JS Event Loops https://www.youtube.com/watch?v=8aGhZQkoFbQ (26 mins, watch this one twice or until you understand it) + +## The tools we used in the second lecture +- [metajs](http://int3.github.io/metajs/) +- [latentflip](http://latentflip.com/loupe/?code=Y29uc3QgcCA9IG5ldyBQcm9taXNlKGZ1bmN0aW9uKHJlc29sdmUsIHJlamVjdCl7CiAgICBzZXRUaW1lb3V0KGZ1bmN0aW9uKCl7CiAgICAgICAgY29uc3QgZGljZVJvbGwgPSBNYXRoLmNlaWwoTWF0aC5yYW5kb20oKSAqIDYpOwogICAgICAgIGNvbnNvbGUubG9nKGRpY2VSb2xsKTsKICAgICAgICBpZihkaWNlUm9sbCA9PT0gNikKICAgICAgICAgICAgcmVqZWN0KG5ldyBFcnJvcigncm9sbGVkIGEgc2l4JykpCiAgICAgICAgZWxzZQogICAgICAgICAgICByZXNvbHZlKGRpY2VSb2xsKQogICAgfSwgNTAwMCk7Cn0pOwoKCnAKICAgIC50aGVuKGZ1bmN0aW9uKHJvbGwpewogICAgICAgIGNvbnNvbGUubG9nKCdkaWNlIHJvbGxlZCBhICcgKyByb2xsKQogICAgfSkKICAgIC5jYXRjaChmdW5jdGlvbihlcnIpewogICAgICAgIAogICAgfSk7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D) + +## Homework Week 2 +- https://www.codewars.com/collections/hyf-homework-number-2 +- If you need to refresh your memory on es6 classes: https://ponyfoo.com/articles/es6-classes-in-depth +- Also read this article on scopes & closures: https://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/ \ No newline at end of file diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md index 92ad1b891..cc7aa8b9b 100644 --- a/Week6/MAKEME.md +++ b/Week6/MAKEME.md @@ -16,7 +16,7 @@ fetchReposFromOrganization('hackyourfuture') ``` Make sure you authenticate the request with a **token**, [Create a new token](https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/). -You should be able to achieve with somenthing like: +You should be able to achieve with something like: ``` request.setRequestHeader("Authorization", "token " + TOKEN); ``` @@ -28,3 +28,5 @@ You've to make sure that you **never publish your TOKEN** openly!* *Tip:* A way of solving, could be, creating an input where I to fill the personal token. Maybe use [Local Storage](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage) so when we come back is already set. You can find also start to look at stuff like: [How to get value from input](http://stackoverflow.com/questions/11563638/javascript-how-to-get-value-of-text-input-field).. etc... + +rewatch the Hangouts lecture here: https://www.youtube.com/watch?v=bC7Ih5nxBCk diff --git a/Week8/README.md b/Week8/README.md new file mode 100644 index 000000000..4392fd482 --- /dev/null +++ b/Week8/README.md @@ -0,0 +1,3 @@ +## Homework week 8 + +Code to the sort function source from today's first half of the lesson: https://github.com/davidfurlong/sort-function-TDD \ No newline at end of file diff --git a/Week9/README.md b/Week9/README.md new file mode 100644 index 000000000..e654c3aac --- /dev/null +++ b/Week9/README.md @@ -0,0 +1,6 @@ +README.md + +https://github.com/HackYourFuture/TicTacToeTDD +https://github.com/HackYourFuture/OOP-Student-and-Teacher + +rewatch the Hangouts session here: https://www.youtube.com/watch?v=oc9ogCJz9rYs \ No newline at end of file From 78559bbaf2d74e4f6915bf09cf983011e06009eb Mon Sep 17 00:00:00 2001 From: mkruijt Date: Wed, 10 May 2017 13:32:53 +0200 Subject: [PATCH 034/472] update reading material week5 --- README.md | 2 +- Week2/README.md | 2 +- Week5/README.md | 8 ++++++++ 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 7cf6b2ce5..33a7d686f 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ Here you can find course content and homework for the JavaScript 1,2 and 3 modul |3.|• Loops (for/while)
• Functions
• Closures
• Scope
• Advanced data types [Objects]
• Array Manipulations
• Basic DOM manipulations [img src, innerHTML]
• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week3/MAKEME.md)| |4.|• First Git Session with Unmesh :smiling_imp:
• JSON
• Code debugging using the browser
• Functions + JSON/Arrays
• Code flow (order of execution)
• (capturing user input)
• Structuring code files|[Reading Week 4](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week4)|[JS](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week4/MAKEME.md) + [Git Homework Week 4](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md)| |5.|• Second Git Session :see_no_evil:
• Events
• Callbacks
• XHTTP Requests
• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week5/MAKEME.md) | -|6.|• Async VS Sync
• Polling
• Structure for a basic SPA|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/MAKEME.md)| +|6.|• Async VS Sync
• Polling
• Structure for a basic SPA
TEST :boom:|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/MAKEME.md)| |7.|• Third Git Session (Git Workflow :muscle:)
• (re)writing data structures (in JSON)
• Map, reduce filter|[Reading Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7)|[Homework Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7/MAKEME.md)| |8.|• Closures
• Promises|TBA|TBA| |9.|Test Driven Development|TBA|TBA| diff --git a/Week2/README.md b/Week2/README.md index 04e9a12dc..c44bbe068 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -1,3 +1,3 @@ -#Reading material for the third lecture: +# Reading material for the third lecture: TBA diff --git a/Week5/README.md b/Week5/README.md index 4b2ad8b27..071640b6c 100644 --- a/Week5/README.md +++ b/Week5/README.md @@ -1 +1,9 @@ ## Reading for lecture 6 + + +Before the lecture this Sunday please read: + +- [Learning JavaScript Design Patterns](https://addyosmani.com/resources/essentialjsdesignpatterns/book/#detailnamespacing) up to and including chapter 3 +- [JavaScript Variable Scope and Hoisting Explained](http://javascriptissexy.com/javascript-variable-scope-and-hoisting-explained/) + +>If you feel you need preparation for the test I recommend to take a look at the topics listed in the [README](https://github.com/HackYourFuture) of this repo (up to and including week 6) and look up these concepts in your __Smarter Way to Learn JavaScript__ book :books:. It's also useful to go through the reading material and homework of the last weeks. From ef95d8f9b5876c224e947a7bcedd7e17c287e28f Mon Sep 17 00:00:00 2001 From: mkruijt Date: Wed, 10 May 2017 16:00:00 +0200 Subject: [PATCH 035/472] test update --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 33a7d686f..dfb2a6b1f 100644 --- a/README.md +++ b/README.md @@ -16,7 +16,7 @@ Here you can find course content and homework for the JavaScript 1,2 and 3 modul |6.|• Async VS Sync
• Polling
• Structure for a basic SPA
TEST :boom:|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week6/MAKEME.md)| |7.|• Third Git Session (Git Workflow :muscle:)
• (re)writing data structures (in JSON)
• Map, reduce filter|[Reading Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7)|[Homework Week 7](https://github.com/HackYourFuture/JavaScript/tree/laurens_thomas/Week7/MAKEME.md)| |8.|• Closures
• Promises|TBA|TBA| -|9.|Test Driven Development|TBA|TBA| +|9.|Test Driven Development
TEST :boom:|TBA|TBA| __Kind note:__
From 227f690eb198d3f72f618f980939940d1f567b6a Mon Sep 17 00:00:00 2001 From: mkruijt Date: Wed, 10 May 2017 16:20:40 +0200 Subject: [PATCH 036/472] updated reading material class8 --- Extra module class8/README.md | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/Extra module class8/README.md b/Extra module class8/README.md index 527e7883b..26dbad18c 100644 --- a/Extra module class8/README.md +++ b/Extra module class8/README.md @@ -33,4 +33,15 @@ https://www.w3schools.com/jsref/jsref_charat.asp ## Homework Week 2 - https://www.codewars.com/collections/hyf-homework-number-2 - If you need to refresh your memory on es6 classes: https://ponyfoo.com/articles/es6-classes-in-depth -- Also read this article on scopes & closures: https://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/ \ No newline at end of file +- Also read this article on scopes & closures: https://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/ + +## To read before third lecture: +The lecture will cover callbacks, ES6 function syntax and promises. Please read the following resources before class this Sunday: + +- [JS Promise](https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53) +- [JavaScript Promises: an Introduction](https://developers.google.com/web/fundamentals/getting-started/primers/promises) +- [Promises for asynchronous programming](http://exploringjs.com/es6/ch_promises.html) +- [ES6 Patterns: Converting Callbacks to Promises](https://benmccormick.org/2015/12/30/es6-patterns-converting-callbacks-to-promises/) + +>If you feel you need preparation for the test I recommend to take a look at the topics listed in the [README](https://github.com/HackYourFuture/JavaScript/tree/master) of this repo (up to and including week 9) and look up/refresh these concepts in your __Smarter Way to Learn JavaScript__ book 📚. Also go through the reading material and homework of the last weeks. + From e095ade1d93a21c3f129f40d52cd5c7c5fe502ab Mon Sep 17 00:00:00 2001 From: mkruijt Date: Wed, 10 May 2017 17:07:19 +0200 Subject: [PATCH 037/472] cleaned up links --- Extra module class8/README.md | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/Extra module class8/README.md b/Extra module class8/README.md index 26dbad18c..a5bef33c6 100644 --- a/Extra module class8/README.md +++ b/Extra module class8/README.md @@ -3,37 +3,36 @@ ## What we did in lecture 1: Code Kata Race -- 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 +- [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) ## Homework week 1: (I EXPECT ALL OF YOU TO AT LEAST ATTEMPT PROBLEMS 1-5): -- https://www.codewars.com/collections/hyf-homework-1 -- https://www.codewars.com/collections/hyf-homework-1-bonus-credit +- [Homework](https://www.codewars.com/collections/hyf-homework-1) +- [BONUS](https://www.codewars.com/collections/hyf-homework-1-bonus-credit) :collision: Remember the person with the most kata points gets a prize from Gijs (and you can do exercises on this website without me telling you to - anything kyu 7 or kyu 8 you can try to do - kyu 6 or lower is probably too hard) - 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 https://www.w3schools.com/jsref/jsref_slice_string.asp -- Also potentially useful -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 +- 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 ## To watch before second lecture: (watch in this order) -1. Stacks/Queues https://www.youtube.com/watch?v=wjI1WNcIntg (5 mins) -2. JS Event Loops https://www.youtube.com/watch?v=8aGhZQkoFbQ (26 mins, watch this one twice or until you understand it) +1. [Stacks/Queues](https://www.youtube.com/watch?v=wjI1WNcIntg) (5 mins) +2. [JS Event Loops](https://www.youtube.com/watch?v=8aGhZQkoFbQ) (26 mins, watch this one twice or until you understand it) ## The tools we used in the second lecture - [metajs](http://int3.github.io/metajs/) - [latentflip](http://latentflip.com/loupe/?code=Y29uc3QgcCA9IG5ldyBQcm9taXNlKGZ1bmN0aW9uKHJlc29sdmUsIHJlamVjdCl7CiAgICBzZXRUaW1lb3V0KGZ1bmN0aW9uKCl7CiAgICAgICAgY29uc3QgZGljZVJvbGwgPSBNYXRoLmNlaWwoTWF0aC5yYW5kb20oKSAqIDYpOwogICAgICAgIGNvbnNvbGUubG9nKGRpY2VSb2xsKTsKICAgICAgICBpZihkaWNlUm9sbCA9PT0gNikKICAgICAgICAgICAgcmVqZWN0KG5ldyBFcnJvcigncm9sbGVkIGEgc2l4JykpCiAgICAgICAgZWxzZQogICAgICAgICAgICByZXNvbHZlKGRpY2VSb2xsKQogICAgfSwgNTAwMCk7Cn0pOwoKCnAKICAgIC50aGVuKGZ1bmN0aW9uKHJvbGwpewogICAgICAgIGNvbnNvbGUubG9nKCdkaWNlIHJvbGxlZCBhICcgKyByb2xsKQogICAgfSkKICAgIC5jYXRjaChmdW5jdGlvbihlcnIpewogICAgICAgIAogICAgfSk7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D) ## Homework Week 2 -- https://www.codewars.com/collections/hyf-homework-number-2 -- If you need to refresh your memory on es6 classes: https://ponyfoo.com/articles/es6-classes-in-depth -- Also read this article on scopes & closures: https://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/ +- [Codewars](https://www.codewars.com/collections/hyf-homework-number-2) +- If you need to refresh your memory on es6 classes: [es6-classes-in-depth](https://ponyfoo.com/articles/es6-classes-in-depth) +- Also read this article on scopes & closures: [explaining-javascript-scope-and-closures](https://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/) ## To read before third lecture: The lecture will cover callbacks, ES6 function syntax and promises. Please read the following resources before class this Sunday: From 8211d119db97f6a6713c3909b7c000c095dcf56e Mon Sep 17 00:00:00 2001 From: Laurens Date: Thu, 11 May 2017 16:16:19 +0200 Subject: [PATCH 038/472] Added two sources --- Week6/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Week6/README.md b/Week6/README.md index 9aad0e0cd..a90cb6123 100644 --- a/Week6/README.md +++ b/Week6/README.md @@ -1,3 +1,4 @@ # Reading week 6 -TBA +Read about APIS: https://www.programmableweb.com/api-university/what-are-apis-and-how-do-they-work +Read about Asynchronous vs. Synchronous programming: http://www.hongkiat.com/blog/synchronous-asynchronous-javascript/ From 19cef9179ce1cee5df51f1af05db2b8f1dda226c Mon Sep 17 00:00:00 2001 From: Laurens Date: Thu, 11 May 2017 16:20:15 +0200 Subject: [PATCH 039/472] Wrote down the general direction for this weeks hw --- Week6/MAKEME.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md index 09314b47f..0a59be966 100644 --- a/Week6/MAKEME.md +++ b/Week6/MAKEME.md @@ -1,7 +1,11 @@ # Homework Week 6 -Finish homework week 5: https://github.com/HackYourFuture/JavaScript/blob/master/Week5/MAKEME.md and hand in the link to your Github Repository in Trello +UNDER CONSTRUCTION +Write a SPA that follows the pattern outlined in this [codepen](http://codepen.io/Razpudding/pen/MmVpeW). + + +OLD HW Read through the JavaScript Fundamentals [README](https://github.com/HackYourFuture/JavaScript/tree/master/fundamentals) and make the [exercises](https://github.com/HackYourFuture/JavaScript/blob/master/fundamentals/exercises.md) hand in your answers in Trello. ASK A QUESTION ON SLACK!!!! From e8aa0fb5796b8ba61913a9d70844cb5dde889321 Mon Sep 17 00:00:00 2001 From: Laurens Date: Thu, 11 May 2017 16:31:01 +0200 Subject: [PATCH 040/472] Updated the assignments. Still WIP --- Week6/MAKEME.md | 1 + 1 file changed, 1 insertion(+) diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md index 0a59be966..7bee3df3d 100644 --- a/Week6/MAKEME.md +++ b/Week6/MAKEME.md @@ -2,6 +2,7 @@ UNDER CONSTRUCTION +Write a script that [polls this API](https://sunrise-sunset.org/api) every 3 seconds and passes a new date everytime where date is previous day ++. Write a SPA that follows the pattern outlined in this [codepen](http://codepen.io/Razpudding/pen/MmVpeW). From eda0765f6e2fbf9c97e2b01ffb120ee5b02cda6b Mon Sep 17 00:00:00 2001 From: Laurens Date: Sun, 14 May 2017 15:36:59 +0200 Subject: [PATCH 041/472] Added 2 assignments --- Week6/MAKEME.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md index 7bee3df3d..15c33d5a5 100644 --- a/Week6/MAKEME.md +++ b/Week6/MAKEME.md @@ -2,6 +2,9 @@ UNDER CONSTRUCTION +- Add your github/repositories link to the pinned slack file +- Fix the issues from the last week and make sure you explain how you fixed the issue in a comment (or commit message) + Write a script that [polls this API](https://sunrise-sunset.org/api) every 3 seconds and passes a new date everytime where date is previous day ++. Write a SPA that follows the pattern outlined in this [codepen](http://codepen.io/Razpudding/pen/MmVpeW). From edc1f7119ddaaaf924b893ca21a443ed6ba4f701 Mon Sep 17 00:00:00 2001 From: Laurens Date: Sun, 14 May 2017 16:32:36 +0200 Subject: [PATCH 042/472] Finished the HW --- Week6/MAKEME.md | 47 ++++++++++++----------------------------------- 1 file changed, 12 insertions(+), 35 deletions(-) diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md index 15c33d5a5..feef9bab2 100644 --- a/Week6/MAKEME.md +++ b/Week6/MAKEME.md @@ -1,38 +1,15 @@ # Homework Week 6 - -UNDER CONSTRUCTION - - Add your github/repositories link to the pinned slack file - Fix the issues from the last week and make sure you explain how you fixed the issue in a comment (or commit message) - -Write a script that [polls this API](https://sunrise-sunset.org/api) every 3 seconds and passes a new date everytime where date is previous day ++. -Write a SPA that follows the pattern outlined in this [codepen](http://codepen.io/Razpudding/pen/MmVpeW). - - -OLD HW -Read through the JavaScript Fundamentals [README](https://github.com/HackYourFuture/JavaScript/tree/master/fundamentals) and make the [exercises](https://github.com/HackYourFuture/JavaScript/blob/master/fundamentals/exercises.md) hand in your answers in Trello. - -ASK A QUESTION ON SLACK!!!! - -## Homework from class -Create a repo that makes this code work, implies an html file and a js file. -``` -fetchReposFromOrganization('hackyourfuture') - .then(renderListOfRepositories) - .then(fetchContributors) - .then(renderContributors); -``` - -Make sure you authenticate the request with a **token**, [Create a new token](https://help.github.com/articles/creating-a-personal-access-token-for-the-command-line/). -You should be able to achieve with somenthing like: -``` -request.setRequestHeader("Authorization", "token " + TOKEN); -``` - -**IMPORTANT REQUIREMENT** -*We're assuming that you know that **TOKEN is a precious piece of data**. -You've to make sure that you **never publish your TOKEN** openly!* - -*Tip:* -A way of solving, could be, creating an input where I to fill the personal token. Maybe use [Local Storage](https://developer.mozilla.org/en/docs/Web/API/Window/localStorage) so when we come back is already set. -You can find also start to look at stuff like: [How to get value from input](http://stackoverflow.com/questions/11563638/javascript-how-to-get-value-of-text-input-field).. etc... +- Write a script that [polls this API](https://sunrise-sunset.org/api) every 3 seconds and passes a new date everytime where date is previous day ++. + +### Main assignment +You are going to write a SPA that uses the [Github API](https://developer.github.com/guides/getting-started/). Make sure that your app uses a logical pattern just like [this codepen](http://codepen.io/Razpudding/pen/MmVpeW). + +1. Make a call to 'https://api.github.com/users/' + userInput (where userInput is a string typed into a searchfield by a user). You can do this by using some of the code of the previous week. Look at the response data. +2. show the users name, avatar image (not the link to the image!) and the number of public repos they have +3. When clicking on the users name, show all the other info you have about that user. When clicking on the avatar image, open their github profile in a new tab. When clicking on the number of public repos, make another API call to 'https://api.github.com/users/user/repos' and build an unorderdered list of the returned repos with just the name of each repo. +4. When hovering over the name of the repo, show on the right side of the page in an `