Topics discussed this week:
• Object Oriented Programming and ES6 Classes
• The this keyword
• call, apply, bind

Deadline Monday

• Fix Requested Changes (if any) on the Pull Request.

1. Make sure that your week2 branch is checked out and clean.

2. Create a new branch for the week 3 homework:

   git checkout -b week3
   

Deadline Thursday

Read the fundamental pages on:

• try...catch
• async/await

The homework for week 3 will build on the work you did in week 2. You will create a new branch based on the week2 branch.

1. Make sure that you committed all changes in the week 2 version of your homework.

2. With the week2 branch checked out, create a new week3 branch:

   git checkout -b week3
   

The assignment consists of two parts.

In the first part you will modify the 'promise' homework in the from week 2 (in the homework folder):

1. Replace XMLHttpRequest with the fetch API.
2. Refactor all .then() and .catch() methods with async/await and try...catch.

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.

Replace XMLHttpRequest in the fetchJSON function with fetch. Because fetch returns a promise out of the box there is no need create a promise yourself with new Promise(...).

fetch does not throw an error for HTTP errors. Review the documentation for response.ok for a clue how detect HTTP errors.

Instructions:

1. Refactor all .then() and .catch() methods with async/await and try...catch.

2. Make sure that your error handling code still works. See the week2 MAKEME on how to force an error response from GitHub.

Deadline Saturday

This final assignment requires you to go the extra mile and get acquainted with Object Oriented Programming and ES6 classes.

Object Oriented Programming 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.

Note that OOP does not play the same, central role in JavaScript as it does in other languages, such as Java, C++ and C#. In JavaScript it is more common to decompose a larger application into JavaScript modules (but which could still contain classes), as you will come across in the Node.js module.

The relevant files for this part of the homework can be found in the homework-classes folder.

1. Copy CSS styling from your non-OOP version of the homework into style.css.
2. Add and adapt code from your non-OOP version of the homework to RepoView.js and ContributorsView.js.
3. Do not change any other files at this point.

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.

Figure 1 below illustrates the interrelationship between the various classes in the application using a UML Class Diagram. This particular one was created with with LucidChart (YouTube tutorial, 10 mins).

Figure 1. A UML Class Diagram showing the interrelationship between the classes in this app.

You can conclude the following from this diagram:

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.

2. There are four View classes that implement the IObservable interface, i.e. they implement the required update() method:

   • HeaderView
   • RepoView
   • ContributorsView
   • ErrorView.

3. The SelectView class calls the fetchData() method from the Model class to request a data fetch.

Read:

• HYF fundamental: ES6 Classes
• More on ES6 classes: ES6 Classes in Depth

1. Modify the fetchJSON static method in Model.js to replace fetch with axios.
2. Add a <script> tag to index.html to load the axios library from a CDN (Content Delivery Network) site.

Please review the material from the HTML/CSS module: Get familiar with Accessible Rich Internet Applications (ARIA).

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.

If necessary, review the instructions how to Hand in homework using GitHub pull request.

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:

npm test

If any errors or warnings are reported by this command you need to fix them before submitting a pull request.

In addition, check for the following:

• Have you removed all commented out code (should never be present in a PR)?
• Do the variable, function and argument names you created follow the Naming Conventions?
• Is your code well-formatted (see Code Formatting)?

If the answer is 'yes' to the preceding questions you are ready to follow these instructions:

1. Push your week3 branch to GitHub:

   git push -u origin week3
   

2. Create a pull request for your week3 branch.

Deadline Sunday morning

Go trough the reading material in the README.md of the Node repository to prepare for your next class.

If you haven't already join our clan: "Hack Your Future" in codewars

Solve the following problems:

• Problem 1
• Problem 2
• Problem 3
• Some more Homework

Hints

• Hint for Q1: split your code into two parts, one part for the case that one of the two strings has an extra letter at the start or the end but is otherwise identical & one part for the case that the strings are the same length but one character is different in one of the strings
• Also for Q1 this function on strings might be useful: JavaScript String slice() method
• Also potentially useful: JavaScript String charAt() Method
• Hint for Q2 Also there are no sample tests, you need to use submit

Remember the person with the most kata points gets a prize from Gijs (and you can do exercises on this website without us assigning them - anything kyu 7 or kyu 8 you can try to do - kyu 6 or lower is probably too hard) -->

-MORE BONUS 💥