diff --git a/README.md b/README.md index d9cc83945..0f0f7e9b1 100644 --- a/README.md +++ b/README.md @@ -7,14 +7,14 @@ 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](/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)| +|2.|• [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.|• [try...catch](../../../fundamentals/blob/master/fundamentals/try_catch.md)
• [async/await](../../../fundamentals/blob/master/fundamentals/async_await.md)
• [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:__ We expect you to __always__ come prepared to the class on Sunday. ### Overall -A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](fundamentals/README.md) 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](../../../fundamentals/blob/master/README.md) and research/ ask for help (Slack!) with the concepts that are not entirely clear. *The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it :)* diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md index c0533943b..a1c527078 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -63,39 +63,17 @@ GitHub API documentation: [List organization repositories](https://developer.git 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). -#### Get repository information - -You can get information about a specific repository through this API endpoint: - -``` -https://api.github.com/repos/HackYourFuture/[repositoryName] -``` - -You should replace `[repositoryName]` with the actual name of the repository. - -GitHub API documentation: [Get](https://developer.github.com/v3/repos/#get) - -### Get contributor information +#### Get contributor information 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 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 `` by name (case-insensitive). +- Refactor your app to replace `.then()` and `.catch()` with `async`/`await` and `try...catch`. + +Read: + +- [try...catch](../../../../fundamentals/blob/master/fundamentals/try_catch.md) +- [async/await](../../../../fundamentals/blob/master/fundamentals/async_await.md) + +## Step 5: OOP and ES6 classes - If you need to refresh your memory on es6 classes: [es6-classes-in-depth](https://ponyfoo.com/articles/es6-classes-in-depth) _Deadline Saturday_ -The assignment is to refactor your GitHub app to use OOP with ES6 classes (see skeleton code below). We will be introducing a `Repository` and a `Contributor` class that will each be responsible for rendering their own data. A third `View` class will contain all remaining code. +Refactor your GitHub app to use OOP with ES6 classes (see skeleton code below). We will be introducing a `Repository` and a `Contributor` class that will each be responsible for rendering their own data. A third `View` class will contain all remaining code. + +Read: + +- [Object Oriented Programming and ES6 Classes](../../../../fundamentals/blob/master/fundamentals/oop_classes.md) +- [The `this` keyword](../../../../fundamentals/blob/master/fundamentals/this.md) + +Instructions: 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. @@ -40,42 +58,55 @@ The assignment is to refactor your GitHub app to use OOP with ES6 classes (see s 4. Move your existing code responsible for initializing your application to the `constructor` of the `View` class. 5. The bulk of your remaining code should probably go to the `fetchAndRender()` method of the `View` class. -### Skeleton +### Suggested skeleton -Use this skeleton as overall design for your code in `app.js`: +You could use this skeleton as overall design for your code in `app.js`: ```js '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; + this._data = data; } /** - * Render the repository info into the DOM. - * @param {HTML element} parent The parent element in which to render the repository + * Render the repository info to 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 + // This method should render the repository data stored in the '_data' property // as HTML elements and append them to the `parent` element. } + + /** + * Returns an array of contributors as a promise + */ + fetchContributors() { + // Add your code here + } + + /** + * Returns the name of the repository + */ + name() { + // Add your code here + } } class Contributor { constructor(data) { - this.data = data; + this._data = data; } /** - * Render the contributor info into the DOM. - * @param {HTML element} parent The parent element in which to render the contributor + * Render the contributor info to the DOM. + * @param {HTML element} parent The parent element in which to render the contributor. * info. */ render(parent) { @@ -87,6 +118,13 @@ Use this skeleton as overall design for your code in `app.js`: class View { constructor() { + this.initialize(); + } + + /** + * View initialization + */ + async initialize() { // Add code here to initialize your app // 1. Create the fixed HTML elements of your page // 2. Make an initial XMLHttpRequest to populate your