HackYourFuture · HibaArafeh · Mar 4, 2019 · Jun 25, 2019 · Jun 26, 2019 · Jul 13, 2019
diff --git 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/JavaScript2/pulls).
+or links, please share them by [opening a pull request](https://github.com/FooCoding/JavaScript2/pulls).
 
-# HackYourFuture - JavaScript 2
+# JavaScript 2
 
 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)|
-|3.|• [Closures](../../../fundamentals/blob/master/fundamentals/scope_closures_this.md) <br>• Callbacks|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/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)|[Notes](/Week3/LECTURENOTES.md)
 
 ## Test
 At the end of this module you'll be doing a formative test. It will be done on **paper** and will consist of **4 exercises** that will test your JavaScript1 and JavaScript2 knowledge. 
@@ -18,14 +18,15 @@ Why on paper, you might ask? Fundamental understanding should become intuitive.
 
 Also important to note: this test is done for 2 reasons only.
 
-(1) **HackYourFuture wants to know** what skill level you are at. 
+(1) **We want to know** what skill level you are at. 
 
 (2) The test will **give you an indication** of what skill level you are at.
 
 
 ### Overall
 A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](../../../fundamentals/blob/master/fundamentals/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.
 
 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
diff --git a/Week1/debugging/index.html b/Week1/debugging/index.html
@@ -0,0 +1,8 @@
+<!doctype html>
+<html>
+<body>
+  <h1 class="header">Hello!!</h1>
+  <input type="button" value="Click me!" id="myButton"/>
+	<script src='index.js'></script>
+</body>
+</html>
diff --git a/Week1/debugging/index.js b/Week1/debugging/index.js
@@ -0,0 +1,30 @@
+const myButton = document.getElementById('myButton');
+const header = document.querySelector('.header');
+let i = 1
+myButton.addEventListener('mousedown', () => {
+  const element = document.createElement('li');
+  element.innerText = 'Cool!!! ' + i++;
+  element.addEventListener('click', () => {
+    header.removeChild(element);
+  })
+  header.appendChild(element);
+})
+/*myButton.addEventListener('mouseup', () => {
+  debugger
+  header.innerHTML = 'Hello!!'
+})
+
+
+
+
+let variable
+
+let i = 10
+
+while (i--) {
+  debugger
+  variable = (i % 2) ? "Hello!" : "Foo coding!"
+  debugger
+  console.log(variable)
+}
+*/
diff --git a/Week1/homework/app.js b/Week1/homework/app.js
@@ -2,10 +2,153 @@
 
 {
   const bookTitles = [
-    // Replace with your own book titles
-    'harry_potter_chamber_secrets',
+    'wolf_hall',
+    'secondhand_time',
+    'never_let_me_go',
+    'the_amber_spyglass',
+    'between_the_world_and_me',
+    'cloud_atlas',
+    'my_brilliant_friend',
+    'the_corrections',
+    'the_road',
+    'life_after_life',
   ];
+  function makeBooksList() {
+    const uList = document.createElement('ul');
+    uList.className = 'book-list';
+    document.body.appendChild(uList);
+    for (let i = 0; i < bookTitles.length; i++) {
+      const listElement = document.createElement('li');
+      listElement.className = 'list-element';
+      listElement.innerHTML = bookTitles[i];
+      uList.appendChild(listElement);
+    }
+    console.log(uList);
+  }
+  makeBooksList(bookTitles);
+  const booksInformation = {
+    wolf_hall: {
+      title: 'Wolf hall',
+      author: 'Hilary Mantel',
+      language: 'English',
+    },
+    secondhand_time: {
+      title: 'Secondhand time',
+      author: 'Svetlana Alexievich',
+      language: 'English',
+    },
+    never_let_me_go: {
+      title: 'Never let me go',
+      author: 'Kazvo Ishiguro',
+      language: 'English',
+    },
+    the_amber_spyglass: {
+      title: 'The amber spyglass',
+      author: 'Philip Pullmar',
+      language: 'English',
+    },
+    between_the_world_and_me: {
+      title: 'Between the world and me',
+      author: 'Ta-Nehisi Coates',
+      language: 'English',
+    },
+    cloud_atlas: {
+      title: 'Cloud atlas',
+      author: 'David Mitchell',
+      language: 'English',
+    },
+    my_brilliant_friend: {
+      title: 'My brilliant friend',
+      author: 'Elena Ferrante',
+      language: 'English',
+    },
+    the_corrections: {
+      title: 'The corrections',
+      author: 'Jonathan Franzen',
+      language: 'English',
+    },
+    the_road: {
+      title: 'The road',
+      author: 'Cormac McCarthy',
+      language: 'English',
+    },
+    life_after_life: {
+      title: 'Life after life',
+      author: 'Kate Atkinson',
+      language: 'English',
+    },
+  };
+  console.log(booksInformation);
+  function myBookObject(object) {
+    const books = document.createElement('div');
+    document.body.appendChild(books);
+    const bookTitle = document.createElement('h1');
+    bookTitle.innerHTML = `Book title: ${object.title}`;
+    books.appendChild(bookTitle);
+    const bookAuthor = document.createElement('h3');
+    bookAuthor.appendChild(document.createTextNode(`Author: ${object.author}`));
+    books.appendChild(bookAuthor);
+    const bookLanguage = document.createElement('h4');
+    bookLanguage.appendChild(document.createTextNode(`Language: ${object.language}`));
+    books.appendChild(bookLanguage);
+    return books;
+  }
 
-  // Replace with your own code
-  console.log(bookTitles);
+  for (const Key of Object.keys(booksInformation)) {
+    document.body.appendChild(myBookObject(booksInformation[Key]));
+  }
+  const booksCover = {
+    wolf_hall: {
+      image: './images/wolfhall.jpg',
+    },
+    secondhand_time: {
+      image: './images/secondhandtime.jpg',
+    },
+    never_let_me_go: {
+      image: './images/neverletmego.jpg',
+    },
+    the_amber_spyglass: {
+      image: './images/theamberspyglass.jpg',
+    },
+    between_the_world_and_me: {
+      image: './images/betweentheworld andme.jpg',
+    },
+    cloud_atlas: {
+      image: './images/cloudatlas.jpg',
+    },
+    my_brilliant_friend: {
+      image: './images/mybrillantfriend.jpg',
+    },
+    the_corrections: {
+      image: './images/thecorrections.jpg',
+    },
+    the_road: {
+      image: './images/theroad.jpg',
+    },
+    life_after_life: {
+      image: './images/lifeafterlife.jpg',
+    },
+  };
+  console.log(booksCover);
+  function addBookCover(bookCover, books) {
+    const div = document.createElement('div');
+    div.className = 'book-cover';
+    for (const key of Object.keys(bookCover)) {
+      const listWithImages = document.createElement('ul');
+      listWithImages.className = 'book-with-cover';
+      div.appendChild(listWithImages);
+      const source = bookCover[key].image;
+      const img = document.createElement('img');
+      img.setAttribute('src', source);
+      listWithImages.appendChild(img);
+      for (const Key of Object.keys(books[key])) {
+        const listElements = document.createElement('li');
+        listElements.className = 'book-info-and-cover';
+        listWithImages.appendChild(listElements);
+        listElements.innerText = books[key][Key];
+      }
+    }
+    return div;
+  }
+  document.body.appendChild(addBookCover(booksCover, booksInformation));
 }
diff --git a/Week1/homework/cover3.jpg b/Week1/homework/cover3.jpg
diff --git a/Week1/homework/images/betweentheworld andme.jpg b/Week1/homework/images/betweentheworld andme.jpg
diff --git a/Week1/homework/images/cloudatlas.jpg b/Week1/homework/images/cloudatlas.jpg
diff --git a/Week1/homework/images/lifeafterlife.jpg b/Week1/homework/images/lifeafterlife.jpg
diff --git a/Week1/homework/images/mybrillantfriend.jpg b/Week1/homework/images/mybrillantfriend.jpg
diff --git a/Week1/homework/images/neverletmego.jpg b/Week1/homework/images/neverletmego.jpg
diff --git a/Week1/homework/images/secondhandtime.jpg b/Week1/homework/images/secondhandtime.jpg
diff --git a/Week1/homework/images/theamberspyglass.jpg b/Week1/homework/images/theamberspyglass.jpg
diff --git a/Week1/homework/images/thecorrections.jpg b/Week1/homework/images/thecorrections.jpg
diff --git a/Week1/homework/images/theroad.jpg b/Week1/homework/images/theroad.jpg
diff --git a/Week1/homework/images/wolfhall.jpg b/Week1/homework/images/wolfhall.jpg
diff --git a/Week1/homework/index.html b/Week1/homework/index.html
@@ -1 +1,17 @@
-<!-- replace this with your HTML content -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="style.css">
+  <title>Top ten books 2020</title>
+</head>
+<body>
+
+    <div>
+      <img id='cover' src="cover3.jpg" alt="cover photo">
+    </div>
+    <h1>The 10 best books of the 21st century</h1>
+    <script src="app.js"></script>
+</body>
+</html>
diff --git a/Week1/homework/style.css b/Week1/homework/style.css
@@ -1 +1,21 @@
-/* add your styling here */
+body {
+  font-family: 'Playfair Display', serif;
+  background-color: lightyellow;
+}
+#cover{
+  width: 100%;
+}
+img {
+   width: 230px;
+   height: 270px;
+}
+.book-cover{
+  display: flex;
+  flex-wrap: wrap;
+  grid-template-columns: 1fr 1fr 1fr;
+  padding-left: 80px;
+  grid-gap: 0.5rem 2rem;
+}
+.book-info-and-cover{
+  text-align: center;
+}
diff --git a/Week2/LECTURENOTES.md b/Week2/LECTURENOTES.md
@@ -0,0 +1,51 @@
+### 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?!
+* 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, Filter, Reduce (others? every, some, etc)
diff --git a/Week2/MAKEME.md b/Week2/MAKEME.md
@@ -2,11 +2,10 @@
 
 ```
 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.
@@ -105,7 +104,7 @@ We have provided _unit tests_ in this repo that allow you to verify that your ho
 >
 > Adapted from: Roy Osherove (1.09), The art of Unit Testing. Greenwich, CT: Manning.
 
-At this point it is not important to understand how unit tests work. The only thing you need to know now is how to run the tests and how to determine whether your homework produces the correct results.
+At this point it is not important to understand how unit tests work. The only thing you need to know now is how to run the tests and how to determine whether your homework produces the correct results. If you want to understand more about unittesting in JavaScript using Jest (as is done in the homework) you can read [A quick introduction to test driven development with Jest](https://www.freecodecamp.org/news/a-quick-introduction-to-test-driven-development-with-jest-cac71cb94e50/).
 
 #### Run the tests
 
@@ -139,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/)!
 
@@ -171,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)