Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 94bef27

Browse files
remarcmijremarcmij
committed
Prepare for class 23 (WIP)
1 parent 7c3bc54 commit 94bef27

25 files changed

+934
-992
lines changed

‎.eslintrc.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"extends": ["airbnb", "prettier"],
2+
"extends": ["airbnb-base", "prettier"],
33
"plugins": ["prettier"],
44
"env": {
55
"browser": true,

‎.vscode/extensions.json

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"recommendations": [
3+
"CoenraadS.bracket-pair-colorizer",
4+
"dbaeumer.vscode-eslint",
5+
"esbenp.prettier-vscode",
6+
"ritwickdey.LiveServer",
7+
"streetsidesoftware.code-spell-checker",
8+
"techer.open-in-browser"
9+
]
10+
}

‎.vscode/settings.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
"editor.tabSize": 2,
77
"cSpell.words": [
88
"networkidle",
9-
"tabindex"
9+
"tabindex",
10+
"whiteframe"
1011
]
1112
}

‎Week1/MAKEME.md

Lines changed: 20 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -19,14 +19,12 @@ _This homework is more extensive and challenging than previous homework! Please
1919
2020
You are going to write a _Single Page Application_ (SPA) that uses the [GitHub API](https://developer.github.com/guides/getting-started/).
2121

22-
This application should display information about the available [HYF GitHub repositories](https://github.com/hackyourfuture). The functionalities we would like to see in your application are as follows:
22+
This application should display information about the available [HYF GitHub repositories](https://github.com/hackyourfuture). The functionalities we would like to see in your application in the first week are as follows:
2323

24-
- The user should be able to select a repository from a list of available repositories.
25-
- The application should display high-level information about the selected repository and show a list of its contributors.
26-
- When clicking on the name of the selected repository the GitHub page for the corresponding repository should be opened in a new browser tab.
27-
- When clicking on a contributor, the GitHub page for the contributor should be opened in a new browser tab.
24+
- The application should fetch repository information for the HYF GitHub account and display summary information for each repository.
25+
- This list of repositories should be sorted alphabetically by repository name.
2826

29-
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.
27+
Figure 1 below shows an example of what your application could look like.
3028

3129
![UI Example](./assets/hyf-github.png)
3230

@@ -48,11 +46,7 @@ If you open this URL in the browser (_try it!_) you will receive JSON data about
4846

4947
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 that can be used to obtain detail information about certain aspects of the repository.
5048

51-
#### 1.2.2 Get contributor information for a repository
52-
53-
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.
54-
55-
#### 1.2.3 GitHub API documentation
49+
#### 1.2.2 GitHub API documentation
5650

5751
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.
5852

@@ -70,11 +64,11 @@ While you do not need to read this guide in detail, it is recommended that you r
7064

7165
You will be working on the 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.
7266

73-
| Week | Branch | Assignment |
74-
| :--: | ------- | -------------------------------------------------------------------------------------------------------------------------------- |
75-
| 1 | `week1` | - Create a basic application using callbacks to handle network requests. |
76-
| 2 | `week2` | Based on the `week1` branch:<br>- Refactor the callbacks to promises.<br>- Make the UI responsive. |
77-
| 3 | `week3` | Based on the `week2` branch:<br>- Refactor the application to use ES6 Classes and async/await.<br>- Make the app ARIA-compliant. |
67+
| Week | Branch | Assignment |
68+
| :--: | ------- | ---------- |
69+
| 1 | `week1` | - Create a basic application using callbacks to handle network requests. |
70+
| 2 | `week2` | Based on the `week1` branch:<br>- Display details on a single repository and its contributors<br>- Refactor the callbacks to promises. |
71+
| 3 | `week3` | Based on the `week2` branch:<br>- Refactor the application to use `fetch` and `async`/`await`.<br>- Reuse portions of the code to complete a provided Object Oriented (OOP) version of the application that uses ES6 classes. |
7872

7973
<small>Table 1. Homework schedule</small>
8074

@@ -83,17 +77,13 @@ You will be working on the same application during the next three weeks. For eac
8377
1. Fork the JavaScript3 repository (_this repository_) to your own GitHub account.
8478
2. Clone the fork to your laptop.
8579
3. Open the newly created `JavaScript3` folder from the cloned repository in VSCode.
86-
4. Install the following extension in VSCode:
87-
88-
**Prettier - Code formatter**.
89-
90-
5. Open a Terminal window in VSCode and type the following command to install Prettier and ESLint tools as required for the homework:
80+
4. Open a Terminal window in VSCode and type the following command to install Prettier and ESLint tools as required for the homework:
9181

9282
```
9383
npm install
9484
```
9585

96-
6. Create a new branch for the week 1 homework with the following command:
86+
5. Create a new branch for the week 1 homework with the following command:
9787

9888
```
9989
git checkout -b week1
@@ -135,37 +125,23 @@ _**Do not change or delete any files outside of the `homework` folder!**_
135125
| `createAndAppend` | A utility function for easily creating and appending HTML elements. |
136126
| `main` | Contains the start-up code for the application. |
137127

138-
`index.js` also contains a constant with the URL for the HYF repositories as listed in section 2.2.1:
128+
`index.js` also contains a constant with the URL required for fetching information about the HYF repositories:
139129

140130
```js
141131
const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
142132
```
143133

144-
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.
134+
3. Open the `index.html` file in your browser. You will see an unordered list with the names of the HYF repositories.
145135

146-
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).
136+
4. Review the `main()` function in `index.js` and examine how this code fetches the JSON data and calls renders the data as unordered list in the web page.
147137

148138
### 1.6 Week 1 Assignment
149139

150-
The assignment is to produce an application similar to the one illustrated in Figure 1 above.
151-
152-
It should include the following components:
140+
1. The assignment is to produce an application similar to the one illustrated in Figure 1 above.
153141

154-
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.
155-
2. A left-hand column that displays basic information about the selected repository.
156-
3. A right-hand column that displays a list of contributors to the repository.
142+
2. 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. Use the predefined `alert-error` class from `style.css` to style your error.
157143

158-
> In case you run out of time, you can also do the contributors list in week 2.
159-
160-
**Functional Requirements:**
161-
162-
1. The list of repositories in the `select` element should be sorted (case-insensitive) on repository name.
163-
2. At start-up your application should display information about the first repository as displayed in the `select` element.
164-
3. When the user changes the selection, the information in the web page should be refreshed for the newly selected repository.
165-
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.
166-
5. You should be able to click on a contributor to open a new browser tab with the GitHub page for that contributor.
167-
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. Use the predefined `alert-error` class from `style.css` to style your error.
168-
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.
144+
3. 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.
169145

170146
![Error rendering](./assets/hyf-github-error.png)
171147

@@ -183,27 +159,18 @@ It should include the following components:
183159

184160
**Hints:**
185161

186-
- 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:
187-
188-
```html
189-
<select>
190-
<option value="0">alumni</option>
191-
<option value="1">angular</option>
192-
<!-- etc -->
193-
</select>
194-
```
195-
196162
* 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).
197163

198164
* Use CSS media queries and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to make the UI responsive.
199165

200166
* 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`.
201167

168+
202169
### 1.7 Handing in your homework
203170

204171
If necessary, review the instructions how to [Hand in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md) using GitHub pull request.
205172

206-
To test whether your code will be accepted when you submit your homework as a pull request you need to ensure that it does not contain ESLinr errors. Open a terminal window in VSCode and type the following command:
173+
To test whether your code will be accepted when you submit your homework as a pull request you need to ensure that it does not contain ESLint errors. Open a terminal window in VSCode and type the following command:
207174

208175
```
209176
npm test

‎Week1/assets/hyf-github-error.png

0 Bytes
Loading

‎Week1/assets/hyf-github.png

0 Bytes
Loading

‎Week2/MAKEME.md

Lines changed: 51 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,75 @@
11
# Homework Week 2
22

3-
```
4-
Topics discussed this week:
5-
• Async vs Sync
6-
• Event Loop (order of execution)
7-
• Promises
8-
```
3+
The homework for this week build upon to homework of week 1.
94

10-
## Step 1: Read
5+
## Step 1: Implement requested PR changes
116

12-
- Read this article on scopes & closures: [explaining-javascript-scope-and-closures](https://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/)
7+
- Fix Requested Changes (if any) on the Pull Request from week 1.
138

14-
- If you are still not completely clear on promises, here are some additional resources :ring:
9+
## Step 2: Create a new branch
1510

16-
- [Google's post about Promises](https://developers.google.com/web/fundamentals/getting-started/primers/promises)
17-
- [A nice article from David Walsh](https://davidwalsh.name/promises)
18-
- [A real life example](https://github.com/mdn/js-examples/blob/master/promises-test/index.html)
19-
- [stackoverflow](http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript)
20-
- YouTube: [promises](https://www.youtube.com/watch?v=WBupia9oidU)
11+
1. Make sure that your `week1` branch is checked out and clean.
12+
2. Create a new branch for the week 2 homework:
2113

22-
## Step 2: Implement requested PR changes
14+
```
15+
git checkout -b week2
16+
```
2317

24-
- Fix Requested Changes (if any) on the Pull Request.
18+
## Step 3: Enhance the application
2519

26-
## Step 3: Convert callbacks to promises
20+
The assignment is to enhance your application to look similar to the one illustrated in Figure 1 below. Instead of displaying details for _all_ repositories, this version should show information for a single repository and also list its contributors. The actual repository for which details are to be displayed should be selectable with a select box.
2721

28-
**_Deadline Thursday_**
22+
![UI Example](./assets/week2.png)
2923

30-
### 3.1 Preparation
24+
<small>Figure 1. Example User Interface using [Material Design](https://material.io/guidelines/) principles.</small>
3125

32-
The homework for week 2 will build on the work you did in week 1. You will create a new branch based on the `week1` branch.
26+
The web page should include the following components:
3327

34-
1. Make sure that you committed all changes in the week 1 version of your homework.
35-
2. Create a new `week2` branch:
28+
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.
29+
2. A left-hand column that displays basic information about the selected repository.
30+
3. A right-hand column that displays a list of contributors to the repository.
3631

37-
```
38-
git checkout -b week2
39-
```
32+
**Functional Requirements:**
33+
34+
1. The list of repositories in the `select` element should be sorted (case-insensitive) on repository name.
35+
2. At start-up your application should display information about the first repository as displayed in the `select` element.
36+
3. When the user changes the selection, the information in the web page should be refreshed for the newly selected repository.
37+
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.
38+
5. You should be able to click on a contributor to open a new browser tab with the GitHub page for that contributor.
39+
6. 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.
40+
41+
**Code modifications:**
42+
43+
**`index.js`**
44+
45+
- Modify this file as required to meet the functional requirements of the assignment.
46+
- Convert the callbacks to promises.
47+
48+
**`style.css`**
49+
50+
- Add your own styling.
51+
52+
**Hints:**
53+
54+
- 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:
4055

41-
### 3.2 Assignment
56+
```html
57+
<select>
58+
<option value="0">alumni</option>
59+
<option value="1">angular</option>
60+
<!-- etc -->
61+
</select>
62+
```
4263

43-
You will continue to work on the files `index.js` and (possibly) `style.css`.
64+
* 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).
4465

45-
- Complete your GitHub app code from the previous week, if needed, to meet the requirements from that week's assignment.
46-
- Replace all asynchronous callbacks (e.g. as used with `XMLHttpRequest`) by ES6 promises.
47-
- Beautify your app's styling.
48-
- If not yet completed in week 1, make your app responsive (use CSS media queries and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)).
66+
* Use CSS media queries and [Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) to make the UI responsive.
4967

50-
### 3.3 Handing in your homework
68+
### Handing in your homework
5169

5270
If necessary, review the instructions how to [Hand in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md) using GitHub pull request.
5371

54-
To test whether your code will be accepted when you submit your homework as a pull request you need to ensure that it does not contain ESLinr errors. Open a terminal window in VSCode and type the following command:
72+
To test whether your code will be accepted when you submit your homework as a pull request you need to ensure that it does not contain ESLint errors. Open a terminal window in VSCode and type the following command:
5573

5674
```
5775
npm test

‎Week2/assets/week2.png

50.6 KB
Loading

0 commit comments

Comments
 (0)