"jestPuppeteer": true,

"axios": "readonly"

Here you can find course content and homework for the JavaScript3 modules.

|1.|• Structure for a basic SPA (Single Page Application) <br>• AJAX & XMLHttpRequests<br>• API calls|[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)|

|2.|• Event Loop (order of execution)<br>• Promises|[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|

|3.|• fetch, axios<br>• • async/await<br>try...catch<br>• The `this` keyword<br>• call, apply, bind<br>• Object Oriented Programming and ES6 Classes|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|

*The HackYourFuture curriculum is subject to CC BY copyright. This means you can freely use our materials, but just make sure to give us credit for it* :).

- Add your own CSS styling. Use `style.css` for all your styling your HTML. Avoid using JavaScript for styling unless there is a genuine need.

**You are not allowed to use a CSS library such as Bootstrap.**

You will be using these particular DOM manipulation methods and properties in the JS3 homework for the next three weeks:

- `document.getElementById()`

- `element.textContent`

- `document.createElement()`

- `element.setAttribute()`

- `element.appendChild()`

- `change` event (`<select>` element)

- `element.addEventListener()`

Note that throughout the video lectures the presenter uses `var` to declare variables. We prefer that you use `const` and `let` instead in your homework.

In the homework we will be using the GitHub API. Learn about remote Web APIs in general from this YouTube video (18 min) from Traversy Media:

- [What Is A RESTful API? Explanation of REST & HTTP](https://youtu.be/Q-BpqyOT3a8).

For more research, check out the following resources:

- [What are APIs - series](https://www.youtube.com/watch?v=cpRcK4GS068&list=PLcgRuP1JhcBP8Kh0MC53GH_pxqfOhTVLa)

Please watch the first 45 mins of the Ajax Crash Course (up until the PHP examples) by Traversy Media:

- [Ajax Crash Course](https://youtu.be/82hnvUYY6QA)

The example code in this course is using on ES5 syntax. In the **traversy_ajax_crash** folder in this repo you will find updated example code (**ajax1**...**ajax3**) that use the ES6 syntax and styling that we prefer in HYF. Specifically, the following changes have been made:

1. The JavaScript code has been placed in a separate file, loaded with a `<script>` tag from the HTML file.

2. Instead of **var** to declare a variable, **const** and **let** are used.

3. The non-strict equality operator `==` has been replaced with the strict version `===`.

4. Functions are defined before they are used.

5. Anonymous functions use the arrow syntax instead of the **function** keyword. Consequently, the `this` value inside the **XMLHttpRequest** event handlers have been replaced with the `xhr` variable name.

6. The `for...in` loops for iterating through an array have been replace with `for...of`.

Read more about using **XMLHttpRequest**:

- [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). Note that this article includes some code examples written in Java, but the same principles can equally be applied to JavaScript.

- HYF Fundamental - [Handing in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md)

Watch this YouTube video up until the PHP examples (the first 45 mins):

- Traversy Media - [Ajax Crash Course](https://youtu.be/82hnvUYY6QA)

Watch this YouTube video (24 mins) from Traversy Media, introducing **promises** and **async/await**. In this week's lecture and homework we will focus on promises as an elegant replacement for callbacks. Next week we will cover async/await, which provides an alternative syntax for 'consuming' promises.

Read about Asynchronous vs Synchronous:

- [Understanding Synchronous and Asynchronous JavaScript](http://www.hongkiat.com/blog/synchronous-asynchronous-javascript/)

- HYF Fundamental - [The Event Loop](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/event_loop.md)

- [A Simple Guide to ES6 Promises](https://codeburst.io/a-simple-guide-to-es6-promises-d71bacd2e13a)

- HYF Fundamental - [Promises](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/promises.md)

| index.html* | The application's HTML file. |

| style.css* | CSS styling. |

| Model.js* | The **Model** class is concerned with all data handling (e.g. fetching). Extends the Observable class. |

| RepoView.js* | The **RepoView** class renders the details for the selected repository. |

| ContributorsView.js* | The **ContributorsView** class renders the contributors for the selected repository. |

1. Copy CSS styling from your non-OOP version of the homework into **style.css**.

2. Add a `<script>` tag in the `<head>` section of **index.html** to load the **axios** library package.

3. Modify **Model.js** to use **axios** instead of **fetch** for fetching data.

4. Add and adapt code from your non-OOP version of the homework to **RepoView.js** and **ContributorsView.js**.

5. Do not change any other files.

**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.

Replace `fetch`

Watch this YouTube video to learn about **fetch**. You can find the corresponding code examples in the **traversy_fetch_api** folder. Note that we have moved the inline JavaScript code from `index.html` into a separate `app.js` file. To run this code, open the HTML file by right-clicking its name in the VSCode Explorer and select **Open with Live Server** from the context menu.

- https://github.com/axios/axios

Read:

Revisit the video from last week for async/await (skip to 20:00 on the timeline):

- Traversy Media (YouTube, 24 mins) - [Async JS Crash Course - Callbacks, Promises, Async Await](https://youtu.be/PoRJizFvM7s?t=1200)

**async/await** is an alternative syntax for 'consuming' ES6 promises, in place of calling **.then()** method. It was introduced in ES7. To handle errors, instead of calling **.catch()**, you need to wrap the code that uses **await** in a **try/catch** block

Read:

- HYF Fundamental - [async & await](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/async_await.md)

- HYF Fundamental - [try...catch](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/try_catch.md)

Watch Traversy Media's JavaScript OOP Crash Course (YouTube, 40 mins). A link to the video and more details can be found here:

- [JavaScript OOP Crash Course (ES5 & ES6)](./traversy_oop_crash).

For another perspective, (optionally) watch the following YouTube playlist (11 videos, 66 mins). You may want to quickly step through the first three videos, as they repeat material that should already quite familiar to you.

- The Net Ninja - [Object Oriented JavaScript](https://www.youtube.com/playlist?list=PL4cUxeGkcC9i5yvDkJgt60vNVWffpblB7)

Read:

- HYF Fundamental - [Object-Oriented Programming & Classes](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/oop_classes.md)

- HYF Fundamental - [What is 'this'?](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/this.md)

- MDN - [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call)

- MDN - [Function.prototype.apply()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)

- MDN - [Function.prototype.bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)

[Eloquent JavaScript: Chapter 6 - The Secret Life of Objects](http://eloquentjavascript.net/06_object.html). Read up to the section of **Maps**.