Week 1 lecture notes and exercises

Gabe Rodriguez · kvarak · commit 5fada6f72fc5 · 2019-08-12T14:52:25.000+02:00
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)|
 
 __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>
