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 38a024daa..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.|• [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](/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/MAKEME.md b/Week1/MAKEME.md index eaa5569ec..c0533943b 100644 --- a/Week1/MAKEME.md +++ b/Week1/MAKEME.md @@ -2,168 +2,135 @@ ``` 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): + +- 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. + +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. -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.' +![UI Example](./assets/hyf-github.png) -Also make: +Figure 1. Example User Interface using [Material Design](https://material.io/guidelines/) principles. -1. [Comparisons with the Logical And Operator](https://www.freecodecamp.com/challenges/comparisons-with-the-logical-and-operator) +### Instructions -2. [Record Collection](https://www.freecodecamp.com/challenges/record-collection) +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 off 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. -3. [Iterate over Arrays with map](https://www.freecodecamp.com/challenges/iterate-over-arrays-with-map) +You will need to use XMLHttpRequests against the GitHub API to get the relevant information. The GitHub API documentation is very extensive. An 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. -## Step 5: OOP +#### List of repositories -_Deadline Wednesday_ +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)): -Complete the following code: +``` +https://api.github.com/orgs/HackYourFuture/repos?per_page=100 +``` -```js -class Movie { - constructor(title, director) { - // add your code here - } +GitHub API documentation: [List organization repositories](https://developer.github.com/v3/repos/#list-organization-repositories) - getTitle() { - // 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). - getDirector() { - // add your code here - } +#### Get repository information - addStar(star) { - // add your code here - } +You can get information about a specific repository through this API endpoint: - getStars() { - // add your code here - } +``` +https://api.github.com/repos/HackYourFuture/[repositoryName] +``` - addWriter(writer) { - // add your code here - } +You should replace `[repositoryName]` with the actual name of the repository. - getWriters() { - // add your code here - } +GitHub API documentation: [Get](https://developer.github.com/v3/repos/#get) - addRating(rating) { - // add your code here - } +### Get contributor information - getAverageRating() { - // 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. - // ... Add yours :-) Look to IMDB for inspiration -} +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 ` element + } + + /** + * Fetch information for the selected repository and render the + * information as HTML elements in the DOM + * @param {*} repoName The name of the selected repository + */ + fetchAndRender(repoName) { + const leftDiv = ...; + const rightDiv = ...; + + // ... + + this.fetchJSON(repoUrl + repoName) + .then(repoInfo => { + const repo = new Repository(repoInfo); + return this.fetchJSON(repoInfo.contributors_url) + .then(contributors => { + repo.render(leftDiv); + contributors + .map(contributor => new Contributor(contributor)) + .forEach(contributor => contributor.render(rightDiv)); + }); + }) + .catch(error => { + // add error handling code here + }); + } + + + /** + * Fetch API data as JSON data in a promise + * @param {string} url The URL of the API endpoint. + * @returns A promise. + */ + fetchJSON(url) { + // Add your code here + } + } + + window.onload = new View(); } +``` -4. +Note: -let data = $.getJSON('http://myapi.com'); -data = data.map(function (x) { return x * 8; }); +1. Please remove all redundant, commented-out code and console.log's from your files before pushing your homework as finished. There is no need for your mentors to review this stuff. +2. Please make sure your code is well-formatted and follows the recommended naming conventions. +## Step 6: Read before next lecture -writeDataToFile(data); -``` +_Deadline Sunday morning_ -## Step 5: Read before next lecture +Go trough the reading material in the [README.md](https://github.com/HackYourFuture/Node.js) of the Node repository to prepare for your next class. -_Deadline Sunday morning_ +## _BONUS_ : Code Kata Race + +If you haven't already join our clan: "Hack Your Future" in codewars + +Solve the following problems: +- [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) +- Some more [Homework](https://www.codewars.com/collections/hyf-homework-1) + +_Hints_ +- 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: [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 -Go trough the reading material in the [README.md](https://github.com/HackYourFuture/Node.js) to prepare for your next class +Remember the person with the most kata points gets a prize from Gijs (and you can do exercises on this website without us assigning them - anything kyu 7 or kyu 8 you can try to do - kyu 6 or lower is probably too hard) --> -> 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. +-[MORE BONUS](https://www.codewars.com/collections/hyf-homework-1-bonus-credit) :collision: diff --git a/Week3/README.md b/Week3/README.md index 067df4e0e..ddd2b9a5e 100644 --- a/Week3/README.md +++ b/Week3/README.md @@ -2,39 +2,23 @@ ``` In week three we will discuss the following topics: -• (re)writing data structures (in JSON) -• Async VS Sync -• Code flow (order of execution) +• Object Oriented Programming and ES6 Classes +• The this keyword +• call, apply, bind ``` -### 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 third 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) -``` - -### Here are resources that we like you to read as a preparation for the coming 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!_ +### Fundamentals +- [Object-Oriented Programming & Classes](../../../fundamentals/blob/master/fundamentals/oop_classes.md) +- [What is 'this'?](../../../fundamentals/blob/master/fundamentals/this.md) +### `call` `apply`, `bind` +- [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call) +- [Function.prototype.apply()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply) +- [Function.prototype.bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind) +_Please go through the material and come to class prepared!_ \ No newline at end of file