From dc80c4b4e207c8b6b01cd213f5ccb30cf940d8d7 Mon Sep 17 00:00:00 2001 From: Jim Cramer Date: Mon, 19 Mar 2018 15:43:12 +0100 Subject: [PATCH 1/8] swapped weeks and modified homework for week1: GitHub API --- README.md | 6 +- Week1/MAKEME.md | 182 ++++++++++++++---------------------- Week1/README.md | 28 ++---- Week1/assets/hyf-github.png | Bin 0 -> 71234 bytes Week2/MAKEME.md | 108 ++++++++------------- Week2/README.md | 42 +++++++-- Week3/MAKEME.md | 170 ++++++++++++++++++++++++++------- Week3/README.md | 49 ++++------ 8 files changed, 306 insertions(+), 279 deletions(-) create mode 100644 Week1/assets/hyf-github.png diff --git a/README.md b/README.md index 38a024daa..8c17858e5 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,9 @@ Here you can find course content and homework for the JavaScript3 modules |Week|Topic|Read|Homework| |----|-----|----|--------| -|1.|• [Object Oriented Programming and Classes](../../../fundamentals/blob/master/fundamentals/oop_classes.md)
• [The `this` keyword](../../../fundamentals/blob/master/fundamentals/this.md) |[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)| -|2.|• Structure for a basic SPA (Single Page Application)
• [XMLHttpRequests](../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md)
• API calls|[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)| -|3.|• [Promises](../../../fundamentals/blob/master/fundamentals/promises.md)
• (re)writing data structures (in JSON)
• Async vs Sync
• [Event Loop (order of execution)](../../../fundamentals/blob/master/fundamentals/event_loop.md) |[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)| +|1.|• Structure for a basic SPA (Single Page Application)
• [XMLHttpRequests](../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md)
• API calls|[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week2/MAKEME.md)| +|2.|• [Promises](../../../fundamentals/blob/master/fundamentals/promises.md)
• (re)writing data structures (in JSON)
• Async vs Sync
• [Event Loop (order of execution)](../../../fundamentals/blob/master/fundamentals/event_loop.md) |[Reading Week 2](/Week3/README.md)|[Homework Week 2](/Week3/MAKEME.md)| +|3.|• [Object Oriented Programming and Classes](../../../fundamentals/blob/master/fundamentals/oop_classes.md)
• [The `this` keyword](../../../fundamentals/blob/master/fundamentals/this.md) |[Reading Week 3](/Week1/README.md)|[Homework Week 3](/Week1/MAKEME.md)| __Kind note:__ diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index eaa5569ec..eaf6cc5f2 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -1,169 +1,131 @@ -# Homework Week 1 +# Homework Week 2 ``` Topics discussed this week: -• Object Oriented Programming - • this - • call - • apply - • bind -• Code flow (order of execution) +• Structure for a basic SPA +• XMLHttpRequests +• API calls ``` ->[Here](/Week2/README.md) you find the readings you have to complete before the eighth lecture. -## Step 1: Give feedback +>[Here](/Week3/README.md) you find the readings you have to complete before the ninth lecture. -_Deadline Monday_ +## Step 1: Feedback -Give feedback on Step 4 and 5 of last weeks homework. Please provide the feedback in an issue. +_Deadline Monday_ -## Step 2: Issues +Please provide feedback in an issue. _Deadline Monday_ -- Solve all your Git issues. DO NO CLOSE AN ISSUE WITHOUT AN EXPLANATION OR CODE COMMIT REFERENCING THAT ISSUE. +## Step 2: FINISH ALL YOUR JAVASCRIPT HOMEWORK +_Deadline Saturday_ -## Step 3: Fix issues +:point_up: -_Deadline Thursday_ +## Step 3: SPA :sweat_drops: -- Fix the issues from the last weeks and make sure you explain how you fixed the issue in a comment (or commit message) +_Deadline Saturday_ -## Step 4: Some Challenges +You are going to write a SPA (Single Page Application) that uses the [GitHub API](https://developer.github.com/guides/getting-started/). -_Deadline Saturday_ +This application should display information about the available [HYF repositories](https://github.com/hackyourfuture): -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.' +- You should be able to select a repository from a list of available repositories. +- The application should display high-level information about the selected repository and show a list of its contributors. -Also make: +Figure 1 below shows an example of what your application could look like. Note that this is just an example. If you find it boring or unimaginative, please improve on it! On the other hand, a simpler version is OK too, so long as you implement the expected functionality. -1. [Comparisons with the Logical And Operator](https://www.freecodecamp.com/challenges/comparisons-with-the-logical-and-operator) +![UI Example](./assets/hyf-github.png) -2. [Record Collection](https://www.freecodecamp.com/challenges/record-collection) +Figure 1. Example User Interface using [Material Design](https://material.io/guidelines/) principles. -3. [Iterate over Arrays with map](https://www.freecodecamp.com/challenges/iterate-over-arrays-with-map) +### Instructions -## Step 5: OOP +1. Create this application in the `week1` folder of your `hyf-javascript1` repo. Your application should at minimum consist of the files `index.html`, `style.css` and `app.js`. +2. Your `index.html` file should load the `style.css` and `app.js` files, using the appropriate HTML tags. +3. The `body` of your `index.html` should contain a single `div` element like this: `

