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: Week3/MAKEME.md
+26-24Lines changed: 26 additions & 24 deletions
Original file line number
Diff line number
Diff line change
@@ -79,27 +79,23 @@ Object Oriented Programming is a vast topic and in this homework we can only scr
79
79
80
80
> The relevant files for this part of the homework can be found in the **homework-classes** folder.
81
81
82
-
| File | Description |
83
-
| -----| ------------ |
84
-
| index.html*| The application's HTML file. |
85
-
| style.css*| CSS styling. |
86
-
| hyf.png | The HYF logo. |
87
-
| App.js | The **App** class is the main container class for the app. |
88
-
| Observable.js | The **Observable** class is a base class implementing functionality of the Observer pattern. |
89
-
| Model.js*| The **Model** class is concerned with all data handling (e.g. fetching). Extends the Observable class. |
90
-
| HeaderView.js | The **HeaderView** class renders the header with the select element. |
91
-
| RepoView.js*| The **RepoView** class renders the details for the selected repository. |
92
-
| ContributorsView.js*| The **ContributorsView** class renders the contributors for the selected repository. |
82
+
| File | Description |
83
+
| ------------------- |----------- |
84
+
| index.html| The application's HTML file. |
85
+
| style.css| CSS styling. |
86
+
| hyf.png | The HYF logo. |
87
+
| App.js | The **App** class is the main container class for the app. |
88
+
| Observable.js | The **Observable** class is a base class implementing functionality of the Observer pattern. |
89
+
| Model.js| The **Model** class is concerned with all data handling (e.g. fetching). Extends the Observable class. |
90
+
| HeaderView.js | The **HeaderView** class renders the header with the select element. |
91
+
| RepoView.js| The **RepoView** class renders the details for the selected repository. |
92
+
| ContributorsView.js | The **ContributorsView** class renders the contributors for the selected repository. |
93
93
| ErrorView.js | The **ErrorView** class renders an error, if present. |
94
94
| Util.js | The **Utility** class provides (static) utility functions. |
95
95
96
-
>For this part of the homework you should only modify the files indicated with an asterisk in the table above.
97
-
98
96
1. Copy CSS styling from your non-OOP version of the homework into **style.css**.
99
-
2. Add a `<script>` tag in the `<head>` section of **index.html** to load the **axios** library package.
100
-
3. Modify **Model.js** to use **axios** instead of **fetch** for fetching data.
101
-
4. Add and adapt code from your non-OOP version of the homework to **RepoView.js** and **ContributorsView.js**.
102
-
5. Do not change any other files.
97
+
2. Add and adapt code from your non-OOP version of the homework to **RepoView.js** and **ContributorsView.js**.
98
+
3. Do not change any other files at this point.
103
99
104
100
**index.html**, **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.
105
101
@@ -110,10 +106,15 @@ Figure 1. A UML Class Diagram showing the interrelationship between the classes
110
106
111
107
You can read the following from this diagram:
112
108
113
-
1. The **Model** class **extends** (_inherits from_) the **Observable** class.
114
-
2. Zero or more 'observers' (classes implementing the IObserver interface) can subscribe to notifications from the **Observable**.
115
-
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**.
116
-
4. The **SelectView** class calls the `fetchData()` method from the **Model** class to request a data fetch.
109
+
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.
110
+
111
+
2. There are four View classes that implement the **IObservable** interface, i.e. they implement the required `update()` method:
112
+
-**HeaderView**
113
+
-**RepoView**
114
+
-**ContributorsView**
115
+
-**ErrorView**.
116
+
117
+
3. The **SelectView** class calls the `fetchData()` method from the **Model** class to request a data fetch.
117
118
118
119
_Read:_
119
120
@@ -122,15 +123,16 @@ _Read:_
122
123
123
124
#### 3.2.4 axios
124
125
125
-
Replace `fetch`
126
+
1. Modify the `fetchJSON` static method in **Model.js** to replace **fetch** with **axios**.
127
+
2. Add a `<script>` tag to **index.html** to load the **axios** library from a CDN (Content Delivery Network) site.
126
128
127
-
#### 3.2.4 ARIA-compliance (BONUS)
129
+
#### 3.2.5 ARIA-compliance (BONUS)
128
130
129
131
Please review the material from the HTML/CSS module: [Get familiar with Accessible Rich Internet Applications (ARIA)](https://github.com/HackYourFuture/HTML-CSS/tree/master/Week1#get-familiar-with-accessible-rich-internet-applications-aria).
130
132
131
133
For the GitHub application ARIA-compliance means that the Contributors list should either be a native HTML list (i.e. using `ul` and `li` elements) or otherwise marked with an appropriate ARIA **role**. Furthermore, a user should be able to navigate through all interactive elements using the keyboard (e.g., using the **Tab** key). Pressing **Enter** on such an element should be equivalent to clicking the mouse.
132
134
133
-
#### 3.2.5 Handing in your homework
135
+
#### 3.2.6 Handing in your homework
134
136
135
137
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.
0 commit comments