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
Copy file name to clipboardExpand all lines: Week1/MAKEME.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line number
Diff line number
Diff line change
@@ -68,7 +68,7 @@ Enjoy!
68
68
In the following three weeks you are going to write an application that makes use of the [GitHub API](https://developer.github.com/v3/guides/getting-started/). Each week builds on top of the other, just like a real-world application!
Copy file name to clipboardExpand all lines: Week2/MAKEME.md
+37-43Lines changed: 37 additions & 43 deletions
Original file line number
Diff line number
Diff line change
@@ -53,11 +53,24 @@ Write a function called `checkDoubleDigits` that:
53
53
54
54
**Exercise 3: Gotta catch 'em all**
55
55
56
-
Let's catch all origin 151 Pokemon in our own little web application!
56
+
> Inside of your `homework` folder, create another folder called `pokemon-app`. There, create an `index.html` and `script.js` file
57
57
58
-
> Inside of your `homework` folder, create another folder called `pokemon-app`. This
58
+
Let's catch all original 151 Pokemon in our own little web application! Here's an example of what you'll be building for this exercise:
59
59
60
-
In this exercise you're going to build a
60
+
61
+
62
+
In this exercise you're going to do several things:
63
+
64
+
1. Create and append DOM elements using JavaScript only
65
+
2. Fetch data twice from a public API [PokeAPI](https://pokeapi.co/)
66
+
3. Display the results in the DOM.
67
+
68
+
Here are the requirements:
69
+
70
+
- Create 3 functions: `fetchData`, `addPokemonToDOM` and `main`
71
+
- The `main` function executes the other functions and contains all the variables
72
+
- In the `fetchData` function, make use of `fetch` and its Promise syntax in order to get the data from the public API
73
+
- Execute the `main` function when the window has finished loading
61
74
62
75
## **3. Code along**
63
76
@@ -69,57 +82,38 @@ Enjoy!
69
82
70
83
## **4. PROJECT: Hack Your Repo II**
71
84
72
-
The assignment this week is to enhance your application to look similar to the following:
85
+
> This week we'll continue building on our work from last week. Make sure to navigate to the `hackyourrepo-app` folder and start based on the code you wrote!
73
86
74
-
87
+
This week we'll do a couple of things:
75
88
76
-
As you can see, it looks different from the one from last week. This week we'll be rewriting most of our code to now show information for a single repository and also list its contributors (instead of the details for all repositories). A user should be able to search for all repositories in the account and select the one they want more information on.
89
+
1. We'll remove our HTML elements and remake them using JavaScript only!
90
+
2. We'll replace our placeholder data with real data from the GitHub API
91
+
3. We'll display this data in a separate column of the user interface
77
92
78
-
### Week 2 Assignment
93
+
On the surface, it'll look exactly the same. But functionally, it'll based around JavaScript only!
79
94
80
-
The enhanced application should fulfill the following requirements:
95
+
Here are the requirements:
81
96
82
-
1. The list of repositories in the `select` element should be sorted (case-insensitive) on repository name.
83
-
2. At start-up your application should display information about the first repository as displayed in the `select` element.
84
-
3. When the user changes the selection, the information in the web page should be refreshed for the newly selected repository.
85
-
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.
86
-
5. You should be able to click on a contributor to open a new browser tab with the GitHub page for that contributor.
87
-
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.
88
-
7. The `XMLHttpRequest` in the `fetchJSON` function should be replaced with `fetch`. Hint: Because `fetch` returns a promise out of the box there is no need create a Promise yourself with `new Promise(...)`.
97
+
- Remove the HTML elements you created last week, and only keep the `<script>` tag (you can keep the styling)
98
+
- Recreate all the HTML elements using JavaScript
99
+
- Populate the `<select>` with options. Use the data fetched from the GitHub API, using this URL:
89
100
90
-
**Hints:**
91
-
92
-
- The `index.html` file can be divided into several components:
93
-
94
-
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.
95
-
2. A left-hand column that displays basic information about the selected repository.
96
-
3. A right-hand column that displays a list of contributors to the repository.
- When a user changes the option in the `<select>` tag, listen to that "change" event and make an HTTP Request to the GitHub API to get repository-specific data. Read the documentation to find out which URL you need to use: [GitHub API Documentation](https://developer.github.com/v3/)
106
+
- When the repository-specific has been fetched, populate the right columns: contributors and repository details.
107
+
- If there's an error in the HTTP Request, display the following:
-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:
111
+
-Create a `main` function that will execute all of your functions only when the window has fully loaded
113
112
114
-
```html
115
-
<select>
116
-
<optionvalue="0">alumni</option>
117
-
<optionvalue="1">angular</option>
118
-
<!-- etc -->
119
-
</select>
120
-
```
113
+
The end result should be similar to this in styling, but exactly in functionality:
121
114
122
-
- 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).
Copy file name to clipboardExpand all lines: Week3/MAKEME.md
+47-56Lines changed: 47 additions & 56 deletions
Original file line number
Diff line number
Diff line change
@@ -17,93 +17,84 @@ Let's continue exercising those programming muscles! Go through the following ex
17
17
18
18
## **2. JavaScript exercises**
19
19
20
-
**_No exercises this week_**
20
+
> Inside of your `JavaScript3` fork and inside of the `Week3` folder, create a folder called `homework`. Inside of that folder, create a folder called `js-exercises`. For all the following exercises create a new `.js` file in that folder (3 files in total). Make sure the name of each file reflects its content: for example, the filename for exercise one could be `getName.js`.
21
21
22
-
## **3. Code along**
22
+
**Exercise 1: **
23
23
24
-
In this weeks `code along` you'll be building a website that uses the YouTube API to fetch channel data and videos. You'll be creating a search form to change channels and use [OAuth2](https://www.youtube.com/watch?v=CPbvxxslDTU) to login and logout.
24
+
<!-- This exercise will be about practicing rewriting Promise syntax to async await -->
25
25
26
-
Happy learning!
26
+
In this exercise you'll practice refactoring `Promise` syntax into `async/await` + `try/catch` syntax.
27
27
28
-
-[YouTube API Project with Authentication](https://www.youtube.com/watch?v=r-yxNNO1EI8)
28
+
```js
29
+
// Exercise A
29
30
30
-
## **4. PROJECT: Hack Your Repo III**
31
31
32
-
The final week's assignment consists of two parts.
32
+
// Exercise B
33
+
functiongetData(url) {
34
+
fetch(url)
35
+
.then(response=>response.json)
36
+
.then(json=>console.log(json))
37
+
.catch(error=>console.log(error));
38
+
}
33
39
34
-
In the first part you will update the homework from week 2 (in the `homework` folder). In the second part you will refactor your application to use `ES6 classes`. For this, you need to modify the files in the `homework-classes` folder.
40
+
getData('https://randomfox.ca/floof/');
41
+
```
35
42
36
-
### PART 1: `async/await` & `axios`
43
+
**Exercise 2: **
37
44
38
-
In the first part you'll need to modify some parts of your code with what you've learned about. Implement the following:
45
+
<!-- This exercise will be about practicing creating and using classes -->
39
46
40
-
### OOP and ES6 classes
47
+
**Exercise 3: **
41
48
42
-
In this second part requires you'll work with a codebase that is build in the Object Oriented Programming paradigm (OOP). OOP is a vast topic and in this homework we can only scratch the surface. The approach we have taken here is for you, as aspiring junior developer, to complete an application for which the groundwork has been done by an experienced developer. You may find it difficult to understand the full details of the application, however this is not unlike a real world situation where you will be expected to make relative small modifications to a complex application, without breaking anything.
49
+
<!-- This exercise will be about practicing -->
43
50
44
-
### Getting an overview
51
+
##**3. Code along**
45
52
46
-
The relevant files for this part of the homework can be found in the **homework-classes** folder. In the following table you'll find an outline (with explanations about their role in our application):
53
+
In this weeks `code along` you'll be building a website that uses the YouTube API to fetch channel data and videos. You'll be creating a search form to change channels and use [OAuth2](https://www.youtube.com/watch?v=CPbvxxslDTU) to login and logout.
54
+
55
+
Happy learning!
56
+
57
+
-[YouTube API Project with Authentication](https://www.youtube.com/watch?v=r-yxNNO1EI8)
| App.js | The **App** class is the main container class for the app. |
54
-
| Observable.js | The **Observable** class is a base class implementing functionality of the Observer pattern. |
55
-
| Model.js | The **Model** class is concerned with all data handling (e.g. fetching). Extends the Observable class. |
56
-
| HeaderView.js | The **HeaderView** class renders the header with the select element. |
57
-
| RepoView.js | The **RepoView** class renders the details for the selected repository. |
58
-
| ContributorsView.js | The **ContributorsView** class renders the contributors for the selected repository. |
59
-
| ErrorView.js | The **ErrorView** class renders an error, if present. |
60
-
| Util.js | The **Utility** class provides (static) utility functions. |
61
+
> This week we'll continue building on our work from last week. Make sure to navigate to the `hackyourrepo-app` folder and start based on the code you wrote!
61
62
62
-
Like mentioned in the readings, the point of OOP is to split your application up into "entities". These entities then work together like a team in order to make an application work.
63
+
Our application is looking pretty nice so far! This week we'll do 2 things:
63
64
64
-
The image below illustrates the interrelationship between the various classes in the application using a [UML Class Diagram](https://en.wikipedia.org/wiki/Class_diagram).
We'll first start off with refactoring, so that we have a clean codebase to build upon.
71
73
72
-
1. The **Model** class **extends** (_inherits from_) the **Observable** class. Views (i.e., 'observers') can subscribe to the Model and get notified on data updates.
73
-
2. There are four View classes that implement the **IObservable** interface, i.e. they implement the required `update()` method:
74
+
Like you've learned this week, refactoring is all about writing "clean code": code that is readible and easy to add to.
74
75
75
-
-**HeaderView**
76
-
-**RepoView**
77
-
-**ContributorsView**
78
-
-**ErrorView**.
76
+
When writing the JavaScript code last week, most likely you wrote everything in a single JavaScript file (the `script.js` one). This week we'll create many more files, that we then will all bring together in that `script.js` file to execute. This act is called `modularization`, and you'll practice with this more and more as time goes on.
79
77
80
-
3. The **SelectView** class calls the `fetchData()` method from the **Model** class to request a data fetch.
78
+
Next to that you'll refactor your code using the software design principles you've learned about this week: DRY, KISS and others you might have picked up. How does would look like exactly in your codebase is left up to you.
81
79
82
-
4. There are four View classes that implement the **IObservable** interface, i.e. they implement the required `update()` method:
80
+
Here are the requirements:
83
81
84
-
-**HeaderView**
85
-
-**RepoView**
86
-
-**ContributorsView**
87
-
-**ErrorView**
82
+
- Create a separate `.js` for every function you create
83
+
- Import all top-level functions into the `script.js` file to execute
88
84
89
-
### Week 3 Assignment
85
+
### 4.2 Add a feature: Pagination
90
86
91
-
**PART 1: Modify your existing code base**
87
+
You might have noticed that when a user selects a repository that has many contributors, the page's height becomes bigger and bigger (thus forcing the user to scroll down). Let's change that, by adding pagination!
92
88
93
-
In the `homework` folder, modify the following:
89
+
What is pagination? Take a look at this:
94
90
95
-
1. Refactor all `.then()` and `.catch()` methods with `async`/`await` and `try...catch`.
96
-
2. Make sure that your error handling code still works. See the instructions from week 2's [homework](../Week2/MAKEME.md) on how to force an error response from GitHub.
97
-
3. Modify the `fetchJSON` function to replace **fetch** with **axios**.
98
-
4. Add a `<script>` tag to **index.html** to load the **axios** library from a CDN ([Content Delivery Network](https://www.youtube.com/watch?v=52VSbXBlfdc)) site. Use Google to find the right URL.
**PART 2: Moving to the OOP version of the homework**
93
+
As you can see there are many pages
101
94
102
-
In the `homework-classes` folder, modify the following:
95
+
Here are the requirements:
103
96
104
-
1. Modify the **RepoView.js** and **ContributorsView.js** files, by adding and adapting code from your non-OOP version of the homework to these files.
105
-
2. You should also copy the styling from your non-OOP version.
106
-
3. Make sure everything still works!
97
+
- Each "page" should contain at max 5 contributors. If the repository selected contains more than 5 contributors, it will get split up unto a different page
Copy file name to clipboardExpand all lines: Week3/README.md
+9-7Lines changed: 9 additions & 7 deletions
Original file line number
Diff line number
Diff line change
@@ -317,17 +317,19 @@ Learn more about it here:
317
317
318
318
## 4. Thinking like a programmer III
319
319
320
-
By now you have gained some experience as a programmer. Have you noticed how much you've learned in such a short time? I hope you enjoyed the process, because this will not go away. Another trait of a great programmer is that they will \*always be learning\*\*.
320
+
As our applications grow bigger, they increase in complexity. This can make our programs harder to understand. In order to make things as clear and easy to understand as possible, we need to regularly tidy up our code. In the industry we call this act `refactoring`. The result of this is what we like to call `clean code`.
321
321
322
-
Technology is always evolving and the skills and abilities a programmer has today will likely be outdated in a few years. Will you be able to adapt?
- (Refactoring JavaScript with pipeline style programming)[https://www.youtube.com/watch?v=38q7aSu52NY]
323
324
324
-
In order to become great at learning new things, we need to have the proper mindset: a growth mindset.
325
+
As a great programmer, you always want to be writing clean code. This means: code that's well-organized in small files that you can easily read and understand in order to comprehend what the application is trying to do.
325
326
326
-
-[Growth Mindset vs. Fixed Mindset](https://www.youtube.com/watch?v=KUWn_TJTrnU)
327
+
There are many ways to write clean code. Some of them you might have heard: Don't Repeat Yourself (DRY) or Keep It Simple, Stupid (KISS) are two things to keep in mind. There are many others and you are encouraged to do your own research!
327
328
328
-
Once you have gained confidence in yourself and your learning ability, the next step is to look at the development of effective study skills. The following are some resources that will help you make a start:
329
-
330
-
-[Learning Techniques & Study Tips Playlist](https://www.youtube.com/playlist?list=PLTp9Bu0cTGUwTDYvupbPlnQNvtXBHpF_T)
329
+
Here are already a couple of them to get you started:
330
+
-[Top 5 Programming Principles that any software engineer should follow](https://www.youtube.com/watch?v=d-KbEQM0724)
-[The KISS Principle in Software Development — Everything You Need to Know](https://medium.com/@devisha.singh/the-kiss-principle-in-software-development-everything-you-need-to-know-dd8ea6e46bcd)
0 commit comments