You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -18,3 +18,5 @@ We expect you to __always__ come prepared to the class on Sunday.
18
18
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.
19
19
20
20
*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 :)*
21
+
22
+
<arel="license"href="http://creativecommons.org/licenses/by/4.0/"><imgalt="Creative Commons License"style="border-width:0"src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <arel="license"href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
>[Here](/Week3/README.md) you find the readings you have to complete before the ninth lecture.
12
11
13
12
## Step 1: Feedback
14
13
15
-
_Deadline Monday_
16
-
17
-
Please provide feedback in an issue.
18
-
19
-
_Deadline Monday_
14
+
**_Deadline Monday_**
20
15
21
-
## Step 2: FINISH ALL YOUR JAVASCRIPT HOMEWORK
16
+
Please provide feedback on last week's homework from a fellow student as a GitHub issue.
22
17
23
-
_Deadline Saturday_
18
+
## Step 2: Single Page Application :sweat_drops:
24
19
25
-
:point_up:
20
+
**_Deadline Thursday_**
26
21
27
-
## Step 3: SPA :sweat_drops:
22
+
_This homework is more extensive and challenging than previous homework! Please read the instructions below carefully and follow them precisely. Start this homework as soon as you can and allow time for discussion and questions (slack!)._
28
23
29
-
_Deadline Saturday_
24
+
### 2.1 Introduction
30
25
31
-
You are going to write a SPA (Single Page Application) that uses the [GitHub API](https://developer.github.com/guides/getting-started/).
26
+
You are going to write a _Single Page Application_ (SPA) that uses the [GitHub API](https://developer.github.com/guides/getting-started/).
32
27
33
-
This application should display information about the available [HYF repositories](https://github.com/hackyourfuture):
28
+
This application should display information about the available [HYF GitHub repositories](https://github.com/hackyourfuture):
34
29
35
30
- You should be able to select a repository from a list of available repositories.
36
31
- The application should display high-level information about the selected repository and show a list of its contributors.
32
+
- When clicking on the name of the selected repository the GitHub page for the corresponding repository should be opened in a new browser tab.
33
+
- When clicking on a contributor, the GitHub page for the contributor should be opened in a new browser tab.
37
34
38
35
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.
39
36
40
37
41
38
42
-
Figure 1. Example User Interface using [Material Design](https://material.io/guidelines/) principles.
39
+
<small>Figure 1. Example User Interface using [Material Design](https://material.io/guidelines/) principles.</small>
43
40
44
-
### Instructions
41
+
A live version of this application can be found here: http://hyf-github.netlify.com/
45
42
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.
43
+
### 2.2 The GitHub API
51
44
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.
45
+
#### 2.2.1 Get a list of HYF repositories
53
46
54
-
#### List of repositories
55
-
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)):
47
+
You can fetch a list of HYF repositories through this API endpoint ([What is an API Endpoint?](https://teamtreehouse.com/community/what-is-an-api-endpoint)):
GitHub API documentation: [List organization repositories](https://developer.github.com/v3/repos/#list-organization-repositories)
53
+
If you open this URL in the browser (_try it!_) you will receive JSON data about the available HYF repositories. This is the data that you will need to work with in this assignment.
54
+
55
+
<small>Note the query string `?per_page=100` in the above URL. If you don't specify this query string you will only get the first 30 repositories (the default `per_page` is 30). HackYourFuture has more than 30 repositories but less than 100.</small>
56
+
57
+
The returned JSON data contains some basic information about each repository, such as `name`, `full_name`, `description` etc. There are also many properties that contain URLs to obtain detail information about certain aspects of the repository.
58
+
59
+
#### 2.2.2 Get contributor information for a repository
60
+
61
+
The JSON data that is returned from the initial request to get repository information includes a property named `contributors_url`. Use the value of this property to fetch a list of contributors.
62
+
63
+
#### 2.2.3 GitHub API documentation
64
+
65
+
You can find detailed information about the GitHub API by means of the link listed below. However, the documentation is very extensive and not easy to digest. For this homework it is not necessary to study the GitHub API documentation. We provide the link here for completeness.
66
+
67
+
> GitHub API documentation: https://developer.github.com/v3/
68
+
69
+
### 2.3 Preparation
70
+
71
+
You will be working on this same application during the next three weeks. For each week you will need to create a new Git branch, as listed in the Table 1 below.
72
+
73
+
| Week | Branch | Assignment |
74
+
|:----:|--------|------------|
75
+
| 1 |`week1`| Create a basic application using callbacks to handle network requests. |
76
+
| 2 |`week2`| 1. Refactor the callbacks to promises.<br>2. Make the UI responsive.|
77
+
| 3 |`week3`| 1. Refactor the application to use ES6 Classes and async/await.<br>2. Make the app ARIA-compliant. |
78
+
79
+
<small>Table 1. Homework schedule</small>
80
+
81
+
**Instructions**
82
+
83
+
1. Fork the JavaScript3 repository (_this repository_) to your own GitHub account.
84
+
2. Clone the fork to your laptop.
85
+
3. Open the `homework` folder inside the cloned repository in VSCode.
86
+
4. Create a new branch for the week 1 homework with the following command:
87
+
88
+
```
89
+
git checkout -b week1
90
+
```
91
+
92
+
### 2.4 Code Overview
93
+
94
+
The files that make up the application are located in the `src` folder. It contains the following files:
95
+
96
+
| Filename | Description |
97
+
|------------------|-------------|
98
+
| ~~`App.js`~~ | Not used in week 1 and 2. |
99
+
| ~~`Contributor.js`~~ | Not used in week 1 and 2. |
100
+
| `hyf.png` | Contains the HackYourFuture logo. |
101
+
| `index.html` | The application's HTML file. |
102
+
| `index.js` | A starter JavaScript file. |
103
+
| ~~`Repository.js`~~ | Not used in week 1 and 2. |
104
+
| `style.css` | A starter CSS file. |
105
+
| ~~`Util.js`~~ | Not used in week 1 and 2. |
106
+
107
+
In week 1, you should only modify `index.js` and `style.css`.
108
+
109
+
_**Do not modify any other files at this time!**_
63
110
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).
111
+
#### 2.4.1 A first examination
65
112
66
-
#### Get contributor information
113
+
1. Open `index.html` and examine its contents (but don't modify anything). Notice that the HTML `body` looks like this:
67
114
68
-
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.
115
+
```html
116
+
<body>
117
+
<div id="root"></div>
118
+
<script src="./index.js"></script>
119
+
</body>
120
+
```
69
121
70
-
In the lecture we developed some utility functions to simplify making XMLHttpRequests (function `fetchJSON()`) and creating and manipulating HTML elements (function `createAndAppend()`). You are free to copy and use these utility functions, but if you do we expect that you can explain how they work.
122
+
The `body` tag contains a single `div` to which you will need to dynamically append HTML elements through your JavaScript code in `index.js`.
71
123
72
-
### Refinements
124
+
2. Open `index.js`. This file contains a starter set of code for you to expand. It contains the following three functions:
73
125
74
-
- 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`).
75
-
- Make sure the link opens in a new tab.
126
+
| Function | Description |
127
+
|----------|-------------|
128
+
| `fetchJSON` | Uses `XMLHttpRequest` to fetch JSON data from an API end point. This function uses an asynchronous callback. |
129
+
| `createAndAppend` | A utility function for easily creating and appending HTML elements. |
130
+
| `main` | Contains the start-up code for the application. |
131
+
132
+
`index.js` also contains a constant with the URL for the HYF repositories as listed in section 2.2.1:
- 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:
80
-
- Write a function called `fetchJSON` (or copy from the lecture code) which accepts (at least) the following parameters: `url` and `callback`.
81
-
- Make sure your `callback` is called when the request errors or when it sends a response (look at the documentation)
82
-
- Your `callback` functions should accept two parameters so it can handle both errors: `err` and `response`.
83
-
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).
84
-
- When the user changes the selected repository, any existing repository information in your page should be cleared before displaying the new information.
85
-
- Make your functions small and reusable (modular)! That means create separate functions to handle certain steps.
138
+
3. Open the `index.html` file in your browser. Notice that it produces the same JSON output that you saw previously when you opened the URL directly in the browser.
86
139
87
-
Note:
140
+
4. Review the `main()` function in `index.js` and examine how this code renders the JSON output in the browser by means of a `pre` HTML element (for demonstration purposes).
88
141
89
-
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.
90
-
2. Please make sure your code is well-formatted and follows the recommended naming conventions.
142
+
### 2.5 Week 1 Assignment
91
143
92
-
_GO WILD_
144
+
The assignment is to produce an application similar to the one illustrated in Figure 1 above.
93
145
94
-
Again, check out the GitHub API documentation to see what kind of magic stuff you can do with it.
146
+
It should include the following components:
95
147
96
-
The assignment is to implement something extra that is not in the assignment :scream: (nice and vague, right?)
148
+
1. An HTML `select` element from which the user can select a HYF repository. This `select` element must be populated with `option` elements, one for each HYF repository.
149
+
2. A left-hand column that displays basic information about the selected repository.
150
+
3. A right-hand column that displays a list of contributors to the repository.
97
151
98
-
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)!
152
+
**Functional Requirements:**
99
153
154
+
1. The list of repositories in the `select` element should be sorted (case-insensitive) on repository name.
155
+
2. At start-up your application should display information about the first repository as displayed in the `select` element.
156
+
3. When the user changes the selection, the information in the web page should be refreshed for the newly selected repository.
157
+
4. You should be able to click on the repository name of the selected repository to open a new browser tab with the GitHub page for that repository.
158
+
5. You should be able to click on a contributor to open a new browser tab with the GitHub page for that contributor.
159
+
6. You should render network errors to the DOM (see Figure 2 below for an example). Do not use `console.log` as regular users will not see the console output.
160
+
7. Your UI should be responsive. Try it with Chrome Developer Tools in the browser, using a mobile phone format and a tablet format, portrait and landscape. If necessary, you can also do this work in week 2.
161
+
162
+
163
+
164
+
<small>Figure 2. Rendering of network errors.</small>
165
+
166
+
**Code modifications:**
167
+
168
+
**`index.js`**
169
+
170
+
- Add new functions and modify function `main()` as you see fit. It is not likely that you will need to modify `fetchJSON()` and `createAndAppend()`.
171
+
172
+
**`style.css`**
173
+
174
+
- Add your own styling.
175
+
176
+
**Hints:**
177
+
178
+
- Add one `option` element per repository to the `select` element, where each `option` element has the array index of the repository as its `value` attribute and the name of the repository as its text content:
179
+
180
+
```html
181
+
<select>
182
+
<option value="0">alumni</option>
183
+
<option value="1">angular</option>
184
+
<!-- etc -->
185
+
</select>
186
+
```
187
+
188
+
189
+
- To sort the list repositories use [`.sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) and [`.localeCompare()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare).
190
+
191
+
- Use CSS media queries and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to make the UI responsive.
192
+
193
+
- To force a 404 network error so that you can test the rendering of errors, change the URL to make an invalid GitHub request, e.g. append an `x` to `orgs`: `orgsx`.
0 commit comments