foocoding · kvarak · Aug 12, 2019 · Aug 4, 2019 · Aug 5, 2019 · Aug 10, 2019
diff --git a/README.md b/README.md
@@ -5,11 +5,11 @@ or links, please share them by [opening a pull request](https://github.com/FooCo
 
 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) <br>• [XMLHttpRequests](../../../fundamentals/blob/master/fundamentals/XMLHttpRequest.md) <br>• 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)<br>• [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)<br>• [async/await](../../../fundamentals/blob/master/fundamentals/async_await.md)<br>• [The `this` keyword](../../../fundamentals/blob/master/fundamentals/this.md)<br>• call, apply, bind<br>• [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) <br />• API calls <br />• Structure for a basic SPA (Single Page Application) <br />|[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)<br />• [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)<br />• [async/await](../../../fundamentals/blob/master/fundamentals/async_await.md)<br />• [The `this` keyword](../../../fundamentals/blob/master/fundamentals/this.md)<br />• call, apply, bind<br />• [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:__
 

diff --git a/Week1/LECTURENOTES.md 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
@@ -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:

diff --git 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:

diff --git a/Week1/search.html b/Week1/search.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>TV show search</title>
+    <style>
+      #actors {
+        display: flex;
+      }
+    </style>
+  </head>
+  <body>
+    <input id="query" type="text" />
+    <button id="search">Search Show</button>
+    <div id="poster"></div>
+    <div id="actors"></div>
+
+    <script>
+      document.getElementById('search').addEventListener('click', () => {
+        const inputText = document.getElementById('query').value;
+        apiShowSearch(inputText);
+      });
+
+      function apiShowSearch(searchQuery) {
+        const xmlReq = new XMLHttpRequest();
+
+        xmlReq.addEventListener('load', event => {
+          const response = JSON.parse(event.currentTarget.response);
+          displayShowPoster(response);
+          getActors(response[0].show.id);
+        });
+
+        xmlReq.open('GET', `http://api.tvmaze.com/search/shows?q=${searchQuery}`, true);
+        xmlReq.send();
+      }
+
+      function displayShowPoster(showResultsArr) {
+        const topResult = showResultsArr[0].show;
+        const posterDiv = document.getElementById('poster');
+        posterDiv.innerHTML = '';
+
+        const imageEl = document.createElement('img');
+        imageEl.src = topResult.image.original;
+        imageEl.width = '200';
+        posterDiv.appendChild(imageEl);
+      }
+
+      function getActors(showId) {
+        const xmlReq = new XMLHttpRequest();
+
+        xmlReq.addEventListener('load', event => {
+          const response = JSON.parse(event.currentTarget.response);
+          displayActorHeadshots(response);
+        });
+
+        xmlReq.open('GET', `http://api.tvmaze.com/shows/${showId}/cast`, true);
+        xmlReq.send();
+      }
+
+      function displayActorHeadshots(castData) {
+        const actorImagesEl = document.getElementById('actors');
+        actorImagesEl.innerHTML = '';
+
+        for (let castMember of castData) {
+          const imageEl = document.createElement('img');
+          imageEl.src = castMember.person.image.original;
+          imageEl.width = '100';
+          actorImagesEl.appendChild(imageEl);
+        }
+      }
+    </script>
+  </body>
+</html>
diff --git a/Week2/LECTURENOTES.md 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
@@ -15,10 +15,4 @@ 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!_