diff --git a/README.md b/README.md
index fa97dad57..8fe3c5dee 100644
--- a/README.md
+++ b/README.md
@@ -1,15 +1,15 @@
> Please help us improve and share your feedback! If you find better tutorials
-or links, please share them by [opening a pull request](https://github.com/HackYourFuture/JavaScript3/pulls).
+or links, please share them by [opening a pull request](https://github.com/FooCoding/JavaScript3/pulls).
-# HackYourFuture JavaScript 3
+# JavaScript 3
Here you can find course content and homework for the JavaScript3 modules
-|Week|Topic|Read|Homework|
-|----|-----|----|--------|
-|1.|• Structure for a basic SPA (Single Page Application) • [XMLHttpRequests](../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md) • API calls|[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)|
-|2.|• [Event Loop (order of execution)](../../../fundamentals/blob/master/fundamentals/event_loop.md) • [Promises](../../../fundamentals/blob/master/fundamentals/promises.md)|[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|
-|3.|• [try...catch](../../../fundamentals/blob/master/fundamentals/try_catch.md) • [async/await](../../../fundamentals/blob/master/fundamentals/async_await.md) • [The `this` keyword](../../../fundamentals/blob/master/fundamentals/this.md) • call, apply, bind • [Object Oriented Programming and ES6 Classes](../../../fundamentals/blob/master/fundamentals/oop_classes.md)|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|
+|Week|Topic|Read|Homework|Lecture notes|
+|----|-----|----|--------|-------------|
+|1.|• [XMLHttpRequests](../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md) • API calls • Structure for a basic SPA (Single Page Application) |[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)|[notes](/Week1/LECTURENOTES.md)
+|2.|• [Event Loop (order of execution)](../../../fundamentals/blob/master/fundamentals/event_loop.md) • [Promises](../../../fundamentals/blob/master/fundamentals/promises.md)|[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|[notes](/Week2/LECTURENOTES.md)
+|3.|• [try...catch](../../../fundamentals/blob/master/fundamentals/try_catch.md) • [async/await](../../../fundamentals/blob/master/fundamentals/async_await.md) • [The `this` keyword](../../../fundamentals/blob/master/fundamentals/this.md) • call, apply, bind • [Object Oriented Programming and ES6 Classes](../../../fundamentals/blob/master/fundamentals/oop_classes.md)|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|[notes](/Week3/LECTURENOTES.md)
__Kind note:__
@@ -18,6 +18,7 @@ We expect you to __always__ come prepared to the class on Sunday.
### Overall
A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](../../../fundamentals/blob/master/README.md) and research/ ask for help (Slack!) with the concepts that are not entirely clear.
-*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 :)*
+---
+Credit goes to [HackYourFuture](https://github.com/HackYourFuture) which this is based upon.
This work is licensed under a Creative Commons Attribution 4.0 International License.
diff --git a/Week1/LECTURENOTES.md b/Week1/LECTURENOTES.md
new file mode 100644
index 000000000..1a1062c0e
--- /dev/null
+++ b/Week1/LECTURENOTES.md
@@ -0,0 +1,29 @@
+## XMLHttpRequests
+- What is an Http request?
+ - Life of a request
+ - https://dev.to/dangolant/things-i-brushed-up-on-this-week-the-http-request-lifecycle-
+ - REST
+ - Verbs
+ - Headers
+ - Status codes
+- Example w/ curl
+- Now how do we send a request with a browser?
+- Websites of the early era required a complete page load upon each request (https://en.wikipedia.org/wiki/Ajax_(programming))
+ - This is inefficient and provides a bad user experience with full reloads on each action. Example: MapQuest in the early days.
+- AJAX
+ - Gmail in 2004 and Google Maps in 2005
+ - A way for browsers to send requests asyncronously! 🎉
+ - In 2006, W3C releated XMLHttpRequest specification
+- XMLHttpRequest
+ - Guide: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
+
+## API calls
+- Open API's without need for auth tokens (https://github.com/public-apis/public-apis/blob/master/README.md). Use one for example.
+- Create new HTML file
+- Create a button that will have an event listener
+- Retrieve data from api with XMLHttpRequest obj
+
+- ...but callbacks? [joke](https://www.reddit.com/r/ProgrammerHumor/comments/che938/asynchronous_javascript/)
+
+
+## Structure for a basic SPA
diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md
index eed3987c8..d3b76a609 100644
--- a/Week1/MAKEME.md
+++ b/Week1/MAKEME.md
@@ -2,9 +2,9 @@
```
Topics discussed this week:
-• Structure for a basic SPA
• XMLHttpRequests
• API calls
+• Structure for a basic SPA
```
## Step 1: Single Page Application :sweat_drops:
@@ -19,7 +19,7 @@ _This homework is more extensive and challenging than previous homework! Please
You are going to write a _Single Page Application_ (SPA) that uses the [GitHub API](https://developer.github.com/guides/getting-started/).
-This application should display information about the available [HYF GitHub repositories](https://github.com/hackyourfuture). The functionalities we would like to see in your application are as follows:
+This application should display information about the available [FooCoding GitHub repositories](https://github.com/foocoding). The functionalities we would like to see in your application are as follows:
- The user should be able to select a repository from a list of available repositories.
- The application should display high-level information about the selected repository and show a list of its contributors.
@@ -32,19 +32,19 @@ Figure 1 below shows an example of what your application could look like. Note t
Figure 1. Example User Interface using [Material Design](https://material.io/guidelines/) principles.
-A live version of this application can be found here: http://hyf-github.netlify.com/
+A live version of this application can be found here: [http://hyf-github.netlify.com/](http://hyf-github.netlify.com/)
### 1.2 The GitHub API
-#### 1.2.1 Get a list of HYF repositories
+#### 1.2.1 Get a list of FooCoding repositories
-You can fetch a list of HYF repositories through this API endpoint ([What is an API Endpoint?](https://teamtreehouse.com/community/what-is-an-api-endpoint)):
+You can fetch a list of FooCoding repositories through this API endpoint ([What is an API Endpoint?](https://teamtreehouse.com/community/what-is-an-api-endpoint)):
```
-https://api.github.com/orgs/HackYourFuture/repos?per_page=100
+https://api.github.com/orgs/foocoding/repos?per_page=100
```
-If you open this URL in the browser (_try it!_) you will receive JSON data about the available HYF repositories. This is the data that you will need to work with in this assignment.
+If you open this URL in the browser (_try it!_) you will receive JSON data about the available FooCoding repositories. This is the data that you will need to work with in this assignment.
Note the query string `?per_page=100` in the above URL. If you don't specify this query string you will only get the first 30 repositories (the default `per_page` is 30). HackYourFuture has more than 30 repositories but less than 100.
@@ -62,7 +62,7 @@ You can find detailed information about the GitHub API by means of the link list
### 1.3 Coding Style
-In this homework we will be introducing a preferred coding style and supporting tools to help you write _"clean code"_. A number of popular [_JavaScript Style Guides_](https://codeburst.io/5-javascript-style-guides-including-airbnb-github-google-88cbc6b2b7aa) have recently emerged of which the one developed by [Airbnb](https://github.com/airbnb/javascript) has been chosen for this homework and is recommended for subsequent use during the HYF curriculum. It is documented here:
+In this homework we will be introducing a preferred coding style and supporting tools to help you write _"clean code"_. A number of popular [_JavaScript Style Guides_](https://codeburst.io/5-javascript-style-guides-including-airbnb-github-google-88cbc6b2b7aa) have recently emerged of which the one developed by [Airbnb](https://github.com/airbnb/javascript) has been chosen for this homework and is recommended for subsequent use during the FooCoding curriculum. It is documented here:
- [Airbnb JavaScript Style Guide](https://github.com/airbnb/javascript)
@@ -146,10 +146,10 @@ _**Do not change or delete any files outside of the `homework` folder!**_
| `createAndAppend` | A utility function for easily creating and appending HTML elements. |
| `main` | Contains the start-up code for the application. |
- `index.js` also contains a constant with the URL for the HYF repositories as listed in section 2.2.1:
+ `index.js` also contains a constant with the URL for the FooCoding repositories as listed in section 2.2.1:
```js
- const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+ const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100';
```
3. Open the `index.html` file in your browser. Notice that it produces the same JSON output that you saw previously when you opened the URL directly in the browser.
@@ -162,7 +162,7 @@ The assignment is to produce an application similar to the one illustrated in Fi
It should include the following components:
-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.
+1. An HTML `select` element from which the user can select a FooCoding repository. This `select` element must be populated with `option` elements, one for each FooCoding repository.
2. A left-hand column that displays basic information about the selected repository.
3. A right-hand column that displays a list of contributors to the repository.
diff --git a/Week1/README.md b/Week1/README.md
index 6756bb92d..3f0e38109 100644
--- a/Week1/README.md
+++ b/Week1/README.md
@@ -2,9 +2,9 @@
```
In week one we will discuss the following topics:
-• Structure for a basic SPA (Single Page Application)
• XMLHttpRequests
• API calls
+• Structure for a basic SPA
```
Here are resources that we like you to read as a preparation for the first lecture:
@@ -31,4 +31,4 @@ Here are resources that we like you to read as a preparation for the first lectu
### Handing in homework using GitHub pull requests
-- [Handing in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md)
+- [Handing in homework](https://github.com/FooCoding/fundamentals/blob/master/fundamentals/homework_pr.md)
diff --git a/Week1/search.html b/Week1/search.html
new file mode 100644
index 000000000..b5d3f1897
--- /dev/null
+++ b/Week1/search.html
@@ -0,0 +1,72 @@
+
+
+
+ Codestin Search App
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Week2/LECTURENOTES.md b/Week2/LECTURENOTES.md
new file mode 100644
index 000000000..74ad5be77
--- /dev/null
+++ b/Week2/LECTURENOTES.md
@@ -0,0 +1,135 @@
+## Event Loop
+_Split class in groups of two or three_
+
+1) How many threads does the browser's Javascript runtime have?
+ - *Bonus*: What is a thread?
+
+2) In what order will the colors output to the console?
+```
+const foo = () => {
+ console.log('pink');
+}
+const bar = () => {
+ console.log('black');
+ foo();
+ console.log('blue');
+}
+bar();
+```
+
+3) What is "the stack"?
+
+4) For each line of code below, how many frames are on the call stack?
+```
+const getDate = () => new Date().toDateString()
+
+const greet = (name, greeting) => {
+ return `${greeting}, ${name}. You arrived on ${getDate()}.`
+}
+
+greet('mike', 'hello')
+```
+
+5) What is it called when the javascript engine (node or browser) exceeds the amount of frames it can handle on the stack?
+
+6) What is the order of the colors output to the console?
+```
+const foo = () => {
+ console.log('pink');
+}
+const bar = () => {
+ console.log('black');
+ setTimeout(foo, 0);
+ console.log('blue');
+}
+bar();
+```
+
+7) What keeps track of these asynchronous webAPI's?
+ - setTimeout
+ - addEventListener()
+ - fetch()
+
+ a) call stack
+ b) callback que
+ c) event loop
+ d) browser
+ e) Javascript runtime
+
+8) What is the name of the type of function (called someFunc in the example) that gets called after an asynchronous event?
+```
+document.querySelector('button').addEventListener('click', someFunc);
+```
+
+9) A function you've never seen before... What would you guess this function does? Is it synchronous or asynchronous?
+```
+request('http://www.pokemonapi.dev/info/squirtle', function(error, response, body) {
+ console.log(body);
+ console.log('Done!');
+});
+```
+
+10) In Javascript land, what does it mean for code to be "blocking"?
+
+11) Which function, when executed, will not block the UI?
+```
+const countToOneBillionv1 = () => {
+ for (let i = 0; i < 10; i++) {
+ longRunningOperation(i)
+ }
+}
+
+const countToOneBillionv2 = () => {
+ for (let i = 0; i < 10; i++) {
+ setTimeout(() => longRunningOperation(i), 0)
+ }
+}
+```
+
+12) What is the order of the colors output to the console?
+```
+fetch('http://pokemon.dev/api/id/squirtle')
+ .then(result => {
+ console.log('blue')
+ return fetch('http://pokemon.dev/api/id/charmander')
+ })
+ .then(result => {
+ console.log('red')
+ })
+
+console.log('green')
+```
+
+13) What is the order of the colors output to the console?
+```
+const foo = async () => {
+ console.log('green')
+ const result = await fetch('http://pokemon.dev/api/id/squirtle')
+ console.log('blue')
+ const result = await fetch('http://pokemon.dev/api/id/charmander')
+ console.log('red')
+}
+foo();
+```
+
+14) What is the order of the colors output to the console?
+```
+const myArray = ['red', 'blue', 'green'];
+myArray.forEach(function(item) {
+ console.log(item);
+});
+
+setTimeout(function() {
+ console.log('orange');
+}, 50);
+
+for (let i=0; i < myArray.length; i++) {
+ console.log(myArray[i]);
+ if (i === (myArray.length - 1)) {
+ setTimeout(function() {
+ console.log('black');
+ }, 0);
+ }
+}
+
+```
diff --git a/Week2/README.md b/Week2/README.md
index e55018f74..aebcad4e2 100644
--- a/Week2/README.md
+++ b/Week2/README.md
@@ -15,10 +15,9 @@ Here are resources that we like you to read as a preparation for the second lect
- Read about Asynchronous vs. Synchronous programming: http://www.hongkiat.com/blog/synchronous-asynchronous-javascript/
- [Why closures are helpful with async code](http://stackoverflow.com/questions/13343340/calling-an-asynchronous-function-within-a-for-loop-in-javascript)
-### Fundamentals
-
-- [Event Loop](../../../../fundamentals/blob/master/fundamentals/event_loop.md)
-- [Promises](../../../../fundamentals/blob/master/fundamentals/promises.md)
+_Please go through the material and come to class prepared!_
+### Fundamentals
-_Please go through the material and come to class prepared!_
+- [Event Loop](https://github.com/foocoding/fundamentals/blob/master/fundamentals/event_loop.md)
+- [Promises](https://github.com/foocoding/fundamentals/blob/master/fundamentals/promises.md)
diff --git a/Week3/LECTURENOTES.md b/Week3/LECTURENOTES.md
new file mode 100644
index 000000000..d0d46ba54
--- /dev/null
+++ b/Week3/LECTURENOTES.md
@@ -0,0 +1,153 @@
+## ES6 Classes
+- I'm trying to make a video game with characters that have names, health points, and armor points. What data structure could be used to represent a character?
+ - An object nicely encapsulated
+ ```
+ const character = {
+ name: 'Sekiro',
+ health: 100,
+ armor: 20,
+ }
+ ```
+ - What if we wanted to give it attack methods?
+ ```
+ const character = {
+ name: 'Sekiro',
+ health: 100,
+ armor: 20,
+ strength: 30,
+ attack: (character) => {
+ character.health -= strength;
+ }
+ }
+ ```
+ - Each character, can use power-up once to increase their strength for 10 seconds. How do we implement that?
+ ```
+ const character = {
+ name: 'Sekiro',
+ health: 100,
+ armor: 20,
+ strength: 30,
+ attack: (opponent) => {
+ opponent.health -= strength;
+ },
+ powerUpUsed: false
+ }
+
+ const powerUp = character => {
+ if (!character.powerUpUsed) {
+ character.strength = character.strength * 2;
+ character.powerUpUsed = true;
+ }
+ }
+
+ powerUp(character)
+ ```
+ - but what if we want to do... `character.powerUp()`?
+
+ ```
+ const character = {
+ name: 'Sekiro',
+ health: 100,
+ armor: 20,
+ strength: 30,
+ attack: (opponent) => {
+ opponent.health -= strength;
+ },
+ _powerUpReady = true,
+ powerUp: () => {
+ if (_powerUpReady) {
+ this.strength = this.strength * 2;
+ setTimeout(() => {
+ this.strength = this.strength / 2;
+ }, 10000)
+ _powerUpReady = false;
+ }
+ }
+ }
+ ```
+ - Why does _powerUpReady have an underscore? What's different about it?
+ - Great! But... we need to start create many of these---one for each character. But if we just copy/paste, we will be copying a lot of code redudantly. This is most obvious when it comes to the attack and powerUp methods. What shall we do!?
+
+- In the old days ---> constructor functions
+ - Uppercase constructor
+ ```
+ function Character(name, strength) {
+ this.name = name;
+ this.health = 100;
+ this.armor = 20;
+ this.strength = strength;
+ this._powerUpReady = true,
+ }
+
+ Character.prototype.attack = (character) => {
+ character.health -= strength;
+ }
+ Character.prototype.powerUp: () => {
+ if (this._powerUpReady) {
+ this.strength = this.strength * 2;
+ setTimeout(() => {
+ this.strength = this.strength / 2;
+ }, 10000)
+ this._powerUpReady = false;
+ }
+ }
+ ```
+ - Then you could instantiate it via...
+ ```
+ const flash = new Character('Flash Gordon', 10)
+ ```
+- Enter ES6 classes
+ ```
+ class Character {
+ health = 100;
+ armor = 20;
+ _powerUpReady = true;
+
+ constructor(name, strength) {
+ this.name = name;
+ this.strength = strength;
+ }
+
+ attack(character) {
+ character.health -= this.strength;
+ }
+
+ powerUp() {
+ if (this._powerUpReady) {
+ this.strength = this.strength * 2;
+ setTimeout(() => {
+ this.strength = this.strength / 2;
+ }, 10000)
+ this._powerUpReady = false;
+ }
+ }
+ }
+ ```
+
+- Prototypes
+ - Array methods, where do they come from?
+ - Everything is an object
+ - instanceOf
+ - Object.isPrototypeOf() & .\_\_proto\_\_
+
+- Inheritance
+ - We want to create bosses. They have everything a normal character has, but with more health, an evil tagline, and a self-heal method.
+ - We can use extend!
+ ```
+ class Boss extends Character {
+ health = 200;
+
+ constructor(name, strength, tagline) {
+ super(name, strength);
+ this.tagline = tagline;
+ }
+
+ sayTagline() {
+ console.log(this.tagline)
+ }
+
+ selfHeal() {
+ this.health += 20;
+ }
+ }
+ ```
\ No newline at end of file
diff --git a/Week3/MAKEME.md b/Week3/MAKEME.md
index ab57382f2..df6d0eac9 100644
--- a/Week3/MAKEME.md
+++ b/Week3/MAKEME.md
@@ -69,7 +69,7 @@ The `App.js`, `Repository.js` and `Contributor.js` files each contain skeleton c
_Read:_
-- HYF fundamental: [ES6 Classes](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/oop_classes.md#es6-classes)
+- FooCoding fundamental: [ES6 Classes](https://github.com/foocoding/fundamentals/blob/master/fundamentals/oop_classes.md#es6-classes)
- More on ES6 classes: [ES6 Classes in Depth](https://ponyfoo.com/articles/es6-classes-in-depth)
#### 2.2.3 ARIA-compliance (BONUS)
diff --git a/Week3/README.md b/Week3/README.md
index 2c317379f..84694b8e3 100644
--- a/Week3/README.md
+++ b/Week3/README.md
@@ -13,17 +13,16 @@ Here are resources that we like you to read as a preparation for the third lectu
- [Object-Oriented Programming & Classes](../../../../fundamentals/blob/master/fundamentals/oop_classes.md)
- [What is 'this'?](../../../../fundamentals/blob/master/fundamentals/this.md)
+- [Javascript call() & apply() vs bind()?](https://stackoverflow.com/questions/15455009/javascript-call-apply-vs-bind)
-### `call` `apply`, `bind`
+### Extra reading
- [Function.prototype.call()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/call)
- [Function.prototype.apply()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply)
- [Function.prototype.bind()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)
-
## Recommended Readings
[Eloquent JavaScript: Chapter 6 - The Secret Life of Objects](http://eloquentjavascript.net/06_object.html). Read up to the section of **Maps**.
-
-_Please go through the material and come to class prepared!_
\ No newline at end of file
+_Please go through the material and come to class prepared!_
diff --git a/homework/App.js b/homework/App.js
index 32b71e34b..5f81a47a1 100644
--- a/homework/App.js
+++ b/homework/App.js
@@ -76,6 +76,6 @@ class App {
}
}
-const HYF_REPOS_URL = 'https://api.github.com/orgs/HackYourFuture/repos?per_page=100';
+const REPOS_URL = 'https://api.github.com/orgs/foocoding/repos?per_page=100';
-window.onload = () => new App(HYF_REPOS_URL);
+window.onload = () => new App(REPOS_URL);
diff --git a/homework/index.html b/homework/index.html
index 9c8f80c1a..cc4b45bcb 100644
--- a/homework/index.html
+++ b/homework/index.html
@@ -1,23 +1,24 @@
+
+
+
+
+
+
+
+
+
+ Codestin Search App
+
+
+
-
-
-
-
-
-
-
-
-
- Codestin Search App
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
+
+
+
+
+
