From 9fe7d7262a7599be86577c17ed79d747d908c453 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Wed, 29 Nov 2017 14:09:37 +0100 Subject: [PATCH 1/7] fixed some homework mistakes --- Week3/MAKEME.md | 6 +++++ Week6/MAKEME.md | 33 +------------------------- Week7/MAKEME.md | 43 +++++++-------------------------- Week8/MAKEME.md | 63 ++++++++++++++++++++++++++++++++++++++++++++++++- Week9/MAKEME.md | 34 ++++++++------------------ 5 files changed, 87 insertions(+), 92 deletions(-) diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 9b17ff117..89eea98d9 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -101,6 +101,12 @@ _Deadline Sunday morning_ And just for fun ... https://www.freecodecamp.com/challenges/sum-all-numbers-in-a-range +## Step 6: Read before next lecture + +_Deadline Sunday morning_ + +Go trough the reading material in the [README.md](/Week3/README.md) to prepare for your next class + ### :boom: Bonus homework :boom: the Bonus homework for this week (for those of you want an extra challenge) do the following: diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md index b2574a4a7..a8b4620cb 100644 --- a/Week6/MAKEME.md +++ b/Week6/MAKEME.md @@ -103,38 +103,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" - - -### Step 4: Some more JavaScript - -_Deadline Saturday_ - -Make a website that fetches (= to get) data asynchronously. - -1) Create a new website with external js file - -2) Add a button (e.g. 'click me') that when clicked `console.logs` 'you clicked me!' - -3) Create a function that fetches from [The Github API](https://developer.github.com/v3/). For example from [this page] (https://api.github.com/orgs/HackYourFuture/repos) (the one we used last week). For help on this check this [SO post](https://stackoverflow.com/questions/247483/http-get-request-in-javascript) - -4) Display the data that you get from the Github API on your web page. - -5) Now link the two together: When you click the button -> get the data from the Github API and display it on your website - -6) Make all the repositories link their own page in Github. Use the value of the key: `name` to make this work (hint: Github urls always look like this https://api.github.com/repos/HackYourFuture/[repositoryName] where [repositoryName] would be replaced by the actual `name` of the repository, for example `CommandLine`). Make sure the link opens in a new tab. - -7) BONUS: if you look at this: - -```js -https://api.github.com/repos/HackYourFuture/CommandLine -``` - -You can see `CommandLine` in the URL. These are called "query parameters" and let us specify in detail what we want from the API. Play around with this. For example you can make two buttons that either get data for a specific repository, JavaScript or Node.js. Or go even more crazy and make users type in a search box 'JavaScript' and then send that to the API by changing the repository. - -__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! - - -### Step 5: Read before next lecture +### Step 4: Read before next lecture _Deadline Sunday morning_ diff --git a/Week7/MAKEME.md b/Week7/MAKEME.md index 5b4ea4e37..a18731691 100644 --- a/Week7/MAKEME.md +++ b/Week7/MAKEME.md @@ -22,11 +22,11 @@ Give feedback on the SPA (Github API) and git branching homework of one of you f - Fix the issues from the last week and make sure you explain how you fixed the issue in a comment (or commit message) + -### Step 4: SPA :sweat_drops: -You are going to write a SPA (Single Page Application) 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). +### Step 4: Some more JavaScript -Just like last week: +_Deadline Saturday_ Make a website that fetches (= to get) data asynchronously. @@ -34,52 +34,25 @@ Make a website that fetches (= to get) data asynchronously. 2) Add a button (e.g. 'click me') that when clicked `console.logs` 'you clicked me!' -3) Create a function that fetches from [The Github API](https://developer.github.com/v3/). For example from [this page] (https://api.github.com/orgs/HackYourFuture/repos). For help on this check this [SO post](https://stackoverflow.com/questions/247483/http-get-request-in-javascript) +3) Create a function that fetches from [The Github API](https://developer.github.com/v3/). For example from [this page] (https://api.github.com/orgs/HackYourFuture/repos) (the one we used last week). For help on this check this [SO post](https://stackoverflow.com/questions/247483/http-get-request-in-javascript) 4) Display the data that you get from the Github API on your web page. 5) Now link the two together: When you click the button -> get the data from the Github API and display it on your website -Cool we are back where we left of. +6) Make all the repositories link their own page in Github. Use the value of the key: `name` to make this work (hint: Github urls always look like this https://api.github.com/repos/HackYourFuture/[repositoryName] where [repositoryName] would be replaced by the actual `name` of the repository, for example `CommandLine`). Make sure the link opens in a new tab. -6) Take a look at this: +7) BONUS: if you look at this: ```js https://api.github.com/repos/HackYourFuture/CommandLine ``` -7) Make a function which takes a single argument. The function should make an XHR request to `https://api.github.com/repos/HackYourFuture/[SearchTerm]` 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. +You can see `CommandLine` in the URL. These are called "query parameters" and let us specify in detail what we want from the API. Play around with this. For example you can make two buttons that either get data for a specific repository, JavaScript or Node.js. Or go even more crazy and make users type in a search box 'JavaScript' and then send that to the API by changing the repository. -8) Make all the repositories link their own page in Github. Use the value of the key: `name` to make this work (hint: Github urls always look like this https://api.github.com/repos/HackYourFuture/[repositoryName] where [repositoryName] would be replaced by the actual `name` of the repository, for example `CommandLine`). Make sure the link opens in a new tab. +__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! -- Make sure you handle user input well. That means you need to think about empty input, and input that doesn't yield any results. -So Github has this really nice documentation :octocat: : -Check these out for example -https://developer.github.com/v3/repos/collaborators/ -https://developer.github.com/v3/repos/commits/ - -9) Extend your page with an input element. This is so the user will be able to type in text. - -10) For each repository, show (in the right column) who the contributers are. You will need to use the `contributors_url` for this. - -!Important -- Do not duplicate code! This is especially important for making requests since we are making multiple ones with different urls and we want to do different actions based on the call we are making. Here are some handles to get you started: - - So write a function called `makeRequest` which accepts (at least) the following parameters: `url` and `callback`. - - Make sure your `callback` is called when the request errors or when it sends a response (look at the documentation) - - Your `callback` functions should accept two parameters so it can handle both errors: `err` and `response`. - So based on your users actions (input, hovering, clicking) you want to call `makeRequest` with a different `url` and supply it with a function that handles both errors (display an error message to the user for example) and responses (render it correctly, as described below). - - Make your functions small and reusable (modular)! That means create separate functions to handle certain steps. - -11) GO WILD - -Again, check out the Github API documentation to see what kind of magic stuff you can do with it. - -The assignment is to implement something extra that is not in the assignment :scream: (nice and vague right?) - -So for example, we have teams in our organization. You can find out who are in there and make a call to 'https://api.github.com/users/' + userInput (where userInput is a string typed into a search field by a user). You can show the users name, avatar image (not the link to the image!) and the number of public repos they have. Or you could make an API call to 'https://api.github.com/users/user/repos' to find out the public repo's they have. Or you can show how many people starred a specific repository. - -Anyway, endless fun and possibilities. Need inspiration, check out the Github API documentation. Oh and please make it look nice (hint: use the stuff you learned in HTML/CSS)! ### Step 5: **Some freeCodeCamp challenges:** diff --git a/Week8/MAKEME.md b/Week8/MAKEME.md index 4b7a97191..cbd9b2f13 100644 --- a/Week8/MAKEME.md +++ b/Week8/MAKEME.md @@ -100,8 +100,69 @@ data = data.map(function (x) { return x * 8; }); writeDataToFile(data); ``` +### Step 5: SPA :sweat_drops: +You are going to write a SPA (Single Page Application) 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). -### Step 5: Read before next lecture +Just like last week: + +Make a website that fetches (= to get) data asynchronously. + +1) Create a new website with external js file + +2) Add a button (e.g. 'click me') that when clicked `console.logs` 'you clicked me!' + +3) Create a function that fetches from [The Github API](https://developer.github.com/v3/). For example from [this page] (https://api.github.com/orgs/HackYourFuture/repos). For help on this check this [SO post](https://stackoverflow.com/questions/247483/http-get-request-in-javascript) + +4) Display the data that you get from the Github API on your web page. + +5) Now link the two together: When you click the button -> get the data from the Github API and display it on your website + +Cool we are back where we left of. + +6) Take a look at this: + +```js +https://api.github.com/repos/HackYourFuture/CommandLine +``` + +7) Make a function which takes a single argument. The function should make an XHR request to `https://api.github.com/repos/HackYourFuture/[SearchTerm]` 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. + +8) Make all the repositories link their own page in Github. Use the value of the key: `name` to make this work (hint: Github urls always look like this https://api.github.com/repos/HackYourFuture/[repositoryName] where [repositoryName] would be replaced by the actual `name` of the repository, for example `CommandLine`). Make sure the link opens in a new tab. + +- Make sure you handle user input well. That means you need to think about empty input, and input that doesn't yield any results. + +So Github has this really nice documentation :octocat: : +Check these out for example +https://developer.github.com/v3/repos/collaborators/ +https://developer.github.com/v3/repos/commits/ + +9) Extend your page with an input element. This is so the user will be able to type in text. + +10) For each repository, show (in the right column) who the contributers are. You will need to use the `contributors_url` for this. + +!Important +- Do not duplicate code! This is especially important for making requests since we are making multiple ones with different urls and we want to do different actions based on the call we are making. Here are some handles to get you started: + - So write a function called `makeRequest` which accepts (at least) the following parameters: `url` and `callback`. + - Make sure your `callback` is called when the request errors or when it sends a response (look at the documentation) + - Your `callback` functions should accept two parameters so it can handle both errors: `err` and `response`. + So based on your users actions (input, hovering, clicking) you want to call `makeRequest` with a different `url` and supply it with a function that handles both errors (display an error message to the user for example) and responses (render it correctly, as described below). + - Make your functions small and reusable (modular)! That means create separate functions to handle certain steps. + +11) GO WILD + +Again, check out the Github API documentation to see what kind of magic stuff you can do with it. + +The assignment is to implement something extra that is not in the assignment :scream: (nice and vague right?) + +So for example, we have teams in our organization. You can find out who are in there and make a call to 'https://api.github.com/users/' + userInput (where userInput is a string typed into a search field by a user). You can show the users name, avatar image (not the link to the image!) and the number of public repos they have. Or you could make an API call to 'https://api.github.com/users/user/repos' to find out the public repo's they have. Or you can show how many people starred a specific repository. + +Anyway, endless fun and possibilities. Need inspiration, check out the Github API documentation. Oh and please make it look nice (hint: use the stuff you learned in HTML/CSS)! + +_BONUS_ : Code Kata Race + +- [Codewars](https://www.codewars.com/collections/hyf-homework-number-2) + +### Step 6: Read before next lecture _Deadline Sunday morning_ diff --git a/Week9/MAKEME.md b/Week9/MAKEME.md index 75ba4da39..e1aca58b6 100644 --- a/Week9/MAKEME.md +++ b/Week9/MAKEME.md @@ -6,7 +6,14 @@ Topics discussed this week: • Promises ``` -## Step 0: Read +## Step 1: Read +- 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/) + +## Step 2: Feedback + +- Create at least 2 issues (bug / feature / code improvement) on another teams github repository. Do this in pairs. +- Solve the issue proposed by another students in your github repo. More info [here](https://hackyourfuture.slack.com/files/michahell/F31BX1XT6/Merging_a_local_branch_into_master) ## Step 3: Pair programming promises challenge @@ -19,31 +26,10 @@ So please: - Follow the instructions in the REAME of the above repository - To hand in your homework you make a PR to the existing repository -_BONUS_ : Code Kata Race - -- [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/) - -## Step 2: Feedback - -- Create at least 2 issues (bug / feature / code improvement) on another teams github repository. Do this in pairs. -- Solve the issue proposed by another students in your github repo. More info [here](https://hackyourfuture.slack.com/files/michahell/F31BX1XT6/Merging_a_local_branch_into_master) - -### Step 3: Read before next lecture +### Step 4: Read before next lecture _Deadline Sunday morning_ Go trough the reading material in the [README.md](/Week9/README.md) to prepare for your next class - - - - ->Upload your homework in your "hyf-javascript3" Github repository. Make sure to create a new folder "week3" first. -Upload your homework files inside the week3 folder and write a description for this “commit”. -Your hyf-javascript3/week3 should now contain all your homework files. -Place the link to your repository folder in Trello. \ No newline at end of file +>To hand in your homework, make a pull request to the original repository you forked from. Remember, our master branches are protected, you cannot push to a directly cloned repository you first have to make a fork to your own Github. \ No newline at end of file From efdb5d91078002a9d770400c69a1a5f436b7ff3b Mon Sep 17 00:00:00 2001 From: mkruijt Date: Wed, 29 Nov 2017 14:14:04 +0100 Subject: [PATCH 2/7] added rover --- Week5/MAKEME.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/Week5/MAKEME.md b/Week5/MAKEME.md index 679fe1e17..5c3ab5422 100644 --- a/Week5/MAKEME.md +++ b/Week5/MAKEME.md @@ -98,7 +98,11 @@ let tasks = monday.concat(tuesday); - Output a formatted Euro amount. - Don't forget to use `=>` -### Step 3: **Some freeCodeCamp challenges:** +## Step 3: ROVER + +Finish up to chapter 7: JSON on [roverjs.com](http://roverjs.com/)! + +### Step 4: **Some freeCodeCamp challenges:** _Deadline Saturday_ From 2f02c63c7858975c5ef0d944082bde8163e46237 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Mon, 4 Dec 2017 14:49:24 +0100 Subject: [PATCH 3/7] added instructions git feedback --- Week6/MAKEME.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md index a8b4620cb..ee456cd60 100644 --- a/Week6/MAKEME.md +++ b/Week6/MAKEME.md @@ -10,15 +10,16 @@ Topics discussed this week: >[Here](/Week6/README.md) you find the readings you have to complete before the seventh lecture. -### Step 1: Feedback +## Step 1: Git Homework -_Deadline Monday_ +[Go through the Git repository](https://github.com/HackYourFuture/Git/blob/master/Lecture-3.md). For handing in homework and follow the Forking workflow that is described in our lecture-3.md file of HackYourFuture’s Git repository (there is also a video that explains this). -Give feedback on `step 3` of `week 5` to one of your fellow students (do this by creating issues in Github). +### Step 2: Feedback -## Step 2: Git Homework +_Deadline Monday_ -[Make these assignments](https://github.com/HackYourFuture/Git/blob/master/Lecture-3.md). For handing in homework follow the Forking workflow that is described in our lecture-3.md file of HackYourFuture’s Git repository (there is also a video that explains this). +Give feedback on `step 2` of `week 5` to one of your fellow students (do this by creating a pull request suggesting changes/improvements in Github). +Read through the git repository linked above to see a recap of what was covered in class this week ### Step 3: JavaScript From 06a15b17049f737e0200cad53f47ec77c4b3df0a Mon Sep 17 00:00:00 2001 From: mkruijt Date: Tue, 5 Dec 2017 12:58:11 +0100 Subject: [PATCH 4/7] fixed numbering week6 --- Week6/MAKEME.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md index ee456cd60..32f8bc1bf 100644 --- a/Week6/MAKEME.md +++ b/Week6/MAKEME.md @@ -63,11 +63,11 @@ _Deadline Wednesday_ ``` -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 +2\.1 A for loop. +2\.2 A while loop. +2\.3 A do loop. 3. Some practice with objects https://www.freecodecamp.com/challenges/construct-javascript-objects-with-functions From d2f1bbd8f0ae1802ab83084de64ada9207ff9901 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Tue, 5 Dec 2017 12:59:22 +0100 Subject: [PATCH 5/7] fixed number week6 --- Week6/MAKEME.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md index 32f8bc1bf..ea4257ed1 100644 --- a/Week6/MAKEME.md +++ b/Week6/MAKEME.md @@ -26,7 +26,7 @@ Read through the git repository linked above to see a recap of what was covered _Deadline Wednesday_ -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: ```js function doIt() { @@ -69,19 +69,19 @@ https://www.freecodecamp.com/challenges/repeat-a-string-repeat-a-string 2\.2 A while loop. 2\.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. ```js var x = 9; From 034e18b8c03ab8b826588e73c668bb40c0000fac Mon Sep 17 00:00:00 2001 From: mkruijt Date: Tue, 5 Dec 2017 13:00:10 +0100 Subject: [PATCH 6/7] homework week6 --- Week6/MAKEME.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md index ea4257ed1..11714c6a2 100644 --- a/Week6/MAKEME.md +++ b/Week6/MAKEME.md @@ -63,8 +63,8 @@ _Deadline Wednesday_ ``` -2\. Please solve this problem using: -https://www.freecodecamp.com/challenges/repeat-a-string-repeat-a-string +2\. Please solve this problem using: +https://www.freecodecamp.com/challenges/repeat-a-string-repeat-a-string 2\.1 A for loop. 2\.2 A while loop. 2\.3 A do loop. From 613b9be8dc39e9909f90e3e96941e3365ec0f629 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Tue, 5 Dec 2017 13:03:59 +0100 Subject: [PATCH 7/7] fixed intentation week6 --- Week6/MAKEME.md | 47 ++++++++++++++++++++++++----------------------- 1 file changed, 24 insertions(+), 23 deletions(-) diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md index 11714c6a2..91866144f 100644 --- a/Week6/MAKEME.md +++ b/Week6/MAKEME.md @@ -28,39 +28,40 @@ _Deadline Wednesday_ 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: - ```js - 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. +```js +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). +The function should generate an array containing values from start value to end value (inclusive). - Then the function should iterate over the array and call the second argument if the array value is divisible by 3 +Then the function should iterate 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 +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 +Both functions should be called if the array value is divisible by both 3 and 5 - ```js - 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); +```js +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 - ``` +// 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: