From 6c6838ade948f5f9175b6d62cd49ea9af406a41e Mon Sep 17 00:00:00 2001
From: Gabe Rodriguez <gabe@spotify.com>
Date: Tue, 25 Jun 2019 18:21:09 +0100
Subject: [PATCH 1/2] Adding lecture notes and exercises for javascript2 week 2

---
 README.md                          |  6 ++---
 Week2/LECTURENOTES.md              | 42 ++++++++++++++++++++++++++++++
 Week2/MAKEME.md                    |  7 +++++
 Week2/example.html                 | 20 ++++++++++++++
 Week2/homework/pokemon-data.js     |  2 ++
 Week2/homework/squirtle-sprites.js | 10 +++++++
 Week2/lecture-exercises.js         | 17 ++++++++++++
 7 files changed, 101 insertions(+), 3 deletions(-)
 create mode 100644 Week2/LECTURENOTES.md
 create mode 100644 Week2/example.html
 create mode 100644 Week2/homework/pokemon-data.js
 create mode 100644 Week2/homework/squirtle-sprites.js
 create mode 100644 Week2/lecture-exercises.js

diff --git a/README.md b/README.md
index 25dc59dce..a605c9c3f 100644
--- a/README.md
+++ b/README.md
@@ -5,10 +5,10 @@ or links, please share them by [opening a pull request](https://github.com/FooCo
 
 Here you can find course content and homework for the JavaScript2 module
 
-|Week|Topic|Read|Homework|
-|----|-----|----|--------|
+|Week|Topic|Read|Homework|Lecture Notes|
+|----|-----|----|--------|--------|
 |1.|• Capturing user input through forms <br>• [Events](http://javascript.info/introduction-browser-events)<br>• [Basic DOM manipulations](../../../fundamentals/blob/master/fundamentals/DOM_manipulation.md)<br>• [Code debugging using the browser](http://javascript.info/debugging-chrome) <br>• [Code commenting](../../../fundamentals/blob/master/fundamentals/code_commenting.md)<br>• Structuring code files<br>• [Code formatting](../../../fundamentals/blob/master/fundamentals/code_formatting.md)<br>• [Handing in homework via PR](../../..//fundamentals/blob/master/fundamentals/homework_pr.md) |[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)|
-|2.|• Functions + JSON/Arrays<br>• [Array Manipulations](../../../fundamentals/blob/master/fundamentals/array_manipulation.md)<br>• JSON<br>• [Map and filter](../../../fundamentals/blob/master/fundamentals/map_filter.md)<br>• Arrow functions |[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|
+|2.|• Functions + JSON/Arrays<br>• [Array Manipulations](../../../fundamentals/blob/master/fundamentals/array_manipulation.md)<br>• JSON<br>• [Map and filter](../../../fundamentals/blob/master/fundamentals/map_filter.md)<br>• Arrow functions |[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|[Notes](/Week2/LECTURENOTES.md)
 |3.|• [Closures](../../../fundamentals/blob/master/fundamentals/scope_closures_this.md) <br>• Callbacks|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|
 
 ## Test
diff --git a/Week2/LECTURENOTES.md b/Week2/LECTURENOTES.md
new file mode 100644
index 000000000..ba64301cf
--- /dev/null
+++ b/Week2/LECTURENOTES.md
@@ -0,0 +1,42 @@
+### Lecture Notes Week 2
+
+#### Before class
+Slack message students for things they'd like to review before diving into new topics
+
+## Reviewing (11-11:30am)
+Cover individual topics that students may still be stuck on from previous lectures and homework
+
+## JSON (11:30am-12pm)
+* Illustration on Google Maps. How do people from Sweden speak to people from Sri Lanka?
+* [Advice Slip](https://adviceslip.com/) and [API](https://api.adviceslip.com/#endpoint-random). If they have machines that run on the programming language RUST, how can we communicate with them? They serialize their data to JSON!
+* Douglass Crawford
+* What is JSON?
+  * Javscript Object Notation
+  * We are fortunate that it's familiar and easy to understand :)
+  * It is a STRING [PokeAPI](https://pokeapi.co/api/v2/pokemon/squirtle/)
+  * Not all javascript objects are valid json
+* Coding exercise (lecture-exercise.js)
+  * JSON.parse
+* Serialization vs Deserialization
+  * JSON.stringify()
+  * Other formats
+    * protobufs
+    * XML
+    * GRPC?!
+
+
+
+## Functions + JSON
+
+## Higher order functions
+## Arrow functions
+
+
+
+
+## Array Manipulations
+## Map and filter
+## Reduce (every?)
+
+## Discuss Homework (20mins)
+
diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md
index 0169b7920..27b2ac99e 100644
--- a/Week2/MAKEME.md
+++ b/Week2/MAKEME.md
@@ -11,6 +11,13 @@ Topics discussed this week:
 
 > [Here](/Week3/README.md) you find the readings you have to complete before the third lecture.
 
+## Step 0: JSON parsing
+1. Create an HTML file
+2. Insert a script tag that points to squirtle-sprites.js
+3. In squirtle-sprites.js, convert pokemonDataJSONString to a javascript object so you can access its properties
+4. Display the sprite images (located in the parsed object) in the HTML page. You'll need to do some DOM manipulation kinda of stuff (maybe element.appendChild?)
+*Bonus Challenge*: Can you use an array method to loop over all sprites so you don't have to manually type each?
+
 ## Step 1: More map, filter and `=>`
 
 _Deadline Wednesday_
diff --git a/Week2/example.html b/Week2/example.html
new file mode 100644
index 000000000..374f064c4
--- /dev/null
+++ b/Week2/example.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <title>Sample exercise</title>
+    <style>
+      body {
+        font-family: sans-serif;
+      }
+      #advice {
+        color: slateblue;
+      }
+    </style>
+  </head>
+  <body>
+    <h3>Here is your advice for the day:</h3>
+    <h1 id="advice"></h1>
+    <script type="text/javascript" src="./lecture-exercises.js"></script>
+  </body>
+</html>
diff --git a/Week2/homework/pokemon-data.js b/Week2/homework/pokemon-data.js
new file mode 100644
index 000000000..67fbe5758
--- /dev/null
+++ b/Week2/homework/pokemon-data.js
@@ -0,0 +1,2 @@
+module.exports =
+  '{"abilities":[{"ability":{"name":"rain-dish","url":"https://pokeapi.co/api/v2/ability/44/"},"is_hidden":true,"slot":3},{"ability":{"name":"torrent","url":"https://pokeapi.co/api/v2/ability/67/"},"is_hidden":false,"slot":1}],"base_experience":63,"forms":[{"name":"squirtle","url":"https://pokeapi.co/api/v2/pokemon-form/7/"}],"height":5,"held_items":[],"id":7,"is_default":true,"location_area_encounters":"https://pokeapi.co/api/v2/pokemon/7/encounters","name":"squirtle","order":10,"species":{"name":"squirtle","url":"https://pokeapi.co/api/v2/pokemon-species/7/"},"sprites":{"back_default":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/7.png","back_female":null,"back_shiny":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/7.png","back_shiny_female":null,"front_default":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png","front_female":null,"front_shiny":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/7.png","front_shiny_female":null},"stats":[{"base_stat":43,"effort":0,"stat":{"name":"speed","url":"https://pokeapi.co/api/v2/stat/6/"}},{"base_stat":64,"effort":0,"stat":{"name":"special-defense","url":"https://pokeapi.co/api/v2/stat/5/"}},{"base_stat":50,"effort":0,"stat":{"name":"special-attack","url":"https://pokeapi.co/api/v2/stat/4/"}},{"base_stat":65,"effort":1,"stat":{"name":"defense","url":"https://pokeapi.co/api/v2/stat/3/"}},{"base_stat":48,"effort":0,"stat":{"name":"attack","url":"https://pokeapi.co/api/v2/stat/2/"}},{"base_stat":44,"effort":0,"stat":{"name":"hp","url":"https://pokeapi.co/api/v2/stat/1/"}}],"types":[{"slot":1,"type":{"name":"water","url":"https://pokeapi.co/api/v2/type/11/"}}],"weight":90}';
diff --git a/Week2/homework/squirtle-sprites.js b/Week2/homework/squirtle-sprites.js
new file mode 100644
index 000000000..c03066c93
--- /dev/null
+++ b/Week2/homework/squirtle-sprites.js
@@ -0,0 +1,10 @@
+const pokemonDataJSONString = require('./pokemon-data.js')
+
+// Step 1: Create an HTML file
+// Step 2: Insert a script tag that points to this javascript file
+// Step 3: Convert pokemonDataJSONString to a javascript object so you can access its properties
+// Step 4: Display the sprite images (located in the parsed object) in the HTML page. You'll need to do some DOM manipulation kinda of stuff (maybe element.appendChild?)
+// BONUS CHALLENGE: Can you use an array method to loop over all sprites so you don't have to manually type each?
+
+
+console.log(JSON.parse(pokemonDataJSONString))
\ No newline at end of file
diff --git a/Week2/lecture-exercises.js b/Week2/lecture-exercises.js
new file mode 100644
index 000000000..1fdfef4e0
--- /dev/null
+++ b/Week2/lecture-exercises.js
@@ -0,0 +1,17 @@
+async function getRandomAdvice() {
+  const adviceReq = fetch('https://api.adviceslip.com/advice'); // send request
+  const adviceResponse = await adviceReq; // wait until something comes back
+  // const jsonString = await adviceResponse.text();
+  // return jsonString
+  // const adviceData = JSON.parse(jsonString)
+  // return jsonString
+  const adviceData = await adviceResponse.json(); // parses JSON string into native JavaScript object
+  return adviceData.slip.advice;
+}
+
+async function setRandomAdvice() {
+  const adviceEl = document.getElementById('advice');
+  adviceEl.innerText = await getRandomAdvice();
+}
+
+setRandomAdvice();

From 5dcc95143cca1fa3cd0996fbe084583f027c54c8 Mon Sep 17 00:00:00 2001
From: Gabe Rodriguez <gabe@spotify.com>
Date: Wed, 26 Jun 2019 16:00:44 +0100
Subject: [PATCH 2/2] Adding Functions lecture notes

---
 Week2/LECTURENOTES.md              | 39 ++++++++++++++++++------------
 Week2/MAKEME.md                    | 25 ++++++++++---------
 Week2/README.md                    | 27 +++++++++------------
 Week2/homework/pokemon-data.js     |  2 --
 Week2/homework/squirtle-sprites.js | 17 +++++++------
 5 files changed, 57 insertions(+), 53 deletions(-)
 delete mode 100644 Week2/homework/pokemon-data.js

diff --git a/Week2/LECTURENOTES.md b/Week2/LECTURENOTES.md
index ba64301cf..09352a864 100644
--- a/Week2/LECTURENOTES.md
+++ b/Week2/LECTURENOTES.md
@@ -23,20 +23,29 @@ Cover individual topics that students may still be stuck on from previous lectur
     * protobufs
     * XML
     * GRPC?!
-
-
-
-## Functions + JSON
-
-## Higher order functions
-## Arrow functions
-
-
-
+* Cover homework question #3
+
+## Functions advanced (12-12:30pm)
+* Different ways functions can be made:
+  * function declaration vs expression
+  * arrow function 
+    * Omitting return, parameter parenthesis
+* What's a method?
+* Pure function? or side effects?
+* Example: how does a program run this? (example w/ a function, call of that function, and a console log)
+  * Call stack (stack overflow)
+* Params
+  * Extra params
+  * Default params
+* Recursion (basic example)
+* Example function 
+  * pigs example?
+  * countChar("kakkerlak", "k")? With DOM manipulation?
+* Simplicity of functions
+  * while loop from [Chapter 5](http://eloquentjavascript.net/05_higher_order.html)
+* Higher order functions
+  * repeat(n, action)
+  * greaterThan10
 
 ## Array Manipulations
-## Map and filter
-## Reduce (every?)
-
-## Discuss Homework (20mins)
-
+## Map, Filter, Reduce (others? every, some, etc)
diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md
index 27b2ac99e..2709da79e 100644
--- a/Week2/MAKEME.md
+++ b/Week2/MAKEME.md
@@ -2,22 +2,14 @@
 
 ```
 Topics discussed this week:
-• Functions + JSON/Arrays
-• Array Manipulations
 • JSON
-• Map and filter
-• Arrow functions
+• Functions advanced
+• Array Manipulations
+• Map, filter, & reduce
 ```
 
 > [Here](/Week3/README.md) you find the readings you have to complete before the third lecture.
 
-## Step 0: JSON parsing
-1. Create an HTML file
-2. Insert a script tag that points to squirtle-sprites.js
-3. In squirtle-sprites.js, convert pokemonDataJSONString to a javascript object so you can access its properties
-4. Display the sprite images (located in the parsed object) in the HTML page. You'll need to do some DOM manipulation kinda of stuff (maybe element.appendChild?)
-*Bonus Challenge*: Can you use an array method to loop over all sprites so you don't have to manually type each?
-
 ## Step 1: More map, filter and `=>`
 
 _Deadline Wednesday_
@@ -146,7 +138,13 @@ If that's the case, try and fix the error. When done, run the tests again: `npm
 
 Repeat the previous step until all (= 2 in this case) tests pass.
 
-## Step 3: ROVER
+## Step 3: JSON parsing
+
+1. Create an HTML file
+2. Insert a script tag that points to squirtle-sprites.js
+3. In squirtle-sprites.js, call fetchPokemonData() and convert the JSON string it returns to a javascript object so you can access its properties
+4. Display the sprite images (located in the parsed object) in the HTML page. You'll need to do some DOM manipulation kinda of stuff (maybe element.appendChild?)
+*Bonus Challenge*: Can you use an array method to loop over all sprites so you don't have to manually type each?
 
 Finish up to chapter 7: JSON on [roverjs.com](http://roverjs.com/)!
 
@@ -178,3 +176,6 @@ Go over your homework one last time:
 If the answer is 'yes' to all preceding questions you are ready to follow these instructions:
 
 - [Handing in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md)
+
+### Do you have even more time?
+Read the _Eloquent Javascript_ chapters in the [Week 2 Readme](./README.md)
\ No newline at end of file
diff --git a/Week2/README.md b/Week2/README.md
index c58b21eb5..2b9dd1b9c 100644
--- a/Week2/README.md
+++ b/Week2/README.md
@@ -4,37 +4,32 @@
 
 ```
 In week two we will discuss the following topics:
-• Functions + JSON/Arrays
-• Array Manipulations
 • JSON
-• Map and filter
-• Arrow functions
+• Functions advanced
+• Array Manipulations
+• Map, filter, & reduce
 ```
 
 ## Here are resources that we like you to read as a preparation for the coming lecture. 
 
 ### JSON
-- [JSON](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON) (MDN)
+- [FreeCodeCamp JSON](https://www.youtube.com/watch?v=B-k76DMOj2k)
+- [What is JSON and why does one use it?](https://www.quora.com/What-is-JSON-and-why-does-one-use-it/answer/Prid-Speed?ch=10&share=0b6f9763&srid=XxbK)
 
 ### Map and Filter
 - :dizzy: [Fun fun functional](https://www.youtube.com/playlist?list=PL0zVEGEvSaeEd9hlmCXrk5yUyqUag-n84) :dizzy: Check the first 3-4 videos.
 
-### Code conventions
-- Code conventions: http://crockford.com/javascript/code.html
-
 ### Array cardio
 - Wes Bos' awesome free tutorials. Just make a free account and do Array Cardio #1 [here](https://javascript30.com/)
 
-### From _Eloquent JavaScript_
-
-- Objects continued: http://eloquentjavascript.net/06_object.html
-
-
 ## Recommended readings
+These chapters from _Eloquent JavaScript_ are a bit advanced, but give in-depth explanations of the topics that will be discussed during the lecture. If you have the time, try giving these chapters a read. 
 
-This chapter from _Eloquent JavaScript_ gives in-depth explanations of the topics that will be discussed during the lecture. Highly recommended (if time permits).
+- Chapter 3 - [Functions](https://eloquentjavascript.net/03_functions.html)
+- Chapter 4 - [Data Structures: Objects and Arrays](https://eloquentjavascript.net/04_data.html)
+- Chapter 5 [Higher-Order Functions](https://eloquentjavascript.net/05_higher_order.html)
 
-- Chapter 3 - [Functions](http://eloquentjavascript.net/03_functions.html)
-- Chapter 5 - [Higher-Order Functions](http://eloquentjavascript.net/05_higher_order.html)
+#### For fun
+ [The Weird History of JavaScript](https://www.youtube.com/watch?v=Sh6lK57Cuk4) shows just how haphazard the evolution of Javascript actually was. 
 
 _Please go through the material and come to class prepared!_
\ No newline at end of file
diff --git a/Week2/homework/pokemon-data.js b/Week2/homework/pokemon-data.js
deleted file mode 100644
index 67fbe5758..000000000
--- a/Week2/homework/pokemon-data.js
+++ /dev/null
@@ -1,2 +0,0 @@
-module.exports =
-  '{"abilities":[{"ability":{"name":"rain-dish","url":"https://pokeapi.co/api/v2/ability/44/"},"is_hidden":true,"slot":3},{"ability":{"name":"torrent","url":"https://pokeapi.co/api/v2/ability/67/"},"is_hidden":false,"slot":1}],"base_experience":63,"forms":[{"name":"squirtle","url":"https://pokeapi.co/api/v2/pokemon-form/7/"}],"height":5,"held_items":[],"id":7,"is_default":true,"location_area_encounters":"https://pokeapi.co/api/v2/pokemon/7/encounters","name":"squirtle","order":10,"species":{"name":"squirtle","url":"https://pokeapi.co/api/v2/pokemon-species/7/"},"sprites":{"back_default":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/7.png","back_female":null,"back_shiny":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/7.png","back_shiny_female":null,"front_default":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png","front_female":null,"front_shiny":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/7.png","front_shiny_female":null},"stats":[{"base_stat":43,"effort":0,"stat":{"name":"speed","url":"https://pokeapi.co/api/v2/stat/6/"}},{"base_stat":64,"effort":0,"stat":{"name":"special-defense","url":"https://pokeapi.co/api/v2/stat/5/"}},{"base_stat":50,"effort":0,"stat":{"name":"special-attack","url":"https://pokeapi.co/api/v2/stat/4/"}},{"base_stat":65,"effort":1,"stat":{"name":"defense","url":"https://pokeapi.co/api/v2/stat/3/"}},{"base_stat":48,"effort":0,"stat":{"name":"attack","url":"https://pokeapi.co/api/v2/stat/2/"}},{"base_stat":44,"effort":0,"stat":{"name":"hp","url":"https://pokeapi.co/api/v2/stat/1/"}}],"types":[{"slot":1,"type":{"name":"water","url":"https://pokeapi.co/api/v2/type/11/"}}],"weight":90}';
diff --git a/Week2/homework/squirtle-sprites.js b/Week2/homework/squirtle-sprites.js
index c03066c93..b6b6e2920 100644
--- a/Week2/homework/squirtle-sprites.js
+++ b/Week2/homework/squirtle-sprites.js
@@ -1,10 +1,11 @@
-const pokemonDataJSONString = require('./pokemon-data.js')
+/* eslint-disable */
 
-// Step 1: Create an HTML file
-// Step 2: Insert a script tag that points to this javascript file
-// Step 3: Convert pokemonDataJSONString to a javascript object so you can access its properties
-// Step 4: Display the sprite images (located in the parsed object) in the HTML page. You'll need to do some DOM manipulation kinda of stuff (maybe element.appendChild?)
-// BONUS CHALLENGE: Can you use an array method to loop over all sprites so you don't have to manually type each?
+/* 
+  Call this function to get a JSON string of the data
+  (simulates calling a server to retrieve data)
+*/
+function fetchPokemonData() {
+  return '{"abilities":[{"ability":{"name":"rain-dish","url":"https://pokeapi.co/api/v2/ability/44/"},"is_hidden":true,"slot":3},{"ability":{"name":"torrent","url":"https://pokeapi.co/api/v2/ability/67/"},"is_hidden":false,"slot":1}],"base_experience":63,"forms":[{"name":"squirtle","url":"https://pokeapi.co/api/v2/pokemon-form/7/"}],"height":5,"held_items":[],"id":7,"is_default":true,"location_area_encounters":"https://pokeapi.co/api/v2/pokemon/7/encounters","name":"squirtle","order":10,"species":{"name":"squirtle","url":"https://pokeapi.co/api/v2/pokemon-species/7/"},"sprites":{"back_default":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/7.png","back_female":null,"back_shiny":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/back/shiny/7.png","back_shiny_female":null,"front_default":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/7.png","front_female":null,"front_shiny":"https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/shiny/7.png","front_shiny_female":null},"stats":[{"base_stat":43,"effort":0,"stat":{"name":"speed","url":"https://pokeapi.co/api/v2/stat/6/"}},{"base_stat":64,"effort":0,"stat":{"name":"special-defense","url":"https://pokeapi.co/api/v2/stat/5/"}},{"base_stat":50,"effort":0,"stat":{"name":"special-attack","url":"https://pokeapi.co/api/v2/stat/4/"}},{"base_stat":65,"effort":1,"stat":{"name":"defense","url":"https://pokeapi.co/api/v2/stat/3/"}},{"base_stat":48,"effort":0,"stat":{"name":"attack","url":"https://pokeapi.co/api/v2/stat/2/"}},{"base_stat":44,"effort":0,"stat":{"name":"hp","url":"https://pokeapi.co/api/v2/stat/1/"}}],"types":[{"slot":1,"type":{"name":"water","url":"https://pokeapi.co/api/v2/type/11/"}}],"weight":90}';
+}
 
-
-console.log(JSON.parse(pokemonDataJSONString))
\ No newline at end of file
+/* Code goes below */