From 46bb59646f9a3f22c472567d7c4bbf0661107989 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 6 Mar 2017 16:53:12 +0100 Subject: [PATCH 001/496] updated reading material and homework --- README.md | 83 ++++++++++++++++++++----------------------------- Week0/README.md | 11 +++++++ Week1/MAKEME.md | 4 +++ Week1/README.md | 15 +++------ Week2/MAKEME.md | 4 +++ Week2/README.md | 25 ++------------- Week3/MAKEME.md | 27 ++++++++++++++++ Week3/README.md | 14 ++------- 8 files changed, 87 insertions(+), 96 deletions(-) create mode 100644 Week0/README.md create mode 100644 Week1/MAKEME.md create mode 100644 Week2/MAKEME.md create mode 100644 Week3/MAKEME.md diff --git a/README.md b/README.md index ee8d737c0..3ca58b73a 100644 --- a/README.md +++ b/README.md @@ -1,67 +1,50 @@ -# JavaScript -Brainstorm JavaScript module -Here is an overview of the brainstorm sessions for the JavaScript modules. -Feel free to make suggestions or add anything. -If everyone can help out with elaborating on the different subjects that would be great! -What you see below is a rough layout for the first three Javascript modules. Feel free to deviate from this layout but try to cover all of the subject matters listed. +# Hack Your JavaScript +This is the description of the classes for JavaScript fundamentals. -# What - -## Module 1 (3 weeks) - * what is a CLI - * Basic Git commands by CLI - * publish your websites on Git (UI) - * branch and push, clone - * Intro Javascript (What is it, where can you use it for) - * Querying the DOM - * Basic datatypes (array, string, number, bool) - * Loops, if statements - * Browser debugging & ClI debugging +## Composition (Module goals) +|Week|Topic|Read|Homework| +|----|-----|----|--------| +|0.|preparation for first JavaScript session|https://github.com/HackYourFuture/JavaScript/tree/master/Week0|https://github.com/HackYourFuture/JavaScript/tree/master/Week0| +|1.|Values, Operators and Variables. Primitives Types ( Strings, Numbers, Arrays, Functions, Objects literals) Conditions|https://github.com/HackYourFuture/JavaScript/tree/master/Week1|https://github.com/HackYourFuture/JavaScript/tree/master/Week1| +|2.|Functions, For and While Loops,String and Array Manipulations |https://github.com/HackYourFuture/JavaScript/tree/master/Week2|https://github.com/HackYourFuture/JavaScript/tree/master/Week2| +|3.|String and Array Manipulations, Closures, Scope and Immediately Invoked function expression, Call Backs and Promises|https://github.com/HackYourFuture/JavaScript/tree/master/Week3|https://github.com/HackYourFuture/JavaScript/tree/master/Week3| +|4.|Async VS Sync, XHTTP Requests|TBA|TBA| +|5.|Objects and Instances|TBA|TBA| +|6.|TBA|TBA|TBA| +|7.|Test Driven Development|TBA|TBA| +|8.|Test Driven Development|TBA|TBA| +|9.|Test Driven Development|TBA|TBA| -## Module 2 (3 weeks) - * Code conventions - * Function declaration and excecution (code flow) - * Scope - * Github documentation (readme, description, open sourcery) - * Git tracking, terminology - * Advanced datatypes(objects) - * Code flow - * JavaScript functions, callbacks (events) - * Writing a multi function program (or game :) -## Module 3 (3 weeks) - * HTTP requests - * APIs! - * JSON - * Polling external data dynamically - * (Unit testing) +# References +_We demand our student to be prepared (or at least to briefly read) the content of the class._ -## Optional: - * Code patterns - * Observer patterns - * Watcher patterns +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. +--- +## Lesson 1 ( 19/02/2017 ) -# How +- Introduction ~ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction +- Introduction with scaffolding ~ http://jsforcats.com/ +- Values ~ http://eloquentjavascript.net/01_values.html - * Try to find an example you can expand on. For instance coding a website that lists the students in the class along with their Github Repos. This way you can show anything from DOM querying to objects (for each student) and even load up the Github API - * Live coding in class to show how certain features work. - * Ask students to present their work, let them know failing while coding isn't just accepted it's encouraged. Fail often and fail early. - * Homework is listed on Trello and handed in on Github - * There's no strict lesson plan, adapt to students' need and level. Try to make up more advanced challenges for quick learners. - * Test after every module, if students fail they can't move on to the rest of the program. It is possible to redo a module (one time). +## Lesson 2 ( 26/02/2017 ) +- Functions ~ http://eloquentjavascript.net/03_functions.html +- Program structure ~ http://eloquentjavascript.net/02_program_structure.html -## Extra extra - * Slackbot - * Work in one environment +## Lesson 3 +## Lesson 4 -## After - * Feedback from students and teachers on the modules +## Lesson 5 +## Lesson 6 +Module goals: + diff --git a/Week0/README.md b/Week0/README.md new file mode 100644 index 000000000..181c7e65e --- /dev/null +++ b/Week0/README.md @@ -0,0 +1,11 @@ +#Reading material for your first JavaScript lesson: + +## Lesson 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 + +_Please go through the material and come to class prepared!_ + +Helpful resource: http://jsbooks.revolunet.com/ \ No newline at end of file diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md new file mode 100644 index 000000000..5e9b593c6 --- /dev/null +++ b/Week1/MAKEME.md @@ -0,0 +1,4 @@ +##Assignments week 2: + +Finish these [Basic JavaScript](https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works) exercises in FreeCodeCamp: +from _Comment your JavaScript_ to the _Golf code_ exercise diff --git a/Week1/README.md b/Week1/README.md index d896b8432..f710a91f3 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -1,13 +1,6 @@ -# Lecture one +#Reading material for the second lecture: -# Covered in class: +- Functions ~ http://eloquentjavascript.net/03_functions.html +- Program structure ~ http://eloquentjavascript.net/02_program_structure.html -## Git introduction - * publish your websites on Git (UI) - * branch and push, clone - -## Homework - * Create a .js file that prints something to the console and add it to your github pages repository. - * Recreate your CV (from the HTML/CSS module) on pages.github.io using this tutorial https://pages.github.com/ and share your link on Trello - * Complete the first couple assignments on Codecademy (up until Math operators I) - * Use document.querySelector to select an element in your github pages website and change the innerHTML. +_Please go through the material and come to class prepared!_ diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md new file mode 100644 index 000000000..44aa85ea4 --- /dev/null +++ b/Week2/MAKEME.md @@ -0,0 +1,4 @@ +##Assignment week 2 + +Finish these [Basic JavaScript](https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works) exercises in FreeCodeCamp: +from _Iterate with JavaScript For Loops_ to the _Invert Regular Expression Matches with JavaScript_ exercise \ No newline at end of file diff --git a/Week2/README.md b/Week2/README.md index b24c5bc24..04e9a12dc 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -1,24 +1,3 @@ -# Lecture two +#Reading material for the third lecture: -# Covered in class: - -## Homework: - * Update your CV: - 1. Remove sensitive personal information. You can link to your LinkedIn account for instance if you want people to be able to reach you - 2. Look at the feedback from the last module (HTML/CSS) change your CV to reflect this feedback. - 3. Validate your html using the W3c Vaidator https://validator.w3.org/ - * Complete the following codecamp assignments: - * Start at https://www.freecodecamp.com/challenges/write-reusable-javascript-with-functions - * And make the next couple assignments until your reach: Assignment with a Returned Value - * Add a useful function to your website:
- Write a js feature that follows the following rules - 1. It takes user input on a website (look up input fields) - 2. It uses that input as parameters for a function - 3. The function does something with the parameters and returns a value using 'return' - 4. The return value is used on the website. - * For instance: Create a function that allows people to input a certain product they eat or drink every day and then asks how long they expect to live (for instance someone smokes one pack of cigarettes a day and expects to live 25 more years) then they might spend 1 X priceOfPack x 365 x lifeExpectancy euros on that product - * Be creative. If your idea is too complex to finish, don't worry, this exercise is really about trying to write some code yourself and applying what you've learnt. - * Try to solve Unmesh' challenge: - Assignment for “for loops” : - * Print ’n’ lines of a Pascal’s triangle. - * Hand in your homework in Trello +TBA diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md new file mode 100644 index 000000000..36ed17580 --- /dev/null +++ b/Week3/MAKEME.md @@ -0,0 +1,27 @@ +#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 + + +##Challenges: +- https://www.freecodecamp.com/challenges/declare-javascript-objects-as-variables +- https://www.freecodecamp.com/challenges/make-instances-of-objects-with-a-constructor-function +- 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 + +##Further reading: +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 + + +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 \ No newline at end of file diff --git a/Week3/README.md b/Week3/README.md index 2db20a4a7..c415dfc94 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -1,14 +1,4 @@ -# Lecture three -# Covered in class: +#Reading material for the fourth lecture -## Homework: -Create a game! - * The game uses JSON as input - * The game should have user interaction - * Have at least 3 different functions - * Have at least one callback function - * Use objects (this can also be a source of inspiration for what kind of game to make) - * The game has to run on an HTML page (live on Github) - * All the code needs to be commented - * The github page should have a readme describing how the game/code works and a whishlist of features to be added in the future +TBA \ No newline at end of file From 4799bb425f0627b09afbfec42ded2a2a7607280c Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 6 Mar 2017 16:57:57 +0100 Subject: [PATCH 002/496] links --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 3ca58b73a..b4fe5658f 100644 --- a/README.md +++ b/README.md @@ -7,10 +7,10 @@ This is the description of the classes for JavaScript fundamentals. |Week|Topic|Read|Homework| |----|-----|----|--------| -|0.|preparation for first JavaScript session|https://github.com/HackYourFuture/JavaScript/tree/master/Week0|https://github.com/HackYourFuture/JavaScript/tree/master/Week0| -|1.|Values, Operators and Variables. Primitives Types ( Strings, Numbers, Arrays, Functions, Objects literals) Conditions|https://github.com/HackYourFuture/JavaScript/tree/master/Week1|https://github.com/HackYourFuture/JavaScript/tree/master/Week1| -|2.|Functions, For and While Loops,String and Array Manipulations |https://github.com/HackYourFuture/JavaScript/tree/master/Week2|https://github.com/HackYourFuture/JavaScript/tree/master/Week2| -|3.|String and Array Manipulations, Closures, Scope and Immediately Invoked function expression, Call Backs and Promises|https://github.com/HackYourFuture/JavaScript/tree/master/Week3|https://github.com/HackYourFuture/JavaScript/tree/master/Week3| +|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, Closures, Scope and Immediately Invoked function expression, Call Backs and Promises|[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.|Async VS Sync, XHTTP Requests|TBA|TBA| |5.|Objects and Instances|TBA|TBA| |6.|TBA|TBA|TBA| From af369af82f85d273ea204b5f8ce9fec29e961b4c Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 6 Mar 2017 17:02:45 +0100 Subject: [PATCH 003/496] added fundementals --- README.md | 24 ++---------------------- 1 file changed, 2 insertions(+), 22 deletions(-) diff --git a/README.md b/README.md index b4fe5658f..4b0732a98 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ This is the description of the classes for JavaScript fundamentals. |Week|Topic|Read|Homework| |----|-----|----|--------| -|0.|preparation for first JavaScript session|[Reading Week 0](https://github.com/HackYourFuture/JavaScript/tree/master/Week0)|-| +|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, Closures, Scope and Immediately Invoked function expression, Call Backs and Promises|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/MAKEME.md)| @@ -25,26 +25,6 @@ _We demand our student to be prepared (or at least to briefly read) the content 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. ---- -## Lesson 1 ( 19/02/2017 ) - -- Introduction ~ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Introduction -- Introduction with scaffolding ~ http://jsforcats.com/ -- Values ~ http://eloquentjavascript.net/01_values.html - -## Lesson 2 ( 26/02/2017 ) - -- Functions ~ http://eloquentjavascript.net/03_functions.html -- Program structure ~ http://eloquentjavascript.net/02_program_structure.html - -## Lesson 3 - -## Lesson 4 - -## Lesson 5 - -## Lesson 6 - - Module goals: +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 b94275df2e1fbc0c858efd844336d43a48d89d8c Mon Sep 17 00:00:00 2001 From: mkruijt Date: Tue, 14 Mar 2017 14:16:57 +0100 Subject: [PATCH 004/496] link update --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 4b0732a98..6655061a9 100644 --- a/README.md +++ b/README.md @@ -26,5 +26,5 @@ I'm concerned that a lot of students would like to have video resources, althoug If you would like to recommend resource that I should add, please pm me. Module goals: -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/master/fundamentalsand) and research/ ask for help (Slack!) with the concepts that are not entirely clear. From 525afbd51c4249a5526c592836c7f0d186d2dddf Mon Sep 17 00:00:00 2001 From: mkruijt Date: Tue, 14 Mar 2017 14:51:00 +0100 Subject: [PATCH 005/496] homework week4 --- README.md | 2 +- Week4/MAKEME.md | 38 ++++++++++++++++++++++++++++++++++++++ Week4/README.md | 6 ++++++ 3 files changed, 45 insertions(+), 1 deletion(-) create mode 100644 Week4/MAKEME.md create mode 100644 Week4/README.md diff --git a/README.md b/README.md index 6655061a9..582ba8f9a 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ This is the description of the classes for JavaScript fundamentals. |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, Closures, Scope and Immediately Invoked function expression, Call Backs and Promises|[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.|Async VS Sync, XHTTP Requests|TBA|TBA| +|4.|Async VS Sync, XHTTP Requests|[Homework Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/MAKEME.md)|TBA| |5.|Objects and Instances|TBA|TBA| |6.|TBA|TBA|TBA| |7.|Test Driven Development|TBA|TBA| diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md new file mode 100644 index 000000000..91867e96a --- /dev/null +++ b/Week4/MAKEME.md @@ -0,0 +1,38 @@ +# Homework Week 4 + +##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 + + +## 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 + +##Tuturial +----------- +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. + diff --git a/Week4/README.md b/Week4/README.md new file mode 100644 index 000000000..072671d9d --- /dev/null +++ b/Week4/README.md @@ -0,0 +1,6 @@ +### Reading Week 4 +----------- + +To be read before the 5th lecture: + +TBA \ No newline at end of file From 7b8ccdb17186a4294c1e0c7244aab53ad28d847c Mon Sep 17 00:00:00 2001 From: mkruijt Date: Tue, 14 Mar 2017 14:52:33 +0100 Subject: [PATCH 006/496] homework week4 --- Week4/MAKEME.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index 91867e96a..8c1dfe3e0 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -1,7 +1,6 @@ # Homework Week 4 -##Reading ------------ +## Reading * code style conventions * read http://javascript.crockford.com/code.html @@ -13,7 +12,7 @@ ## 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 @@ -32,7 +31,7 @@ - https://www.freecodecamp.com/challenges/check-for-palindromes - https://www.freecodecamp.com/challenges/find-the-longest-word-in-a-string -##Tuturial ------------ +## Tuturial + 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. From f37488e831e121965a02176ecb0a897978a09b00 Mon Sep 17 00:00:00 2001 From: Mauro Mandracchia Date: Wed, 15 Mar 2017 15:48:14 +0100 Subject: [PATCH 007/496] Update MAKEME.md --- Week3/MAKEME.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 36ed17580..cce981d19 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -1,13 +1,13 @@ -#Homework Week 3 +# Homework Week 3 -##Read: +## 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 -##Challenges: +## Challenges: - https://www.freecodecamp.com/challenges/declare-javascript-objects-as-variables - https://www.freecodecamp.com/challenges/make-instances-of-objects-with-a-constructor-function - https://www.freecodecamp.com/challenges/make-unique-objects-by-passing-parameters-to-our-constructor @@ -15,7 +15,7 @@ And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range -##Further reading: +## Further reading: 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 @@ -24,4 +24,4 @@ Arguments - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Funct 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 \ No newline at end of file +https://developer.mozilla.org/en/docs/Web/JavaScript/Closures From c141b2d93ad972d3aac0b6dc8f04623018d29a38 Mon Sep 17 00:00:00 2001 From: Mauro Mandracchia Date: Wed, 15 Mar 2017 15:48:30 +0100 Subject: [PATCH 008/496] Update MAKEME.md --- Week4/MAKEME.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index 8c1dfe3e0..483c0a65d 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -31,7 +31,7 @@ - https://www.freecodecamp.com/challenges/check-for-palindromes - https://www.freecodecamp.com/challenges/find-the-longest-word-in-a-string -## Tuturial +## 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. From d287e0e208095e7e80515afd9577761b094220cb Mon Sep 17 00:00:00 2001 From: Mauro Mandracchia Date: Wed, 15 Mar 2017 15:54:48 +0100 Subject: [PATCH 009/496] Update MAKEME.md --- Week4/MAKEME.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index 483c0a65d..3a9e00d58 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -35,3 +35,7 @@ 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 + From 69b6fce3b9b24f7149737238f8e2c2a8ec2797d5 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Thu, 16 Mar 2017 14:18:00 +0100 Subject: [PATCH 010/496] added reading week4 --- README.md | 2 +- Week4/README.md | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 582ba8f9a..9015255bf 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ This is the description of the classes for JavaScript fundamentals. |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, Closures, Scope and Immediately Invoked function expression, Call Backs and Promises|[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.|Async VS Sync, XHTTP Requests|[Homework Week 4](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/MAKEME.md)|TBA| +|4.|Async VS Sync, XHTTP Requests|[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.|Objects and Instances|TBA|TBA| |6.|TBA|TBA|TBA| |7.|Test Driven Development|TBA|TBA| diff --git a/Week4/README.md b/Week4/README.md index 072671d9d..3b2da1ddf 100644 --- a/Week4/README.md +++ b/Week4/README.md @@ -1,6 +1,6 @@ ### Reading Week 4 ------------ To be read before the 5th lecture: -TBA \ No newline at end of file +http://eloquentjavascript.net/06_object.html +http://eloquentjavascript.net/05_higher_order.html \ No newline at end of file From a1e42dc4cb87cbbbed94eae43a639c19f4be3978 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Thu, 16 Mar 2017 14:33:10 +0100 Subject: [PATCH 011/496] links --- Week4/MAKEME.md | 4 ++-- Week4/README.md | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index 3a9e00d58..2b585e99b 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -36,6 +36,6 @@ 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 +- http://eloquentjavascript.net/06_object.html +- http://eloquentjavascript.net/05_higher_order.html diff --git a/Week4/README.md b/Week4/README.md index 3b2da1ddf..cc540779f 100644 --- a/Week4/README.md +++ b/Week4/README.md @@ -2,5 +2,5 @@ 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 +- http://eloquentjavascript.net/06_object.html +- http://eloquentjavascript.net/05_higher_order.html \ No newline at end of file From 71a7526063555f39734b08e0cd71922140eb97eb Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 19 Mar 2017 15:36:55 +0100 Subject: [PATCH 012/496] added homework week5 --- README.md | 8 ++-- Week1/MAKEME.md | 22 +++++++-- Week2/MAKEME.md | 76 ++++++++++++++++++++++++++++++- Week3/MAKEME.md | 117 ++++++++++++++++++++++++++++++++++++++++++++---- Week3/README.md | 7 ++- Week5/MAKEME.md | 82 +++++++++++++++++++++++++++++++++ Week5/README.md | 1 + 7 files changed, 294 insertions(+), 19 deletions(-) create mode 100644 Week5/MAKEME.md create mode 100644 Week5/README.md diff --git a/README.md b/README.md index 9015255bf..556743ca3 100644 --- a/README.md +++ b/README.md @@ -10,10 +10,10 @@ This is the description of the classes for JavaScript fundamentals. |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, Closures, Scope and Immediately Invoked function expression, Call Backs and Promises|[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.|Async VS Sync, XHTTP Requests|[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.|Objects and Instances|TBA|TBA| -|6.|TBA|TBA|TBA| +|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, Call Backs 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.|Objects and Instances|TBA|TBA| |7.|Test Driven Development|TBA|TBA| |8.|Test Driven Development|TBA|TBA| |9.|Test Driven Development|TBA|TBA| diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 5e9b593c6..b91276f26 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -1,4 +1,20 @@ -##Assignments week 2: +##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: + +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 -Finish these [Basic JavaScript](https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works) exercises in FreeCodeCamp: -from _Comment your JavaScript_ to the _Golf code_ exercise diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 44aa85ea4..d63cd520f 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -1,4 +1,76 @@ ##Assignment week 2 -Finish these [Basic JavaScript](https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works) exercises in FreeCodeCamp: -from _Iterate with JavaScript For Loops_ to the _Invert Regular Expression Matches with JavaScript_ exercise \ No newline at end of file +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: + +``` +var obj1 = { + a: 1, + b: 'this is the letter b', + c: { foo: 'what is a foo anyway', + bar: [1,2,3,4] + } +} + +var obj2 = { + a: '1', + b: 'this is the letter b', + c: { foo: 'what is a foo anyway', + bar: [1,2,3,4] + } +} +``` + +in our example we'll say that obj1 == obj2 is true and obj1 === obj2 is false. Make sure you can see why before you write any code! + +2. +We saw that we can pass functions as arguments to other functions. Your task is to write a function that takes another function as an argument and runs it. + +``` +function foo(func) { + // What to do here? +} + +function bar() { + console.log('Hello, I am bar!'); +} + +foo(bar); +``` + + +Write some code to test two arrays for equality using == and ===. Test the following: +var x = [1,2,3]; +var y = [1,2,3]; +var z = y; +What do you think will happen with x == y, x === y and z == y and z == x? Prove it! +Don't cheat! Seriously - try it first. +http://jsfiddle.net/jimschubert/85M4z/ +http://stackoverflow.com/questions/22395357/how-to-compare-two-arrays-are-equal-using-javascript + +3. +https://www.freecodecamp.com/challenges/comparisons-with-the-logical-and-operator + +4. +https://www.freecodecamp.com/challenges/record-collection + +5. +https://www.freecodecamp.com/challenges/iterate-over-arrays-with-map + +6. +We did the following example in class: + +``` + var o1 = { foo: 'bar' }; + var o2 = { foo: 'bar' }; + var o3 = o2; +``` +Show that changing o2 changes o3 (or not) and changing o2 changes o3 (or not). + +Does the order that you assign (o3 = o2 or o2 = o3) matter? + +------------------------------------- +### Some further reading: +Have a look at https://javascriptweblog.wordpress.com/2010/09/27/the-secret-life-of-javascript-primitives/ + +'Coerce' means to try to change - so coercing `var x = '6'` to number means means trying to change the type to number temporarily. diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index cce981d19..8a502204f 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -6,7 +6,6 @@ - https://developer.mozilla.org/en-US/docs/Glossary/Scope - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions - ## Challenges: - https://www.freecodecamp.com/challenges/declare-javascript-objects-as-variables - https://www.freecodecamp.com/challenges/make-instances-of-objects-with-a-constructor-function @@ -15,13 +14,115 @@ And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range -## Further reading: -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 - - 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 + + + + + + + diff --git a/Week3/README.md b/Week3/README.md index c415dfc94..babd6a127 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -1,4 +1,7 @@ -#Reading material for the fourth lecture +# Reading material for the fourth lecture -TBA \ No newline at end of file +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 diff --git a/Week5/MAKEME.md b/Week5/MAKEME.md new file mode 100644 index 000000000..013989984 --- /dev/null +++ b/Week5/MAKEME.md @@ -0,0 +1,82 @@ +## Homework week 5 + +### 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. + +Please solve the following three questions as a warm up to thinking about scope. + +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. +What will be the output of the following code - and more importantly - WHY? + +``` +for (var i = 0; i < 3; i++) { + setTimeout(function() { alert(i); }, 1000 + i); +} +``` + +3. +Write a function that would allow you to do this: + +``` +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 + +``` + + + + + +``` + + +## TODO: + +Create a game! + * The game uses JSON as input + * The game should have user interaction + * Have at least 7 different functions + * Have at least one callback function + * Use objects (this can also be a source of inspiration for what kind of game to make) + * The game has to run on an HTML page (live on Github using pages.github.io using this tutorial https://pages.github.com/ and share your link on Trello) + * All the code needs to be commented + * The Github page should have a README.md describing how the game/code works and a whishlist of features to be added in the future + +- Create at least 1 issue (bug / feature / code improvement) on another students github game repository. Do this in pairs. +- solve the issue proposed by another student in your github game repo. More info [here](https://hackyourfuture.slack.com/files/michahell/F31BX1XT6/Merging_a_local_branch_into_master) + - use a local non-tracking branch and merge into master + - or use a local tracking branch tracking your master, and push directly to master (slightly harder / more advanced) + +[Example](https://www.w3schools.com/graphics/game_intro.asp) of a simple js game on w3schools diff --git a/Week5/README.md b/Week5/README.md new file mode 100644 index 000000000..4b2ad8b27 --- /dev/null +++ b/Week5/README.md @@ -0,0 +1 @@ +## Reading for lecture 6 From 4dbe0a64e8c51f3e7a4663be75284e06b0f4832f Mon Sep 17 00:00:00 2001 From: joostlubach Date: Sun, 19 Mar 2017 15:45:31 +0100 Subject: [PATCH 013/496] Update MAKEME.md --- Week5/MAKEME.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week5/MAKEME.md b/Week5/MAKEME.md index 013989984..78e71145a 100644 --- a/Week5/MAKEME.md +++ b/Week5/MAKEME.md @@ -65,7 +65,7 @@ Don't cheat - but if you get stuck ... http://stackoverflow.com/questions/750486 ## TODO: Create a game! - * The game uses JSON as input + * The game uses the Reqres API as input (use $.getJSON to load data): http://reqres.in. * The game should have user interaction * Have at least 7 different functions * Have at least one callback function From 0e3006b56f28dd58606937655831a628ca1d6675 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 19 Mar 2017 16:02:18 +0100 Subject: [PATCH 014/496] homework week 5 --- Week5/MAKEME.md | 53 ++++++++++++++++++++++++++++++++----------------- 1 file changed, 35 insertions(+), 18 deletions(-) diff --git a/Week5/MAKEME.md b/Week5/MAKEME.md index 78e71145a..ba7557652 100644 --- a/Week5/MAKEME.md +++ b/Week5/MAKEME.md @@ -62,21 +62,38 @@ Don't cheat - but if you get stuck ... http://stackoverflow.com/questions/750486 ``` -## TODO: - -Create a game! - * The game uses the Reqres API as input (use $.getJSON to load data): http://reqres.in. - * The game should have user interaction - * Have at least 7 different functions - * Have at least one callback function - * Use objects (this can also be a source of inspiration for what kind of game to make) - * The game has to run on an HTML page (live on Github using pages.github.io using this tutorial https://pages.github.com/ and share your link on Trello) - * All the code needs to be commented - * The Github page should have a README.md describing how the game/code works and a whishlist of features to be added in the future - -- Create at least 1 issue (bug / feature / code improvement) on another students github game repository. Do this in pairs. -- solve the issue proposed by another student in your github game repo. More info [here](https://hackyourfuture.slack.com/files/michahell/F31BX1XT6/Merging_a_local_branch_into_master) - - use a local non-tracking branch and merge into master - - or use a local tracking branch tracking your master, and push directly to master (slightly harder / more advanced) - -[Example](https://www.w3schools.com/graphics/game_intro.asp) of a simple js game on w3schools +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); +``` + +## 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). + +- 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) From aaee5454b6e503bedb9cf7ad2fefe8d68e1087a3 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 26 Mar 2017 14:54:31 +0200 Subject: [PATCH 015/496] homework week 6 --- README.md | 4 ++-- Week6/MAKEME.md | 5 +++++ Week6/README.md | 3 +++ 3 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 Week6/MAKEME.md create mode 100644 Week6/README.md diff --git a/README.md b/README.md index 556743ca3..20efb644f 100644 --- a/README.md +++ b/README.md @@ -11,9 +11,9 @@ This is the description of the classes for JavaScript fundamentals. |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, Call Backs 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)| +|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.|Objects and Instances|TBA|TBA| +|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| |9.|Test Driven Development|TBA|TBA| diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md new file mode 100644 index 000000000..5fd8e97b4 --- /dev/null +++ b/Week6/MAKEME.md @@ -0,0 +1,5 @@ +# 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 + +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. \ No newline at end of file diff --git a/Week6/README.md b/Week6/README.md new file mode 100644 index 000000000..9aad0e0cd --- /dev/null +++ b/Week6/README.md @@ -0,0 +1,3 @@ +# Reading week 6 + +TBA From a6f22170f023220ed8f9602d34fc93b8b37c7311 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sun, 26 Mar 2017 16:17:04 +0200 Subject: [PATCH 016/496] homework week 6 --- Week6/MAKEME.md | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md index 5fd8e97b4..ba3032d1f 100644 --- a/Week6/MAKEME.md +++ b/Week6/MAKEME.md @@ -2,4 +2,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 -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. \ No newline at end of file +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!!!! \ No newline at end of file From 65529b5f8e8cff7b804502192b146df131c754e5 Mon Sep 17 00:00:00 2001 From: Mauro Mandracchia Date: Sun, 26 Mar 2017 16:48:27 +0200 Subject: [PATCH 017/496] Update MAKEME.md --- Week6/MAKEME.md | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md index ba3032d1f..3d9b5aefd 100644 --- a/Week6/MAKEME.md +++ b/Week6/MAKEME.md @@ -4,4 +4,13 @@ Finish homework week 5: https://github.com/HackYourFuture/JavaScript/blob/master 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!!!! \ No newline at end of file +ASK A QUESTION ON SLACK!!!! + +## FROM CLASS +Create a repo that makes this code work +``` +fetchReposFromOrganization('hackyourfuture') + .then(renderListOfRepositories) + .then(fetchContributors) + .then(renderContributors); +``` From 1b561d30a24ecec4524e1379b9ff1fc78b0367e0 Mon Sep 17 00:00:00 2001 From: Mauro Mandracchia Date: Sun, 26 Mar 2017 23:07:13 +0200 Subject: [PATCH 018/496] Update MAKEME.md --- Week6/MAKEME.md | 18 ++++++++++++++++-- 1 file changed, 16 insertions(+), 2 deletions(-) diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md index 3d9b5aefd..92ad1b891 100644 --- a/Week6/MAKEME.md +++ b/Week6/MAKEME.md @@ -6,11 +6,25 @@ Read through the JavaScript Fundamentals [README](https://github.com/HackYourFut ASK A QUESTION ON SLACK!!!! -## FROM CLASS -Create a repo that makes this code work +## 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... From 05fb0e5e4945ded2f1098042113580f8a3baa136 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Thu, 6 Apr 2017 14:32:31 +0200 Subject: [PATCH 019/496] 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 020/496] 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 021/496] 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 022/496] 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 b28aa2854cd61b472fd0f6b8576d100b6fb9237d Mon Sep 17 00:00:00 2001 From: mkruijt Date: Thu, 6 Apr 2017 17:52:36 +0200 Subject: [PATCH 023/496] cleaned up --- README.md | 12 ++++++------ Week0/README.md | 2 +- Week1/MAKEME.md | 2 +- Week1/README.md | 2 +- Week2/MAKEME.md | 20 +++++++------------- Week2/README.md | 2 +- Week3/MAKEME.md | 21 +++++++-------------- Week3/README.md | 8 ++++---- Week5/MAKEME.md | 16 ++++++---------- Week5/README.md | 2 ++ 10 files changed, 36 insertions(+), 51 deletions(-) diff --git a/README.md b/README.md index 20efb644f..2fab3a242 100644 --- a/README.md +++ b/README.md @@ -8,12 +8,12 @@ This is the description of the classes for JavaScript fundamentals. |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)| +|1.|• Values
•Operators
• 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
• Immediately Invoked function expressions
• Callbacks
• 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| |9.|Test Driven Development|TBA|TBA| diff --git a/Week0/README.md b/Week0/README.md index 181c7e65e..ec32f0c8f 100644 --- a/Week0/README.md +++ b/Week0/README.md @@ -1,4 +1,4 @@ -#Reading material for your first JavaScript lesson: +# Reading material for your first JavaScript lesson: ## Lesson 1 diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index b91276f26..76e4f4e35 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -1,4 +1,4 @@ -##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. 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..fe74f9f38 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -1,7 +1,6 @@ -##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: +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: ``` var obj1 = { @@ -23,8 +22,7 @@ var obj2 = { in our example we'll say that obj1 == obj2 is true and obj1 === obj2 is false. Make sure you can see why before you write any code! -2. -We saw that we can pass functions as arguments to other functions. Your task is to write a function that takes another function as an argument and runs it. +2. We saw that we can pass functions as arguments to other functions. Your task is to write a function that takes another function as an argument and runs it. ``` function foo(func) { @@ -48,17 +46,13 @@ Don't cheat! Seriously - try it first. http://jsfiddle.net/jimschubert/85M4z/ http://stackoverflow.com/questions/22395357/how-to-compare-two-arrays-are-equal-using-javascript -3. -https://www.freecodecamp.com/challenges/comparisons-with-the-logical-and-operator +3. https://www.freecodecamp.com/challenges/comparisons-with-the-logical-and-operator -4. -https://www.freecodecamp.com/challenges/record-collection +4. https://www.freecodecamp.com/challenges/record-collection -5. -https://www.freecodecamp.com/challenges/iterate-over-arrays-with-map +5. https://www.freecodecamp.com/challenges/iterate-over-arrays-with-map -6. -We did the following example in class: +6. We did the following example in class: ``` var o1 = { foo: 'bar' }; 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/Week3/MAKEME.md b/Week3/MAKEME.md index 8a502204f..7eb741362 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -26,8 +26,7 @@ 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: +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() { @@ -64,31 +63,26 @@ We learned a little bit about callbacks in JS. A callback is simply a function p ``` -2. -Please solve this problem using: +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 +3. Some practice with objects https://www.freecodecamp.com/challenges/construct-javascript-objects-with-functions -4. -Nested loops +4. Nested loops https://www.freecodecamp.com/challenges/nesting-for-loops -5. -We did some work with arrays - `var arr = [1,2,3]` +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. +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; @@ -110,8 +104,7 @@ 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: +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 diff --git a/Week3/README.md b/Week3/README.md index babd6a127..61e0bbefb 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -1,7 +1,7 @@ # Reading material for the fourth lecture -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 +• 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 diff --git a/Week5/MAKEME.md b/Week5/MAKEME.md index ba7557652..39265ec77 100644 --- a/Week5/MAKEME.md +++ b/Week5/MAKEME.md @@ -12,8 +12,7 @@ http://stackoverflow.com/questions/111102/how-do-javascript-closures-work ### Homework -1. -Let's continue to learn a little more about scope and Closures. +1. Let's continue to learn a little more about scope and Closures. Please solve the following three questions as a warm up to thinking about scope. @@ -21,8 +20,7 @@ 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. -What will be the output of the following code - and more importantly - WHY? +2. What will be the output of the following code - and more importantly - WHY? ``` for (var i = 0; i < 3; i++) { @@ -30,8 +28,7 @@ for (var i = 0; i < 3; i++) { } ``` -3. -Write a function that would allow you to do this: +3. Write a function that would allow you to do this: ``` var addSix = createBase(6); @@ -39,8 +36,7 @@ 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? +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 @@ -95,5 +91,5 @@ writeDataToFile(data); 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). -- 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) +• 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) diff --git a/Week5/README.md b/Week5/README.md index 4b2ad8b27..bd37a67ce 100644 --- a/Week5/README.md +++ b/Week5/README.md @@ -1 +1,3 @@ ## Reading for lecture 6 + +TBA \ No newline at end of file From 036c1069c3d3b57d171a6826be698fa096c91b6a Mon Sep 17 00:00:00 2001 From: mkruijt Date: Thu, 6 Apr 2017 17:54:15 +0200 Subject: [PATCH 024/496] cleaned up --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2fab3a242..1d15ffbba 100644 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ This is the description of the classes for JavaScript fundamentals. |Week|Topic|Read|Homework| |----|-----|----|--------| |0.|Preparation for first JavaScript session|[Reading Week 0](https://github.com/HackYourFuture/JavaScript/tree/master/Week0)|-| -|1.|• Values
•Operators
• 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)| +|1.|• Values
• Operators
• 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
• Immediately Invoked function expressions
• Callbacks
• 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)| From 1ebe4a071bf535f54b13df470225ec965a660dd6 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Thu, 6 Apr 2017 17:57:44 +0200 Subject: [PATCH 025/496] 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 29d4cadff2686470a11e9d144424399bbb33250a Mon Sep 17 00:00:00 2001 From: Onne Date: Sun, 9 Apr 2017 13:23:07 +0200 Subject: [PATCH 026/496] Update MAKEME.md --- Week1/MAKEME.md | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 76e4f4e35..0a9ec2f33 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -1,11 +1,15 @@ ## 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. + +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: https://www.freecodecamp.com/challenges/multiply-two-decimals-with-javascript @@ -17,4 +21,3 @@ 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 fcdfc82bbdebe6446d45053968e4b176b3246a6e Mon Sep 17 00:00:00 2001 From: Onne Date: Sun, 9 Apr 2017 13:40:20 +0200 Subject: [PATCH 027/496] Update MAKEME.md --- Week1/MAKEME.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 0a9ec2f33..6eafb0640 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -10,6 +10,15 @@ Write a program to answer the following questions: Create an object and a function that takes the object as a parameter and prints out all of its names and values. +Can you write the following without the `if` statement, but with just as a single line with `console.log(...);`? +``` +if (3 == 3) { + console.log("true") +} else { + console.log("false") +} +``` + 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: https://www.freecodecamp.com/challenges/multiply-two-decimals-with-javascript From d198aeec8e4515a4a5dab08c27b6f206cd747ec9 Mon Sep 17 00:00:00 2001 From: Onne Date: Sun, 9 Apr 2017 15:45:44 +0200 Subject: [PATCH 028/496] 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 029/496] 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 c94839a175362d806bae3192c20be76b938679c5 Mon Sep 17 00:00:00 2001 From: Mauro Mandracchia Date: Mon, 17 Apr 2017 23:08:25 +0200 Subject: [PATCH 030/496] Create HomeWork.js --- Week6/HomeWork.js | 115 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 115 insertions(+) create mode 100644 Week6/HomeWork.js diff --git a/Week6/HomeWork.js b/Week6/HomeWork.js new file mode 100644 index 000000000..7c4a2586d --- /dev/null +++ b/Week6/HomeWork.js @@ -0,0 +1,115 @@ +(function(){ + var GitHubUrl = 'https://api.github.com'; + + // This function performs an http request to a server + // Return a promise https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise + function Ajax ( method, url ){ + + // For promise take a first argument a function + // and the first two parameters are two function + // The first is resolve that can be call when the async operation goes well + // and the second is reject that can be call when something goes wrong + return new Promise(function(resolve, reject){ + var req = new XMLHttpRequest(); + req.addEventListener('load', function(){ + // Our request is loaded + try{ + resolve( JSON.parse(this.responseText) ) + }catch(e){ + reject( new Error(e) ) + } + }); + req.open(method, url); + + // This is needed to autheticate your requests + // For don't get limits on api + req.setRequestHeader( + 'Authorization', + 'token 9d232e8e02c4b19142be0d89a0480a8109fd257b' + ); + + req.send(); + }) + } + + // We declare a function that fetch the repositories of one organization + // And returns the Promise the above function returns + function fetchReposFromOrganization( organizationName ){ + return Ajax( 'GET', [GitHubUrl, 'orgs', organizationName, 'repos'].join('/')); + } + + var fetchedRepos = []; + + // Here we create a list + function renderListOfRepositories ( res ){ + var html = []; + var promisesForContributors = [] + + // Here we loop trough the repos and we create some html + for(var k=0; k', + '', + '

