Skip to content

Commit a7e2459

Browse files
remarcmijremarcmij
committed
Prepare for class 22
1 parent 9bd7d0d commit a7e2459

12 files changed

Lines changed: 41 additions & 49 deletions

File tree

‎Week1/MAKEME.md‎

Lines changed: 6 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,6 @@ Figure 1 below shows an example of what your application could look like. Note t
3232

3333
<small>Figure 1. Example User Interface using [Material Design](https://material.io/guidelines/) principles.</small>
3434

35-
A live version of this application can be found here: http://hyf-github.netlify.com/
36-
3735
### 1.2 The GitHub API
3836

3937
#### 1.2.1 Get a list of HYF repositories
@@ -105,21 +103,12 @@ You will be working on the same application during the next three weeks. For eac
105103

106104
The files that make up the application are located in the `homework` folder. It contains the following files:
107105

108-
| Filename | Description |
109-
| -------------------- | --------------------------------- |
110-
| ~~`App.js`~~ | Not used in week 1 and 2. |
111-
| ~~`Contributor.js`~~ | Not used in week 1 and 2. |
112-
| `hyf.png` | Contains the HackYourFuture logo. |
113-
| `index.html` | The application's HTML file. |
114-
| ~~`index2.html`~~ | Not used in week 1 and 2. |
115-
| `index.js` | A starter JavaScript file. |
116-
| ~~`Repository.js`~~ | Not used in week 1 and 2. |
117-
| `style.css` | A starter CSS file. |
118-
| ~~`Util.js`~~ | Not used in week 1 and 2. |
119-
120-
In week 1, you should only modify `index.js` and `style.css`.
121-
122-
_**Do not modify any other files at this time!**_
106+
| Filename | Description |
107+
| ------------ | --------------------------------- |
108+
| `hyf.png` | Contains the HackYourFuture logo. |
109+
| `index.html` | The application's HTML file. |
110+
| `index.js` | A starter JavaScript file. |
111+
| `style.css` | A starter CSS file. |
123112

124113
Although you should only modify files in the `homework` folder, we recommend that you always open the `JavaScript3` folder rather than directly opening the `homework` folder in VSCode. The `JavaScript3` folder contains the actual git repository and the configuration files required by the installed tools.
125114

‎Week2/MAKEME.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ The homework for week 2 will build on the work you did in week 1. You will creat
4343
You will continue to work on the files `index.js` and (possibly) `style.css`.
4444

4545
- 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.
46+
- Replace all asynchronous callbacks (e.g. as used with `XMLHttpRequest`) by ES6 promises.
4747
- Beautify your app's styling.
4848
- 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/)).
4949

‎Week3/MAKEME.md‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -55,15 +55,17 @@ This week you will work with all JavaScript files in the `src` folder. The assig
5555

5656
This final assignment requires you to go the extra mile and master Object Oriented Programming and ES6 classes.
5757

58+
> The files to be modified are in the **homework-classes** folder.
59+
5860
In this assignment you need to redistribute and adapt the code from `index.js` to the files `App.js`, `Repository.js` and `Contributor.js`. You do not need to modify `Util.js`.
5961

60-
| File | Description |
61-
| ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
62-
| `index2.html` | You should load this HTML file in your browser instead of `index.html` to work with the classes version of your homework. It loads the following JavaScript files through `<script>` tags in the `<body>` element: |
63-
| `App.js` | The `App` class contains the start-up code and manages the overall orchestration of the app. |
64-
| `Repository.js` | The `Repository` class holds code and data for a single repository. |
65-
| `Contributor.js` | The `Contributor` class holds code and data for a single contributor. |
66-
| `Util.js` | The `Util` class contains static helper methods for use in the other classes. |
62+
| File | Description |
63+
| ---------------- | -------------------------------------------------------------------------------------------- |
64+
| `index.html` | The application's HTML file. |
65+
| `App.js` | The `App` class contains the start-up code and manages the overall orchestration of the app. |
66+
| `Repository.js` | The `Repository` class holds code and data for a single repository. |
67+
| `Contributor.js` | The `Contributor` class holds code and data for a single contributor. |
68+
| `Util.js` | The `Util` class contains static helper methods for use in the other classes. |
6769

