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/README.md
+2-1Lines changed: 2 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -16,6 +16,7 @@ Here are resources that we like you to read as a preparation for the first lectu
16
16
### APIs
17
17
18
18
- Read about APIS: https://www.programmableweb.com/api-university/what-are-apis-and-how-do-they-work
19
+
- Traversy Media (YouTube, 18 mins): [What Is A RESTful API? Explanation of REST & HTTP](https://youtu.be/Q-BpqyOT3a8).
19
20
20
21
### XMLHttpRequests
21
22
@@ -25,7 +26,7 @@ Here are resources that we like you to read as a preparation for the first lectu
25
26
26
27
-[How to write clean code? Lessons learnt from “The Clean Code” — Robert C. Martin](https://medium.com/mindorks/how-to-write-clean-code-lessons-learnt-from-the-clean-code-robert-c-martin-9ffc7aef870c).
27
28
28
-
> Note that this article includes some code examples writte in Java, but the same principles can equally be applied to JavaScript.
29
+
> Note that this article includes some code examples written in Java, but the same principles can equally be applied to JavaScript.
29
30
30
31
-[Clean Code concepts adapted for JavaScript](https://github.com/ryanmcdermott/clean-code-javascript)
Copy file name to clipboardExpand all lines: Week3/MAKEME.md
+19-7Lines changed: 19 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -73,9 +73,9 @@ Replace `XMLHttpRequest` in the `fetchJSON` function with `fetch`. Because `fetc
73
73
74
74
This final assignment requires you to go the extra mile and get acquainted with Object Oriented Programming and ES6 classes.
75
75
76
-
Object Oriented Programming is a vast topic and in this homework we can only scratch the surface. The approach we have taken for this homework is for you, as aspiring junior developer, to complete an application for which the groundwork has been done by an experienced developer. You may have difficulty understanding 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.
76
+
Object Oriented Programming is a vast topic and in this homework we can only scratch the surface. The approach we have taken for this homework 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.
77
77
78
-
> The relevant files can be found in the **homework-classes** folder.
78
+
> The relevant files for this part of the homework can be found in the **homework-classes** folder.
79
79
80
80
| File | Description |
81
81
| -----| ------------ |
@@ -85,14 +85,26 @@ Object Oriented Programming is a vast topic and in this homework we can only scr
85
85
| App.js | The **App** class is the main container class for the app. |
86
86
| Observable.js | The **Observable** class is a base class implementing functionality of the Observer pattern. |
87
87
| Model.js | The **Model** class is concerned with all data handling (e.g. fetching). Extends the Observable class. |
88
-
| HeaderView.js |Renders the header with the select element. |
89
-
| RepoView.js |Renders the details for the selected repository. |
90
-
| ContributorsView.js |Render the contributors for the selected repository. |
91
-
| ErrorView.js |Renders an error, of present. |
92
-
| Util.js |Provides utility functions. |
88
+
| HeaderView.js |The **HeaderView** class renders the header with the select element. |
89
+
| RepoView.js |The **RepoView** class renders the details for the selected repository. |
90
+
| ContributorsView.js |The **ContributorsView** class renders the contributors for the selected repository. |
91
+
| ErrorView.js |The **ErrorView** class renders an error, if present. |
92
+
| Util.js |The **Utility** class provides (static) utility functions. |
93
93
94
94
>For this part of the homework you should modify the **RepoView.js** and **ContributorsView.js** files, by adding and adapting code from your non-OOP version of the homework to these files. You should also copy the styling from your non-OOP version. Other files should not be modified.
95
95
96
+
Figure 1 below illustrates the interrelationship between the various classes in the application using a [UML Class Diagram](https://en.wikipedia.org/wiki/Class_diagram). This particular one was created with with **LucidChart** ([YouTube tutorial](https://youtu.be/UI6lqHOVHic), 10 mins).
Figure 1. A UML Class Diagram showing the interrelationship between the classes in this app.
100
+
101
+
You can read the following from this diagram:
102
+
103
+
1. The **Model** class **extends** (_inherits from_) the **Observable** class.
104
+
2. Zero or more 'observers' (classes implementing the IObserver interface) can subscribe to notifications from the **Observable**.
105
+
3. There are four concrete observer classes that implement the IObservable interface, i.e. they implement the required `update()` method: **HeaderView**, **RepoView**, **ContributorsView** and **ErrorView**.
106
+
4. The **SelectView** class calls the `fetchData()` method from the **Model** class to request a data fetch.
0 commit comments