`. +4. All other HTML elements should be generated programmatically by your `app.js` file and ultimately be hanging of the root `div` element. +5. Implement the repository selection list by means of an HTML [\](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) element. -_Deadline Wednesday_ +You will need to use XMLHttpRequests against the GitHub API to get the relevant information. The GitHub API documentation is very extensive. The overview is given [here](https://developer.github.com/v3/) but we will point you to the relevant sections in the documentation needed for this assignment. -Complete the following code: +#### List of repositories -```js -class Movie { - constructor(title, director) { - // add your code here - } +You can obtain a list of HYF repositories through this API endpoint ([What is an API Endpoint?](https://teamtreehouse.com/community/what-is-an-api-endpoint)): - getTitle() { - // add your code here - } +``` +https://api.github.com/orgs/HackYourFuture/repos?per_page=100 +``` - getDirector() { - // add your code here - } +GitHub API documentation: [List organization repositories](https://developer.github.com/v3/repos/#list-organization-repositories) - addStar(star) { - // add your code here - } +Note the query string `?per_page=100`. If you don't specify this query string you will only get the first 30 repositories (the default `per_page` is 30 and HYF has more than 30 - but less than 100). - getStars() { - // add your code here - } +#### Get repository information - addWriter(writer) { - // add your code here - } +You can get information about a specific repository through this API endpoint: - getWriters() { - // add your code here - } +``` +https://api.github.com/repos/HackYourFuture/[repositoryName] +``` - addRating(rating) { - // add your code here - } +You should replace `[repositoryName]` with the actual name of the repository. - getAverageRating() { - // add your code here - } +GitHub API documentation: [Get](https://developer.github.com/v3/repos/#get) - // ... Add yours :-) Look to IMDB for inspiration -} +### Get contributor information -class StaffMember { - constructor(name, role, dateOfBirth) { - // add your code here - } +The response object that is returned by GitHub from the request to get repository information includes a property with the `contributors_url`. Use the value of this property to make a new request to GitHub to obtain a list of contributors. - addMovie(movie) { - // add your code here - } +Note that, as a result of selecting a repository from the `\` element, your code must make two XMLHttpRequests, one after the other: +Note that, as a result of selecting a repository from the `\` element, your code must make two XMLHttpRequests, one after the other: 1. A first request to obtain repository information. 2. A second request using the `contributors_url` obtained from (1) to get a list of contributor information. From 15e1cb3612e09a52f28df115fe68c48c3418e50f Mon Sep 17 00:00:00 2001 From: Jim Cramer Date: Mon, 19 Mar 2018 15:54:59 +0100 Subject: [PATCH 4/8] removed unnecessary escapes --- Week1/MAKEME.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index bf92603e7..0f230d121 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -79,7 +79,7 @@ GitHub API documentation: [Get](https://developer.github.com/v3/repos/#get) The response object that is returned by GitHub from the request to get repository information includes a property with the `contributors_url`. Use the value of this property to make a new request to GitHub to obtain a list of contributors. -Note that, as a result of selecting a repository from the `\` element, your code must make two XMLHttpRequests, one after the other: +Note that, as a result of selecting a repository from the `` element, yo 1. A first request to obtain repository information. 2. A second request using the `contributors_url` obtained from (1) to get a list of contributor information. -Both request must be done asynchronously. +Both requests must be done asynchronously. Making two XMLHttpRequests in a row, where the second requests depends on the response of the first request is part of the assignment. While it is possible to figure out beforehand what the value of the `contributors_url` will be (by carefully reading the documentation), and subsequently make two independent XMLHttpRequests, this is not what is expected. From 8224b0405ec406d3af81962dbe14ea4617b093c0 Mon Sep 17 00:00:00 2001 From: Jim Cramer Date: Tue, 20 Mar 2018 15:47:41 +0100 Subject: [PATCH 6/8] complete reworked to use GitHub app as basis for all homework --- .vscode/settings.json | 6 ++ README.md | 6 +- Week1/README.md | 10 ++- Week2/MAKEME.md | 68 +++++---------- Week2/README.md | 34 ++------ Week3/MAKEME.md | 198 ++++++++++++++++++++---------------------- Week3/README.md | 21 +++-- 7 files changed, 150 insertions(+), 193 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 000000000..6e2e53564 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,6 @@ +{ + "cSpell.words": [ + "orgs", + "repos" + ] +} \ No newline at end of file diff --git a/README.md b/README.md index 8c17858e5..d9cc83945 100644 --- a/README.md +++ b/README.md @@ -6,9 +6,9 @@ Here you can find course content and homework for the JavaScript3 modules |Week|Topic|Read|Homework| |----|-----|----|--------| -|1.|• Structure for a basic SPA (Single Page Application)
• [XMLHttpRequests](../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md)
• API calls|[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week2/MAKEME.md)| -|2.|• [Promises](../../../fundamentals/blob/master/fundamentals/promises.md)
• (re)writing data structures (in JSON)
• Async vs Sync
• [Event Loop (order of execution)](../../../fundamentals/blob/master/fundamentals/event_loop.md) |[Reading Week 2](/Week3/README.md)|[Homework Week 2](/Week3/MAKEME.md)| -|3.|• [Object Oriented Programming and Classes](../../../fundamentals/blob/master/fundamentals/oop_classes.md)
• [The `this` keyword](../../../fundamentals/blob/master/fundamentals/this.md) |[Reading Week 3](/Week1/README.md)|[Homework Week 3](/Week1/MAKEME.md)| +|1.|• Structure for a basic SPA (Single Page Application)
• [XMLHttpRequests](../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md)
• API calls|[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)| +|2.|• Async vs Sync
• [Event Loop (order of execution)](../../../fundamentals/blob/master/fundamentals/event_loop.md)
• [Promises](../../../fundamentals/blob/master/fundamentals/promises.md)|[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)| +|3.|• [Object Oriented Programming and ES6 Classes](../../../fundamentals/blob/master/fundamentals/oop_classes.md)
• [The `this` keyword](../../../fundamentals/blob/master/fundamentals/this.md)
• call, apply, bind |[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)| __Kind note:__ diff --git a/Week1/README.md b/Week1/README.md index 9e0a28a04..a8a4b7e74 100644 --- a/Week1/README.md +++ b/Week1/README.md @@ -7,12 +7,16 @@ In week one we will discuss the following topics: • API calls ``` +Here are resources that we like you to read as a preparation for the third lecture: -#### APIs +### Fundamentals + +- [XMLHttpRequest](../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md) + +### APIs - Read about APIS: https://www.programmableweb.com/api-university/what-are-apis-and-how-do-they-work -#### XMLHttpRequests +### XMLHttpRequests -- HYF fundamental: [XMLHttpRequest](../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md) - [Making HTTP Requests in JavaScript](https://www.kirupa.com/html5/making_http_requests_js.htm) diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md index 6ef9997b9..d8d9d8d9e 100644 --- a/Week2/MAKEME.md +++ b/Week2/MAKEME.md @@ -1,69 +1,41 @@ -# Homework Week 3 +# Homework Week 2 ``` Topics discussed this week: -• (re)writing data structures (in JSON) -• Async VS Sync -• Code flow (order of execution) +• Async vs Sync +• Event Loop (order of execution) +• Promises ``` ## 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/) +- 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) +- If you are still not completely clear on promises, here are some additional nice resources :ring: -## Step 3: Pair programming promises challenge + - [Googles post about Promises](https://developers.google.com/web/fundamentals/getting-started/primers/promises) + - [A nice article from David Walsh](https://davidwalsh.name/promises) + - [A real life example](https://github.com/mdn/js-examples/blob/master/promises-test/index.html) + - [stackoverflow](http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript) + - YouTube: [promises](https://www.youtube.com/watch?v=WBupia9oidU) -This week you will work in a team! -So please: +## Step 2: Feedback -- (one of your team mates should) Fork this repository: https://github.com/HackYourFuture/PromisessObjectsAndStringRendering -- make sure you are all collaborators on the same repository -- Follow the instructions in the REAME.md of the above repository -- To hand in your homework you make a PR to the existing repository +- Create at least 2 issues (bug / feature / code improvement) on another student's GitHub repository. +- Solve the issue(s) proposed by another students in your GitHub repository. More info [here](https://hackyourfuture.slack.com/files/michahell/F31BX1XT6/Merging_a_local_branch_into_master). -## Step 4: Async challenge +## Step 3: Promises _Deadline Saturday_ -1. Rewrite the code below to Async: - -```js -1. - -let sum = calculateSum(2, 6); -console.log(sum); - -2. - -let results = $.getJSON('http://myapi.com'); -showResults(results); +The assignment for this week is: -3. - -let sum = calculateSum(2, 6); -if (sum > 8) { - console.log('larger than 8'); -} - -4. - -let data = $.getJSON('http://myapi.com'); -data = data.map(function (x) { return x * 8; }); - -writeDataToFile(data); -``` +- Complete your GitHub app code as needed to meet the requirements from the assignment of week 1. +- Replace all asynchronous callbacks (e.g. as used with XMLHttpRequest) by ES6 promises. +- Beautify your app's styling. ## Step 5: Read before next lecture -_Deadline Sunday morning_ - -Go trough the reading material in the [README.md](https://github.com/HackYourFuture/Node.js) to prepare for your next class +Go trough the reading material in the [README.md](/Week3/README.md) to prepare for your next class. -> 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. diff --git a/Week2/README.md b/Week2/README.md index 2541b4bbd..1185ae2f1 100644 --- a/Week2/README.md +++ b/Week2/README.md @@ -1,40 +1,24 @@ -# Reading material for the third lecture: +# Reading material for the second lecture: ``` -In week three we will discuss the following topics: +In week two we will discuss the following topics: • Async vs Sync • Event Loop (order of execution) • Promises ``` -### Here are resources that we like you to read as a preparation for the coming lecture: +Here are resources that we like you to read as a preparation for the second lecture: -#### Async VS Sync -- Read about Asynchronous vs. Synchronous programming: http://www.hongkiat.com/blog/synchronous-asynchronous-javascript/ - -#### Closures and async code -- [Why closures are helpful with async code](http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript) - -_Please go through the material and come to class prepared!_# Reading material for the ninth lecture: - -``` -In week nine we will discuss the following topics: -• (re)writing data structures (in JSON) -• Async VS Sync -• Code flow (order of execution) -``` +### Async VS Sync -### Here are resources that we like you to read as a preparation for the coming lecture: - -#### Async VS Sync +- [Stacks/Queues](https://www.youtube.com/watch?v=wjI1WNcIntg) (5 mins) - Read about Asynchronous vs. Synchronous programming: http://www.hongkiat.com/blog/synchronous-asynchronous-javascript/ - -#### Closures and async code - [Why closures are helpful with async code](http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript) -_Please go through the material and come to class prepared!_ - - +### Fundamentals +- [Event Loop](../../../fundamentals/blob/master/fundamentals/event_loop.md) +- [Promises](../../../fundamentals/blob/master/fundamentals/promises.md) +_Please go through the material and come to class prepared!_ diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md index eaa5569ec..5599fa77b 100644 --- a/Week3/MAKEME.md +++ b/Week3/MAKEME.md @@ -2,16 +2,11 @@ ``` Topics discussed this week: -• Object Oriented Programming - • this - • call - • apply - • bind -• Code flow (order of execution) +• Object Oriented Programming and ES6 Classes +• The this keyword +• call, apply, bind ``` ->[Here](/Week2/README.md) you find the readings you have to complete before the eighth lecture. - ## Step 1: Give feedback _Deadline Monday_ @@ -31,110 +26,119 @@ _Deadline Thursday_ - Fix the issues from the last weeks and make sure you explain how you fixed the issue in a comment (or commit message) -## Step 4: Some Challenges - -_Deadline Saturday_ - -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.' - -Also make: +## Step 4: Refactor GitHub app using OOP and ES6 classes -1. [Comparisons with the Logical And Operator](https://www.freecodecamp.com/challenges/comparisons-with-the-logical-and-operator) +- If you need to refresh your memory on es6 classes: [es6-classes-in-depth](https://ponyfoo.com/articles/es6-classes-in-depth) -2. [Record Collection](https://www.freecodecamp.com/challenges/record-collection) +_Deadline Saturday_ -3. [Iterate over Arrays with map](https://www.freecodecamp.com/challenges/iterate-over-arrays-with-map) +The assignment is to refactor your GitHub to use OOP with ES6 classes (see skeleton code below). We will be introducing a `Repository` and `Contributor` class that will each be responsible for rendering their own data. A third `View` class will contain all remaining code. -## Step 5: OOP +1. You should refactor your code to use three classes, named `Repository`, `Contributor` and `View`. +2. Move your existing code that deals with rendering the repository information to the `render()` method of the `Repository` class. +3. Move your existing code that deals with rendering the information for a single contributor to the `render()` method of the `Contributor` class. +4. Move your existing code responsible for initializing your application to the `constructor` of the `View` class. +5. Your remaining code should probably go to the `fetchAndRender()` method of the `View` class. -_Deadline Wednesday_ +### Skeleton -Complete the following code: +Use this skeleton as overall design for your code in `app.js`: ```js -class Movie { - constructor(title, director) { - // add your code here - } - - getTitle() { - // add your code here - } - - getDirector() { - // add your code here - } - - addStar(star) { - // add your code here - } - - getStars() { - // add your code here - } - - addWriter(writer) { - // add your code here - } - - getWriters() { - // add your code here - } - - addRating(rating) { - // add your code here - } - - getAverageRating() { - // add your code here - } - - // ... Add yours :-) Look to IMDB for inspiration -} - -class StaffMember { - constructor(name, role, dateOfBirth) { - // add your code here +'use strict'; +{ + const hyfUrl = 'https://api.github.com'; + const hyfReposUrl = hyfUrl + '/orgs/HackYourFuture/repos?per_page=100'; + const repoUrl = hyfUrl + '/repos/HackYourFuture/'; + + class Repository { + constructor(data) { + this.data = data; + } + + /** + * Render the repository info into the DOM. + * @param {HTML element} parent The parent element in which to render the repository + * info. + */ + render(parent) { + // Add your code here. + // This method should render the repository data stored in the 'data' property + // as HTML elements and append them to the `parent` element. + } } - addMovie(movie) { - // add your code here + class Contributor { + constructor(data) { + this.data = data; + } + + /** + * Render the contributor info into the DOM. + * @param {HTML element} parent The parent element in which to render the contributor + * info. + */ + render(parent) { + // Add your code here. + // This method should render the contributor data stored in the 'data' property + // as HTML elements and append them to the `parent` element. + } } - getName() { - // add your code here + class View { + constructor() { + // Add code here to initialize your app + // 1. Create the fixed HTML elements of your page + // 2. Make an initial XMLHttpRequest to populate your ` element that contains collection of queries that can be made against the Nobel Prize API. +- It adds an event handler to the `change` event of the `