6870
The `App.js`, `Repository.js` and `Contributor.js` files each contain skeleton code that you can use to migrate portions of your code from `index.js` to.
6971

@@ -82,7 +84,7 @@ For the GitHub application ARIA-compliance means that the Contributors list shou
8284

8385
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.
8486

85-
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:
87+
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:
8688

8789
```
8890
npm test

homework/App.js renamed to homework-classes/App.js

Lines changed: 15 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
class App {
66
constructor(url) {
7+
this.mainContainer = null;
78
this.initialize(url);
89
}
910

@@ -17,8 +18,8 @@ class App {
1718
// 2. Make an initial XMLHttpRequest using Util.fetchJSON() to populate your <select> element
1819

1920
const root = document.getElementById('root');
20-
21-
Util.createAndAppend('h1', root, { text: 'It works!' }); // TODO: replace with your own code
21+
const header = Util.createAndAppend('header', root, { class: 'header' });
22+
this.mainContainer = Util.createAndAppend('div', root, { id: 'container' });
2223

2324
try {
2425
const repos = await Util.fetchJSON(url);
@@ -33,31 +34,28 @@ class App {
3334
* Removes all child elements from a container element
3435
* @param {*} container Container element to clear
3536
*/
36-
static clearContainer(container) {
37-
while (container.firstChild) {
38-
container.removeChild(container.firstChild);
37+
clearContainer() {
38+
while (this.mainContainer.firstChild) {
39+
this.mainContainer.removeChild(this.mainContainer.firstChild);
3940
}
4041
}
4142

4243
/**
4344
* Fetch contributor information for the selected repository and render the
4445
* repo and its contributors as HTML elements in the DOM.
45-
* @param {number} index The array index of the repository.
46+
* @param {object} repo The selected repository object
4647
*/
47-
async fetchContributorsAndRender(index) {
48+
async selectRepository(repo) {
4849
try {
49-
const repo = this.repos[index];
50+
this.clearContainer();
5051
const contributors = await repo.fetchContributors();
5152

52-
const container = document.getElementById('container');
53-
App.clearContainer(container);
54-
55-
const leftDiv = Util.createAndAppend('div', container);
56-
const rightDiv = Util.createAndAppend('div', container);
53+
const repoContainer = Util.createAndAppend('div', this.mainContainer);
54+
const contributorContainer = Util.createAndAppend('div', this.mainContainer);
5755

58-
const contributorList = Util.createAndAppend('ul', rightDiv);
56+
const contributorList = Util.createAndAppend('ul', contributorContainer);
5957

60-
repo.render(leftDiv);
58+
repo.render(repoContainer);
6159

6260
contributors
6361
.map(contributor => new Contributor(contributor))
@@ -68,11 +66,11 @@ class App {
6866
}
6967

7068
/**
71-
* Render an error to the DOM.
69+
* Render an error to the page.
7270
* @param {Error} error An Error object describing the error.
7371
*/
7472
renderError(error) {
75-
console.log(error); // TODO: replace with your own code
73+
console.error(error); // TODO: replace with your own code
7674
}
7775
}
7876

homework/Contributor.js renamed to homework-classes/Contributor.js

File renamed without changes.

homework/Repository.js renamed to homework-classes/Repository.js

File renamed without changes.

homework/Util.js renamed to homework-classes/Util.js

File renamed without changes.

‎homework-classes/hyf.png‎

6.81 KB
Loading

homework/index2.html renamed to homework-classes/index.html

File renamed without changes.

‎homework-classes/style.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.alert-error {
2+
color: red;
3+
}

0 commit comments

Comments
 (0)