From 4d0883dfdc536acf3a984d6d329e993c79a8a458 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Fri, 15 Sep 2017 18:50:02 +0200 Subject: [PATCH 001/330] added review week 3 --- README.md | 2 +- Week3/MAKEME.md | 3 +-- Week3/REVIEW.md | 36 ++++++++++++++++++------------------ 3 files changed, 20 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index edd2c42f0..514b132b9 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,7 @@ Here you can find course content and homework for the JavaScript 1,2 and 3 modul |0.|Preparation for your first JavaScript session|[Pre-reading](https://github.com/HackYourFuture/JavaScript/tree/master/Week0) + [CLI Reading Week 1](https://github.com/HackYourFuture/CommandLine/blob/master/Lecture-1.md)|-| |1.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :heart:
• Intro JavaScript (What is it, where can you use it for)
• Variables [var, let, const]
• Basic Data types [Strings, Numbers, Arrays]
• Operators|[Reading Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/README.md) | [Homework Week 1](https://github.com/HackYourFuture/JavaScript/tree/master/Week1/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md)| |2.|• Advanced data types [Objects]
• Conditions
• Statements vs Expressions
• Loops (for/while)
• Functions
• Naming conventions|[Reading Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/README.md)|[Homework Week 2](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md)| -|3.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :balloon:
• Closures
• Scope
• Array Manipulations
• Basic DOM manipulations [img src, innerHTML]
• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/MAKEME.md)|Review| +|3.|• [CLI](https://github.com/HackYourFuture/CommandLine) session with Unmesh :balloon:
• Closures
• Scope
• Array Manipulations
• Basic DOM manipulations [img src, innerHTML]
• Code commenting|[Reading Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3)|[Homework Week 3](https://github.com/HackYourFuture/JavaScript/tree/master/Week3/MAKEME.md)|[Review](https://github.com/HackYourFuture/JavaScript/blob/master/Week3/REVIEW.md)| |4.|• 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/Week4)|[JS](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/MAKEME.md) + [Git Homework Week 4](https://github.com/HackYourFuture/Git/blob/master/Lecture-1.md)|Review| |5.|• First Git Session with Unmesh :smiling_imp:
• Events
• Callbacks
• XHTTP Requests
• API calls|[Reading Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5)|[Homework Week 5](https://github.com/HackYourFuture/JavaScript/tree/master/Week5/MAKEME.md)|Review| |6.|• Second Git Session :see_no_evil:
• Async VS Sync
• Polling
• Structure for a basic SPA
TEST :boom:|[Reading Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6)|[Homework Week 6](https://github.com/HackYourFuture/JavaScript/tree/master/Week6/MAKEME.md)|Review| diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index 2e9648eff..feaadb77a 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -5,8 +5,7 @@ ## Step 0 review: - Go through the review of [the first week](https://github.com/HackYourFuture/JavaScript/blob/master/Week1/REVIEW.md) (Work in progress, update this week :wrench:) - Go through the review of [the second week](https://github.com/HackYourFuture/JavaScript/blob/master/Week2/REVIEW.md) (work in progress, update this week :nut_and_bolt:) -- Daan will update the review of this week soon, keep an eye on that! - +- Go through the review of [the third week](https://github.com/HackYourFuture/JavaScript/blob/master/Week3/REVIEW.md) ## Step 1: Implement feedback diff --git a/Week3/REVIEW.md b/Week3/REVIEW.md index e8e4c08da..9928424e2 100644 --- a/Week3/REVIEW.md +++ b/Week3/REVIEW.md @@ -36,14 +36,14 @@ Now, when this sentence is written down without *he* being defined in the contex ### Context in programming: A JavaScript example: -``` +```js function myFunction() { const a = 'ravioli' console.log(a) } ``` -``` +```js function myFunction() { console.log(a) } @@ -60,12 +60,12 @@ So in words more applicable to our situation scope means: > code that is within the reach of our code. Consider two completely different JavaScript files -``` +```js // aFile.js const a = 10 ``` -``` +```js // anotherFile.js console.log(a) ``` @@ -109,7 +109,7 @@ The basics. An array can be created multiple ways From scratch: -``` +```js const a = [] // result: [] const b = ['item1', 'item2'] // result: ['item1', 'item2'] const c = new Array() // result: [] @@ -120,14 +120,14 @@ const f = new Array(20, 21) // result: [20, 21] ``` From value (as an example, many ways to create an array from another value): -``` +```js const a = 'hello world' // result: 'hello world' const b = a.split(' ') // result: ['hello', 'world' ] ``` ### Array length Every array has as a 'static' property `length`. Meaning that we can easily get the amount of items in an array. -``` +```js const f = ['hi','there'] console.log(f.length) // 2 ``` @@ -135,7 +135,7 @@ console.log(f.length) // 2 ### Array index We can access array elements through the position of the element in the array. This is called an index. Indices (plural of index) are 0-based, meaning that the first item's index is 0, the second element is 1. -``` +```js const x = ['first', 'second', 'third'] console.log(x[0]) // 'first' @@ -143,7 +143,7 @@ x[3] = 'fourth' ``` Note that arrays can have empty values. This should be avoided usually to prevent unexpected behaviour. -``` +```js x[10] = 'eleventh' console.log(x) // [ 'first', 'second', 'third', 'fourth', <6 empty items>, 'eleventh' ] ``` @@ -170,13 +170,13 @@ These methods are essential. • [`.map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) creates a new array with the results of calling a provided function on every element in the calling array. • [`.filter()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter) creates a new array with all elements that pass the test implemented by the provided function. • [`.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) sorts the elements of an array in place and returns the array -``` + ## Basic DOM manipulations Using JavaScript we can access and manipulate the Document Object Model (DOM). We access the DOM through a global object called `document`. HTML -``` +```html
@@ -184,18 +184,18 @@ HTML A common method to access the DOM is by giving a HTML element an ID, and then using the `document` method `getElementById()` -``` +```js const x = document.getElementById('hello') ``` Now we have stored a *reference* of how that HTML element is accessed through the DOM object. We can use this to manipulate the element. -``` +```js x.innerHTML = 'hello' ``` We can also create elements -``` +```js const a = document.createElement('li') x.appendChild(a) ``` @@ -207,13 +207,13 @@ First the straightforward part: how do we place comments in our code? ### JavaScript Single line comments -``` +```js // Change heading: document.getElementById("myH").innerHTML = "My First Page"; ``` Single line comments at end of the line: -``` +```js var x = 5; // Declare x, give it the value of 5 ``` @@ -222,7 +222,7 @@ Coding **well** in JavaScript: [JSDoc](http://usejsdoc.org/) ### HTML [W3Schools](https://www.w3schools.com/html/html_comments.asp) Comments -``` +```html @@ -232,7 +232,7 @@ your comments here --> ### CSS [MDN on CSS comments](https://developer.mozilla.org/en-US/docs/Web/CSS/Comments) -``` +```css /* Comment */ /* From b95c4cbeb67057611462e538763342198e203bdb Mon Sep 17 00:00:00 2001 From: mkruijt Date: Sat, 16 Sep 2017 15:12:36 +0200 Subject: [PATCH 002/330] updated homework week4 --- Week1/MAKEME.md | 24 +++++++++++++----------- Week2/MAKEME.md | 11 +++++++---- Week3/MAKEME.md | 11 +++++++---- Week3/REVIEW.md | 2 +- Week4/MAKEME.md | 37 ++++++++++++++++++++++++++++++------- Week5/MAKEME.md | 12 +++++++----- Week6/MAKEME.md | 12 +++++++----- 7 files changed, 72 insertions(+), 37 deletions(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index 700fa7ea7..d02722eb4 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -68,17 +68,19 @@ For example: On freeCodeCamp.com please do the [Basic JavaScript](https://www.freecodecamp.com/challenges/learn-how-free-code-camp-works) exercises up and until the __"Shopping List"__ exercise (there are some topics we did not cover but you can do it). ### How to hand in Homework: ->steps: -- Create a Github account -- Create a new repository (name it something like hyf-javascript1) make sure you select the option: initialize with README -- inside this repository create a folder "week1" -- Upload the files you created on your computer inside the week1 folder, write a description for this “commit” -- Open the file in your README to check if this all worked - ->Create a new repository "hyf-javascript1". Also create a new folder "week1" inside this repository. -Upload your homework files inside the week1 folder and write a description for this “commit”. -Your hyf-javascript1/week1 should now contain all your homework files. -Place the link to your repository folder in Trello. +``` +steps: +• Create a Github account +• Create a new repository (name it something like hyf-javascript1) make sure you select the option: initialize with README +• inside this repository create a folder "week1" +• Upload the files you created on your computer inside the week1 folder, write a description for this “commit” +• Open the file in your README to check if this all worked + +• Create a new repository "hyf-javascript1". Also create a new folder "week1" inside this repository. +• Upload your homework files inside the week1 folder and write a description for this “commit”. +• Your hyf-javascript1/week1 should now contain all your homework files. +• Place the link to your repository folder in Trello. +``` ### Hint If you solve the FreeCodeCamp challenges and they are new concepts to you and you would like to take a look at them later on in the program, Copy your answers from FCC in a .js file and upload them to Github in a repository for future reference. In this way you build your own little documentation, if you look back at them first try to understand what it does before you run them. diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index fe58ecea8..efec8f539 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -143,10 +143,13 @@ Please make sure you REALLY understand the exercises below: - https://www.freecodecamp.com/challenges/add-new-properties-to-a-javascript-object - https://www.freecodecamp.com/challenges/delete-properties-from-a-javascript-object ->Upload your homework in your "hyf-javascript1" Github repository. Make sure to create a new folder "week2" first. -Upload your homework files inside the week2 folder and write a description for this “commit”. -Your hyf-javascript1/week2 should now contain all your homework files. -Place the link to your repository folder in Trello. +``` +How to hand in your homework: +• Upload your homework in your "hyf-javascript1" Github repository. Make sure to create a new folder "week2" first. +• Upload your homework files inside the week2 folder and write a description for this “commit”. +• Your hyf-javascript1/week2 should now contain all your homework files. +• Place the link to your repository folder in Trello. +``` :star: Additional resources and review: [here](https://github.com/HackYourFuture/JavaScript/tree/master/Week2/REVIEW.md) (work in progress):star: diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index feaadb77a..2ed148bc1 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -34,10 +34,13 @@ Your Github should contain two repositories called hyf-javascript1 and hyf-comma 7. Download book covers for each book, construct a new Object which has as keys the bookId's again, and as value the path to the image source (e.g. `{"harry_potter_blabla": "./img/harry_potter_blabla.jpg", ...}`). Now loop over these entries (_hint: `Object.keys(objectName)` gives you an array containing the keys_). Then write a function which places an image at the corresponding `li` element. Remember that Objects are not ordered, so you cannot guarantee that the first key is the first `li` element. (_Hint: you could give each `li` item an `id` tag by modifying the function you made before_) ->Upload your homework in your "hyf-javascript1" 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-javascript1/week3 should now contain an index.html, main.css and a script.js file (and the images folder) -Place the link to your repository folder in Trello. +``` +How to hand in your homework: +• Upload your homework in your "hyf-javascript1" 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-javascript1/week3 should now contain an index.html, main.css and a script.js file (and the images folder) +• Place the link to your repository folder in Trello. +``` ## Step 4: **FreeCodeCamp challenges:** diff --git a/Week3/REVIEW.md b/Week3/REVIEW.md index 9928424e2..f47595fc2 100644 --- a/Week3/REVIEW.md +++ b/Week3/REVIEW.md @@ -214,7 +214,7 @@ document.getElementById("myH").innerHTML = "My First Page"; Single line comments at end of the line: ```js -var x = 5; // Declare x, give it the value of 5 +const x = 5; // Declare x, give it the value of 5 ``` Coding **well** in JavaScript: [JSDoc](http://usejsdoc.org/) diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index ffced771c..b12ea8092 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -2,14 +2,33 @@ >[Here](https://github.com/HackYourFuture/JavaScript/tree/master/Week4/README.md) you find the readings you have to complete before the fourth lecture. -## Step 1: Some Challenges: +## Step 0: +Give yourself (or your neighbor) a little tap on the shoulder, you've made it to JS2! :muscle: + +## Step 1: Some 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 -## Step 2: Custom Challenge +## Step 2: 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 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. 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 + +## Step 3: + +Give one of you fellow students in Github feedback about their code of step two, create an issue in their repo, telling them what they did great and what they can improve. + +## Step 4: Almost there... -In the HYF Movies Hands-On, we created the function `sortByImdbRating(movies)` to sort the list of movies by IMDB rating. Replace this function by a generalised version that takes the name of the property (`propName`) to sort on and a number `order` (allowed values 1 or -1, default value = 1) to indicate respectively ascending or descending sort order: +Created a function `sortByImdbRating(movies)` to sort the list of movies by IMDB rating. + +### :boom: Bonus homework :boom: + +Replace this function by a generalised version that takes the name of the property (`propName`) to sort on and a number `order` (allowed values 1 or -1, default value = 1) to indicate respectively ascending or descending sort order: ``` function sortMovies(movies, propName, order) @@ -31,8 +50,12 @@ Notes: 1. Do not bother to make this work for the `Ratings` property which refers to an object rather than a simple value. 2. It is not necessary to convert property values containing dates or numbers formatted with embedded commas to facilitate sorting for this challenge (but you're welcome to try). You can leave the value 'as is'. ->Create a new repository "hyf-javascript2". Also create a new folder "week1" inside this repository. -Upload your homework files inside the week1 folder and write a description for this “commit”. -Your hyf-javascript2/week1 should now contain the files of your homework. -Place the link to your repository folder in Trello. +:octocat: +``` +How to hand in your homework: +• Create a new repository "hyf-javascript2". Also create a new folder "week1" inside this repository. +• Upload your homework files inside the week1 folder and write a description for this “commit”. +• Your hyf-javascript2/week1 should now contain the files of your homework. +• Place the link to your repository folder in Trello. +``` diff --git a/Week5/MAKEME.md b/Week5/MAKEME.md index ee3849339..bceb4a5e7 100644 --- a/Week5/MAKEME.md +++ b/Week5/MAKEME.md @@ -22,7 +22,7 @@ Look at the [documentation of the API](https://github.com/typicode/json-server) and see which other query parameters `json-server` support. Mess around with this to see how changing (or adding) parameters modifies your results. -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 style sheet for this! Also make sure you do not use javascript to construct static elements. This way you can handle the positioning of elements easier. +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 style sheet 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. @@ -111,9 +111,11 @@ console.log(y); ``` If you are confused please run the code and then consult the Google for "javascript pass by value pass by reference" ->Upload your homework in your "hyf-javascript2" Github repository. Make sure to create a new folder "week2" first. -Upload your homework files inside the week2 folder and write a description for this “commit”. -Your hyf-javascript2/week2 should now contain all your homework files. +``` +How to hand in your homework: +• Upload your homework in your "hyf-javascript2" Github repository. Make sure to create a new folder "week2" first. +• Upload your homework files inside the week2 folder and write a description for this “commit”. +• Your hyf-javascript2/week2 should now contain all your homework files. Place the link to your repository folder in Trello. - +``` diff --git a/Week6/MAKEME.md b/Week6/MAKEME.md index 434a75530..b2bbc0db0 100644 --- a/Week6/MAKEME.md +++ b/Week6/MAKEME.md @@ -26,8 +26,10 @@ __Requirements__: 6. Make sure that when a user goes to your app, your github account info is loaded. They can then use the search field to find info about other github accounts. 7. BONUS: Look through the data that Github sends back to you on your first API call and think about what other info would be usefull. Add more functionalities to your app like showing how many people starred a repositories or showing the names of the people followed by the current user. ->Upload your homework in your "hyf-javascript2" 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-javascript2/week3 should now contain an index.html, main.css and a script.js file (and the images folder) -Place the link to your repository folder in Trello. - +``` +How to hand in your homework: +• Upload your homework in your "hyf-javascript2" 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-javascript2/week3 should now contain an index.html, main.css and a script.js file (and the images folder) +• Place the link to your repository folder in Trello. +``` From 4913723b93630d04966dbc4e5a15fce3423b30ec Mon Sep 17 00:00:00 2001 From: Daan Aerts Date: Tue, 19 Sep 2017 14:38:32 +0200 Subject: [PATCH 003/330] Update MAKEME.md --- Week4/MAKEME.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index b12ea8092..8b258e662 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -6,9 +6,7 @@ Give yourself (or your neighbor) a little tap on the shoulder, you've made it to JS2! :muscle: ## Step 1: Some 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 +Let's practise working with Objects and Arrays. Go to FreeCodeCamp and complete all challenges under "Object Oriented and Functional Programming" and the _first four challenges_ under "Basic Algorithm Scripting", up until 'Find the longest word in a string.' ## Step 2: 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 movies with this word in the title. Make sure you get at least 5 results. From 9881c536633b8da8174d5ccfb6c0bd12c6b3dd18 Mon Sep 17 00:00:00 2001 From: mkruijt Date: Tue, 19 Sep 2017 16:39:37 +0200 Subject: [PATCH 004/330] changed json homework --- Week4/MAKEME.md | 24 ++++++++++-------------- Week4/README.md | 2 +- Week5/MAKEME.md | 10 ++++++++-- Week5/README.md | 1 + 4 files changed, 20 insertions(+), 17 deletions(-) diff --git a/Week4/MAKEME.md b/Week4/MAKEME.md index 8b258e662..6f2c335a4 100644 --- a/Week4/MAKEME.md +++ b/Week4/MAKEME.md @@ -6,25 +6,21 @@ Give yourself (or your neighbor) a little tap on the shoulder, you've made it to JS2! :muscle: ## Step 1: Some Challenges -Let's practise working with Objects and Arrays. Go to FreeCodeCamp and complete all challenges under "Object Oriented and Functional Programming" and the _first four challenges_ under "Basic Algorithm Scripting", up until 'Find the longest word in a string.' +Let's practice working with Objects and Arrays. Go to FreeCodeCamp and complete all challenges under "Object Oriented and Functional Programming" and the _first four challenges_ under "Basic Algorithm Scripting", up until 'Find the longest word in a string.' ## Step 2: 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 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. 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 +1. Go to https://api.github.com/orgs/HackYourFuture/repos, you will see a list of the repositories our HYF organization has (yes it's a lot of JSON). +2. You can copy the JSON and put it in a string at the top of your `.js` file. Print the name of the 3rd repository in the array to the console. +3. Make a `