|
2 | 2 |
|
3 | 3 | ``` |
4 | 4 | Topics discussed this week: |
5 | | -• Object Oriented Programming |
6 | | - • this |
7 | | - • call |
8 | | - • apply |
9 | | - • bind |
10 | | -• Code flow (order of execution) |
| 5 | +• Structure for a basic SPA |
| 6 | +• XMLHttpRequests |
| 7 | +• API calls |
11 | 8 | ``` |
12 | 9 |
|
13 | | ->[Here](/Week2/README.md) you find the readings you have to complete before the eighth lecture. |
14 | 10 |
|
15 | | -## Step 1: Give feedback |
| 11 | +>[Here](/Week3/README.md) you find the readings you have to complete before the ninth lecture. |
16 | 12 |
|
17 | | -_Deadline Monday_ |
| 13 | +## Step 1: Feedback |
18 | 14 |
|
19 | | -Give feedback on Step 4 and 5 of last weeks homework. Please provide the feedback in an issue. |
| 15 | +_Deadline Monday_ |
20 | 16 |
|
21 | | -## Step 2: Issues |
| 17 | +Please provide feedback in an issue. |
22 | 18 |
|
23 | 19 | _Deadline Monday_ |
24 | 20 |
|
25 | | -- Solve all your Git issues. DO NO CLOSE AN ISSUE WITHOUT AN EXPLANATION OR CODE COMMIT REFERENCING THAT ISSUE. |
| 21 | +## Step 2: FINISH ALL YOUR JAVASCRIPT HOMEWORK |
26 | 22 |
|
| 23 | +_Deadline Saturday_ |
27 | 24 |
|
28 | | -## Step 3: Fix issues |
| 25 | +:point_up: |
29 | 26 |
|
30 | | -_Deadline Thursday_ |
| 27 | +## Step 3: SPA :sweat_drops: |
31 | 28 |
|
32 | | -- Fix the issues from the last weeks and make sure you explain how you fixed the issue in a comment (or commit message) |
| 29 | +_Deadline Saturday_ |
33 | 30 |
|
34 | | -## Step 4: Some Challenges |
| 31 | +You are going to write a SPA (Single Page Application) that uses the [GitHub API](https://developer.github.com/guides/getting-started/). |
35 | 32 |
|
36 | | -_Deadline Saturday_ |
| 33 | +This application should display information about the available [HYF repositories](https://github.com/hackyourfuture): |
| 34 | + |
| 35 | +- You should be able to select a repository from a list of available repositories. |
| 36 | +- The application should display high-level information about the selected repository and show a list of its contributors. |
| 37 | + |
| 38 | +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. |
37 | 39 |
|
38 | | -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.' |
| 40 | + |
39 | 41 |
|
40 | | -Also make: |
| 42 | +Figure 1. Example User Interface using [Material Design](https://material.io/guidelines/) principles. |
41 | 43 |
|
42 | | -1. [Comparisons with the Logical And Operator](https://www.freecodecamp.com/challenges/comparisons-with-the-logical-and-operator) |
| 44 | +### Instructions |
43 | 45 |
|
44 | | -2. [Record Collection](https://www.freecodecamp.com/challenges/record-collection) |
| 46 | +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`. |
| 47 | +2. Your `index.html` file should load the `style.css` and `app.js` files, using the appropriate HTML tags. |
| 48 | +3. The `body` of your `index.html` should contain a single `div` element like this: `<div id="root"></div>`. |
| 49 | +4. All other HTML elements should be generated programmatically by your `app.js` file and ultimately be hanging off the root `div` element. |
| 50 | +5. Implement the repository selection list by means of an HTML [\<select\>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select) element. |
45 | 51 |
|
46 | | -3. [Iterate over Arrays with map](https://www.freecodecamp.com/challenges/iterate-over-arrays-with-map) |
| 52 | +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. |
47 | 53 |
|
48 | | -## Step 5: OOP |
| 54 | +#### List of repositories |
49 | 55 |
|
50 | | -_Deadline Wednesday_ |
| 56 | +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)): |
51 | 57 |
|
52 | | -Complete the following code: |
| 58 | +``` |
| 59 | +https://api.github.com/orgs/HackYourFuture/repos?per_page=100 |
| 60 | +``` |
53 | 61 |
|
54 | | -```js |
55 | | -class Movie { |
56 | | - constructor(title, director) { |
57 | | - // add your code here |
58 | | - } |
| 62 | +GitHub API documentation: [List organization repositories](https://developer.github.com/v3/repos/#list-organization-repositories) |
59 | 63 |
|
60 | | - getTitle() { |
61 | | - // add your code here |
62 | | - } |
| 64 | +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). |
63 | 65 |
|
64 | | - getDirector() { |
65 | | - // add your code here |
66 | | - } |
| 66 | +#### Get repository information |
67 | 67 |
|
68 | | - addStar(star) { |
69 | | - // add your code here |
70 | | - } |
| 68 | +You can get information about a specific repository through this API endpoint: |
71 | 69 |
|
72 | | - getStars() { |
73 | | - // add your code here |
74 | | - } |
| 70 | +``` |
| 71 | +https://api.github.com/repos/HackYourFuture/[repositoryName] |
| 72 | +``` |
75 | 73 |
|
76 | | - addWriter(writer) { |
77 | | - // add your code here |
78 | | - } |
| 74 | +You should replace `[repositoryName]` with the actual name of the repository. |
79 | 75 |
|
80 | | - getWriters() { |
81 | | - // add your code here |
82 | | - } |
| 76 | +GitHub API documentation: [Get](https://developer.github.com/v3/repos/#get) |
83 | 77 |
|
84 | | - addRating(rating) { |
85 | | - // add your code here |
86 | | - } |
| 78 | +### Get contributor information |
87 | 79 |
|
88 | | - getAverageRating() { |
89 | | - // add your code here |
90 | | - } |
| 80 | +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. |
91 | 81 |
|
92 | | - // ... Add yours :-) Look to IMDB for inspiration |
93 | | -} |
| 82 | +Note that, as a result of selecting a repository from the `<select>` element, your code must make two XMLHttpRequests, one after the other: |
94 | 83 |
|
95 | | -class StaffMember { |
96 | | - constructor(name, role, dateOfBirth) { |
97 | | - // add your code here |
98 | | - } |
| 84 | +1. A first request to obtain repository information. |
| 85 | +2. A second request using the `contributors_url` obtained from (1) to get a list of contributor information. |
99 | 86 |
|
100 | | - addMovie(movie) { |
101 | | - // add your code here |
102 | | - } |
| 87 | +Both requests must be done asynchronously. |
103 | 88 |
|
104 | | - getName() { |
105 | | - // add your code here |
106 | | - } |
| 89 | +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. |
107 | 90 |
|
108 | | - getRole() { |
109 | | - // add your code here |
110 | | - } |
| 91 | +In the lecture we developed some utility functions to simplify making XMLHttpRequests and creating and manipulating HTML elements. You are free to copy and use these utility functions, but if you do we expect that you can explain how they work. |
111 | 92 |
|
112 | | - getAge() { |
113 | | - // add your code here |
114 | | - } |
115 | | -} |
| 93 | +### Refinements |
116 | 94 |
|
117 | | -// Pick your favorite movie from http://www.imdb.com/ |
| 95 | +- Make all the repositories link to 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`). |
| 96 | +- Make sure the link opens in a new tab. |
118 | 97 |
|
119 | | -const myMovie = new Movie(...); |
120 | 98 |
|
121 | | -const firstActor = new StaffMember(...); |
122 | | -myMovie.addStar(firstActor); |
123 | | -// create and add more staff members |
| 99 | +### Important |
124 | 100 |
|
125 | | -// Make sure that the following actions work. |
126 | | -console.log(myMovie.getStars().map(actor => `${actor.getName()} ${actor.getAge()}`)); |
127 | | -const director = myMovie.getDirector(); |
128 | | -console.log(`Director: ${director.getName()}`); |
129 | | -``` |
| 101 | +- 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: |
| 102 | + - Write a function called `fetchJSON` (or copy from the lecture code) which accepts (at least) the following parameters: `url` and `callback`. |
| 103 | + - Make sure your `callback` is called when the request errors or when it sends a response (look at the documentation) |
| 104 | + - Your `callback` functions should accept two parameters so it can handle both errors: `err` and `response`. |
| 105 | + So when a user selects a repository from the list you want to call `fetchJSON` 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 HTML elements in your page). |
| 106 | +- When the user changes the selected repository, any existing repository information in your page should be cleared before displaying the new information. |
| 107 | +- Make your functions small and reusable (modular)! That means create separate functions to handle certain steps. |
130 | 108 |
|
131 | | -Fun extra step: If you get bored, template them and make a page by rendering the results in HTML :smile: with something like `document.querySelector('.move').innerHTML = ...` |
| 109 | +Note: |
132 | 110 |
|
133 | | -## Step 6: Read before next lecture |
| 111 | +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. |
| 112 | +2. Please make sure your code is well-formatted and follows the recommended naming conventions. |
134 | 113 |
|
135 | | -_Deadline Sunday morning_ |
| 114 | +_GO WILD_ |
136 | 115 |
|
137 | | -Go trough the reading material in the [README.md](/Week2/README.md) to prepare for your next class |
| 116 | +Again, check out the GitHub API documentation to see what kind of magic stuff you can do with it. |
138 | 117 |
|
139 | | -## _BONUS_ : Code Kata Race |
| 118 | +The assignment is to implement something extra that is not in the assignment :scream: (nice and vague, right?) |
140 | 119 |
|
141 | | -If you haven't already join our clan: "Hack Your Future" in codewars |
| 120 | +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)! |
142 | 121 |
|
143 | | -Solve the following problems: |
144 | | -- [Problem 1](https://www.codewars.com/kata/keep-up-the-hoop) |
145 | | -- [Problem 2](https://www.codewars.com/kata/find-the-first-non-consecutive-number) |
146 | | -- [Problem 3](https://www.codewars.com/kata/negation-of-a-value) |
147 | | -- Some more [Homework](https://www.codewars.com/collections/hyf-homework-1) |
148 | 122 |
|
149 | | -_Hints_ |
150 | | -- 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 |
151 | | -- Also for Q1 this function on strings might be useful: [JavaScript String slice() method](https://www.w3schools.com/jsref/jsref_slice_string.asp) |
152 | | -- Also potentially useful: [JavaScript String charAt() Method](https://www.w3schools.com/jsref/jsref_charat.asp) |
153 | | -- [Hint for Q2](https://www.w3schools.com/jsref/jsref_sort.asp) Also there are no sample tests, you need to use submit |
| 123 | +_BONUS_ : Code Kata Race |
154 | 124 |
|
155 | | -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) --> |
| 125 | +- [Codewars](https://www.codewars.com/collections/hyf-homework-number-2) |
156 | 126 |
|
157 | | --[MORE BONUS](https://www.codewars.com/collections/hyf-homework-1-bonus-credit) :collision: |
158 | 127 |
|
159 | | -## To watch before the next lecture: |
| 128 | +## Step 5: Read before next lecture |
160 | 129 |
|
161 | | -(watch in this order) |
| 130 | +_Deadline Sunday morning_ |
162 | 131 |
|
163 | | -1. [Stacks/Queues](https://www.youtube.com/watch?v=wjI1WNcIntg) (5 mins) |
164 | | -2. [JS Event Loops](https://www.youtube.com/watch?v=8aGhZQkoFbQ) (26 mins, watch this one twice or until you understand it) |
| 132 | +Go trough the reading material in the [README.md](/Week2/README.md) to prepare for your next class. |
165 | 133 |
|
166 | | ->Create a new repository "hyf-javascript3". Also create a new folder "week1" inside this repository. |
167 | | -Upload your homework files inside the week1 folder and write a description for this “commit”. |
168 | | -Your hyf-javascript3/week1 should now contain the files of your homework. |
169 | | -Place the link to your repository folder in Trello. |
| 134 | +>Commit and push your homework in your "hyf-javascript3" GitHub repository. |
| 135 | +Make sure that your commit message are meaningful. |
| 136 | +Place the link to your repository folder in Trello. |
0 commit comments