', repoName, '

', + '

', description, '

', + '', + '
', + '' + ].join('')); + + // We create here a new promise for fetching the contributors of the repo and we push + // to an Array of only promises + promisesForContributors.push(fetchContributors(repo.owner.login, repo.name)) + } + // Once the loop is done we paste in the html the result of our template + document.getElementById('app').innerHTML = html.join('') + + // And we ask to resolve the Array of promises trough Promise.all + // https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Promise/all + return Promise.all(promisesForContributors); + } + + // This get used above for fetch the Contributors (line 73) + function fetchContributors( owner, repo ){ + return Ajax( 'GET', [GitHubUrl, 'repos', owner, repo, 'contributors'].join('/')); + } + + // Alike the renderListOfRepositories this renders the list of Contributors + function renderContributors( repoContributors ){ + // The first array is the repo posiotion (equivalent to the promise relsolved order) + for(var i=0; i']; + for(var k=0; k${contributor.login}`) + } + htmlContributors.push(''); + // We find the reference (#repo-${id}) for the DOM element and we paste the template of contributors + document.querySelector(`#repo-${fetchedRepos[i]} .contributors`).innerHTML = htmlContributors.join(''); + } + + } + + // Perform an Ajax function and return the result to the next then() + fetchReposFromOrganization('hackyourfuture') + // This get the repos list + .then(renderListOfRepositories) + // Render the list of contributors + .then(renderContributors); + + // PROFIT \o/ + +})(); From d67e34119f9a5e3132aa87105274f7a6e45e6e0a Mon Sep 17 00:00:00 2001 From: Mauro Mandracchia Date: Mon, 17 Apr 2017 23:09:05 +0200 Subject: [PATCH 031/496] Create index.html --- Week6/index.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 Week6/index.html diff --git a/Week6/index.html b/Week6/index.html new file mode 100644 index 000000000..0594ded2f --- /dev/null +++ b/Week6/index.html @@ -0,0 +1,12 @@ + + + + + HYF - Fetch Repos with Promises + + +
+
+ + + From 940177f2412ce6d501604f0a5bf7de17549e5a5a Mon Sep 17 00:00:00 2001 From: Laurens Date: Tue, 25 Apr 2017 13:25:26 +0200 Subject: [PATCH 032/496] 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 033/496] 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 034/496] 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 035/496] 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 036/496] 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 037/496] 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 038/496] 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 039/496] 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 040/496] 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 041/496] 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 042/496] 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 043/496] 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 044/496] 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 045/496] 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 046/496] 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 047/496] 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 048/496] 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 049/496] 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 050/496] 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 051/496] 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 052/496] 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 053/496] 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 054/496] 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 055/496] 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 056/496] 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 057/496] 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 058/496] 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 059/496] 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 060/496] 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 061/496] 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 062/496] 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 063/496] 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 064/496] 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 065/496] 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 066/496] 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 `