diff --git a/Notes/20190609.txt b/Notes/20190609.txt
new file mode 100644
index 000000000..ab32fc731
--- /dev/null
+++ b/Notes/20190609.txt
@@ -0,0 +1 @@
+document.xxxx : document is what tells the javascript to alter the html document that it's attached to 
\ No newline at end of file
diff --git a/Notes/DOMtree.gif b/Notes/DOMtree.gif
new file mode 100644
index 000000000..e7f30dd77
Binary files /dev/null and b/Notes/DOMtree.gif differ
diff --git a/Notes/JSpractice.js b/Notes/JSpractice.js
new file mode 100644
index 000000000..76f7ce639
--- /dev/null
+++ b/Notes/JSpractice.js
@@ -0,0 +1,25 @@
+let letters = [
+  { name: 'a', type: 'vowel' },
+  { name: 'b', type: 'consonant' },
+  { name: 'c', type: 'consonant' },
+  { name: 'd', type: 'consonant' },
+  { name: 'e', type: 'vowel' }
+]
+
+let vowels = letters.filter(function (letter) {
+  return letter.type === 'vowel';
+})
+
+console.log(vowels);
+
+let allLetters = letters.filter(function (letter) {
+  return letter.type === 'vowel' || letter.type === 'consonant';
+})
+
+console.log(allLetters);
+
+let noCons = letters.filter(function (letter) {
+  return letter.type !== 'consonant';
+})
+
+console.log(noCons);
\ No newline at end of file
diff --git a/Notes/fromReading.md b/Notes/fromReading.md
new file mode 100644
index 000000000..83509eff4
--- /dev/null
+++ b/Notes/fromReading.md
@@ -0,0 +1,238 @@
+ES6 arrow function... => - look this up, allows anonymous function as variable (syntax: const variable = () => {...})
+
+#Fun Fun Function Videos:
+-functions in JS are just values, same as numbers, strings, etc
+-a higher order function is a function that uses another function
+-anonymous function syntax example: 
+  var tripler = function(x) {
+    return X * 3;
+  }
+  let waffle = tripler;
+  waffle(15) //will return 45
+-filter
+  -works on arrays
+    const var = thingToFilter.filter(function(itemToFilterWith) {
+      return itemToFilterWith.valueOfItem === 'whateverFilterYouWant';
+    });
+    -thingToFilter = the array that the filter function is being used on
+    -filter = filter (the function we're using - will always be filter if we're filtering)
+    -function = function (an anonymous function, so this will always be function)
+    -itemToFilterWith = one item in the array; if the array contains 'letters', this would be 'letter', e.g.
+    -valueOfItem = assuming an array of objects, this will be some quality of the item (perhaps 'vowel')
+    -whateverFilterYouWant = what you're screening for; 
+  -note the odd parens replacement - won't work without them that whateverFilterYouWant (Because it's closing the function call)
+  -if you want to filter on multiple criteria, can use && or || (see JSpractice.js)
+  -find does the same as filter, but only returns the first item (will make a new array with one element)
+  -can also use filter to kick things out of an array (see JSpractic.js)
+-map
+  -similar to filter (works on arrays, similar syntax)
+  -instead of selecting/picking out items, it transforms them
+    const var = arrayToMap.map(function(itemInArray) {
+      return itemInArray.valueWanted;
+      -this variation of map will take the value and list all of those in the new array
+  })
+-reduce
+  -very versatile tool
+  -syntax:
+    const var = arrayName.reduce(function(sum, iteratedObject) {
+      return sum + iteratedObject.propertyToTotal;
+    }, 0)
+  -slightly different from other higher functions so far 
+    -takes 2 parameters: first is the sum or whatever, second is what will be whatever is iterated 
+    -needs a value directly after the function to start sum at (often 0, but can be object, number, whatever)
+
+#JavaScript and DOM
+<a href="https://www.w3schools.com/js/js_htmldom_html.asp">
+-document.write() can be used to write directly to the HTML output stream
+  -example syntax (as it would appear in an HTML doc): 
+    <script>
+      document.write(Date());
+    </script>
+  -note that if you do this after the page has loaded, it will overwrite the content of the page
+-to alter HTML, use .innerHTML
+  -example syntax:
+    document.getElementById(id).innerHTML = new HTML
+    -note that var element = document.getElementById(id) can be used to replace that text (see examples)
+-to change the value of an HTML attribute, <...>.attribute = new value
+  -example syntax: 
+    document.getElementById(id).attribute = new value
+    -note that this isn't literally 'attribute' - the name of the attribute goes there
+
+<a href="https://www.w3schools.com/js/exercise_js.asp?filename=exercise_js_dom_html2">
+-to change an element using tag instead of ID:
+  -example syntax: 
+    document.getElementsByTagName('p')[0].innerHTML = 'New Text';
+    -the number in brackets tells it *which* of those tags to change... so [0] will change the first, and so on...
+    -without brackets, will apply to all instances of that element
+-to change an element using class instead of tag or ID:
+  -example syntax:
+    document.getElementsByClassName('class')[0].innerHTML = <...>;
+    -number in brackets tells it which of the class instances to change
+-to change a style element, use <...>.style.attributename = <...>
+  -example syntax: 
+    document.getElementById("demo").style.color = "red";
+
+<a href="https://www.w3schools.com/js/js_htmldom_elements.asp">
+-to find an element within an element, use variables
+  -example syntax (finds id main, then all p elements within main):
+    var x = document.getElementById("main");
+    var y = x.getElementsByTagName("p");
+-to find an element by a particular CSS selector:
+  -example syntax: 
+    var x = document.querySelectorAll("p.intro");
+-to find an element by object collection: 
+  -example syntax (finds all forms with frm1 id (should only be one)):
+    var x = document.forms["frm1"];
+    var text = "";
+    var i;
+    for (i = 0; i < x.length; i++) {
+      text += x.elements[i].value + "<br>";
+    }
+    document.getElementById("demo").innerHTML = text;
+  -for a list of the objects that can be found this way, see above link (toward bottom)
+
+<a href="https://www.w3schools.com/js/js_htmldom.asp">
+-overview of DOM reference
+
+<a href="https://www.w3schools.com/js/js_htmldom_document.asp">
+-great overview of javascript DOM syntax
+
+<a href='https://www.w3schools.com/js/js_htmldom_css.asp'>
+-to add an event, add an Event Listener
+  -syntax example (changes style on click)(goes in HTML):
+    <h1 id="id1">My Heading 1</h1>
+    <button type="button" onclick="document.getElementById('id1').style.color = 'red'">Click Me!</button>
+  -another example:
+    <h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
+
+<a href="https://www.w3schools.com/js/js_htmldom_animate.asp">
+-resource for how to create a basic webpage animation with javascript
+
+<a href="https://www.w3schools.com/js/js_htmldom_events.asp">
+-syntax example (calling a function via an event handler):
+  <h1 onclick="changeText(this)">Click on this text!</h1>
+  <script>
+    function changeText(id) { 
+      id.innerHTML = "Ooops!";
+    }
+  </script>
+-use event attributes to assign to elements 
+  -syntax example (assigning onclick to button):
+    <button onclick="displayDate()">Try it</button>
+-assign events to HTML elements via DOM
+  -syntax example (onclick event to button):
+    <script>
+      document.getElementById("myBtn").onclick = displayDate;
+    </script>
+-onload and onunload events are triggered when user loads or unloads the page, respectively
+  -example:
+    <body onload="checkCookies()">
+-onchange event often used to validate input fields
+  -example:
+    <input type="text" id="fname" onchange="upperCase()">
+    -upperCase() function will happen when user changes the content of an input field
+-onmouseover and onmouseout are events that will change something when the user mouses over content
+-see more events in link above
+
+<a href="https://www.w3schools.com/js/js_htmldom_eventlistener.asp">
+-adding an event listener
+  -syntax example (fires when user clicks a button):
+    document.getElementById("myBtn").addEventListener("click", displayDate);
+-addEventListener() attaches to an element and does not overwrite existing event handlers (the limitation to not using addEventListener)
+-you can add multiple event listeners to one element - even the same type of event listener
+-event listeners can be added to any DOM element, not just HTML objects
+-remove event listeners with removeEventListener()
+-addEventListener syntax decoded:
+  -addEventListener(EventInQuestion(e.g.click), FunctionCalledWhenEventHappens, OptionalBooleanForCapturing/Bubbling)
+    -note that you don't use 'on' in front of the event - just put 'click', not 'onclick'
+  -example:
+    element.addEventListener("click", function(){ alert("Hello World!"); });
+  -to pass parameters within the called function, use an anonymous function:
+    element.addEventListener("click", function(){ myFunction(p1, p2); });
+-bubbling and capturing are used to determine the priority of events when two elements both have events that will trigger
+  -in bubbling, inner element is first; in capturing, outer element is first
+  -bubbling is the default and is equal to boolean 'false'
+-lots more at the link above
+
+<a href="https://www.w3schools.com/js/js_htmldom_navigation.asp">
+-within HTML, you can navigate using DOM nodes
+-everything in an HTML doc is a node: the document, the elements, the text within elements, and all comments(!)
+<img src="DOMtree.gif">
+-image above (saved in Notes folder and available on link) shows the parent relationships for each node
+-note that elements don't innately have text.. but they may have children text nodes that can be accessed with innerHTML
+-innerHTML accesses the nodeValue of the first child
+-can also access the first child with the following syntax:
+  var myTitle = document.getElementById("demo").childNodes[0].nodeValue;
+-nodeName specifies the name of a node and:
+  -is read-only
+  -nodeName of an element node is the same as the tag name
+  -nodeName of an attribute is the attribute name
+  -nodeName of a text node is #text
+  -nodeName of the document as a whole is #document
+-nodeValue can also be used to access a node and:
+  -nodeValue of an element is null
+  -nodeValue of a text node is the text itself
+  -nodeValue for attribute nodes is the attribute itself
+-nodeType is read-only and returns the type of the node
+  -the type will be a numerical value - see a list of some at the link above
+
+<a href="https://www.w3schools.com/js/js_htmldom_nodes.asp">
+-all about creating and removing nodes (elements)
+-to add a new element to the DOM, create the element node first, then append it to an existing element
+  -syntax example: 
+    <div id="div1">
+      <p id="p1">This is a paragraph.</p>
+      <p id="p2">This is another paragraph.</p>
+    </div>
+    <script>
+      var para = document.createElement("p");
+      var node = document.createTextNode("This is new.");
+      para.appendChild(node);
+      var element = document.getElementById("div1");
+      element.appendChild(para);
+    </script>
+  -this syntax will append the new paragraph after the two existing paragraphs
+  -if you want to insert something before an existing element, use insertBefore():
+    <div id="div1">
+      <p id="p1">This is a paragraph.</p>
+      <p id="p2">This is another paragraph.</p>
+    </div>
+    <script>
+      var para = document.createElement("p");
+      var node = document.createTextNode("This is new.");
+      para.appendChild(node);
+      var element = document.getElementById("div1");
+      var child = document.getElementById("p1");
+      element.insertBefore(para, child);
+    </script>
+  -with insertBefore(), the first parameter is the node to be inserted; the second is the element that it will be inserted before
+-to remove an HTML element, you need to know the parent of the element
+  -syntax example:
+    <div id="div1">
+      <p id="p1">This is a paragraph.</p>
+      <p id="p2">This is another paragraph.</p>
+    </div>
+    <script>
+      var parent = document.getElementById("div1");
+      var child = document.getElementById("p1");
+      parent.removeChild(child);
+    </script>
+  -if you're not sure what the parent is, can use:
+    var child = document.getElementById("p1");
+    child.parentNode.removeChild(child);
+-to replace a DOM element, syntax example:
+  <div id="div1">
+    <p id="p1">This is a paragraph.</p>
+    <p id="p2">This is another paragraph.</p>
+  </div>
+  <script>
+    var para = document.createElement("p");
+    var node = document.createTextNode("This is new.");
+    para.appendChild(node);
+    var parent = document.getElementById("div1");
+    var child = document.getElementById("p1");
+    parent.replaceChild(para, child);
+  </script>
+
+
+
diff --git a/Notes/fromReading.txt b/Notes/fromReading.txt
new file mode 100644
index 000000000..9c98a2d4c
--- /dev/null
+++ b/Notes/fromReading.txt
@@ -0,0 +1,141 @@
+ES6 arrow function... => - look this up, allows anonymous function as variable (syntax: const variable = () => {...})
+
+Fun Fun Function Videos:
+-functions in JS are just values, same as numbers, strings, etc
+-a higher order function is a function that uses another function
+-filter
+  -works on arrays
+  - const var = thingToFilter.filter(function(itemToFilterWith) {
+      return itemToFilterWith.valueOfItem === 'whateverFilterYouWant';
+  });
+  -note the odd parens replacement - won't work without them that whateverFilterYouWant
+  -find does the same as filter, but only returns the first item (will make a new array with one element)
+-reject
+  -same syntax as filter, but it finds elements to kick out of the list
+-map
+  -similar to filter (works on arrays, similar syntax)
+  -instead of selecting/picking out items, it transforms them
+  - const var = arrayToMap.map(function(itemInArray) {
+      return itemInArray.valueWanted;
+      -this variation of map will take the value and list all of those in the new array
+  })
+-reduce
+  -very versatile tool
+  -syntax:
+    const var = arrayName.reduce(function(sum, iteratedObject) {
+      return sum + iteratedObject.propertyToTotal;
+    }, 0)
+  -slightly different from other higher functions so far 
+    -takes 2 parameters: first is the sum or whatever, second is what will be whatever is iterated 
+    -needs a value directly after the function to start sum at (often 0, but can be object, number, whatever)
+
+JavaScript and DOM
+<a href="https://www.w3schools.com/js/js_htmldom_html.asp">
+-document.write() can be used to write directly to the HTML output stream
+  -example syntax (as it would appear in an HTML doc): 
+    <script>
+      document.write(Date());
+    </script
+  -note that if you do this after the page has loaded, it will overwrite the content of the page
+-to alter HTML, use .innerHTML
+  -example syntax:
+    document.getElementById(id).innerHTML = new HTML
+    -note that var element = document.getElementById(id) can be used to replace that text (see examples)
+-to change the value of an HTML attribute, <...>.attribute = new value
+  -example syntax: 
+    document.getElementById(id).attribute = new value
+    -note that this isn't literally 'attribute' - the name of the attribute goes there
+<a href="https://www.w3schools.com/js/exercise_js.asp?filename=exercise_js_dom_html2">
+-to change an element using tag instead of ID:
+  -example syntax: 
+    document.getElementsByTagName('p')[0].innerHTML = 'New Text';
+    -the number in brackets tells it *which* of those tags to change... so [0] will change the first, and so on...
+    -without brackets, will apply to all instances of that element
+-to change an element using class instead of tag or ID:
+  -example syntax:
+    document.getElementsByClassName('class')[0].innerHTML = <...>;
+    -number in brackets tells it which of the class instances to change
+-to change a style element, use <...>.style.attributename = <...>
+  -example syntax: 
+    document.getElementById("demo").style.color = "red";
+<a href="https://www.w3schools.com/js/js_htmldom_elements.asp">
+-to find an element within an element, use variables
+  -example syntax (finds id main, then all p elements within main):
+    var x = document.getElementById("main");
+    var y = x.getElementsByTagName("p");
+-to find an element by a particular CSS selector:
+  -example syntax: 
+    var x = document.querySelectorAll("p.intro");
+-to find an element by object collection: 
+  -example syntax (finds all forms with frm1 id (should only be one)):
+    var x = document.forms["frm1"];
+    var text = "";
+    var i;
+    for (i = 0; i < x.length; i++) {
+      text += x.elements[i].value + "<br>";
+    }
+    document.getElementById("demo").innerHTML = text;
+  -for a list of the objects that can be found this way, see above link (toward bottom)
+<a href="https://www.w3schools.com/js/js_htmldom.asp">
+-overview of DOM reference
+<a href="https://www.w3schools.com/js/js_htmldom_document.asp">
+-great overview of javascript DOM syntax
+<a href='https://www.w3schools.com/js/js_htmldom_css.asp'>
+-to add an event, add an Event Listener
+  -syntax example (changes style on click)(goes in HTML):
+    <h1 id="id1">My Heading 1</h1>
+    <button type="button" onclick="document.getElementById('id1').style.color = 'red'">Click Me!</button>
+  -another example:
+    <h1 onclick="this.innerHTML = 'Ooops!'">Click on this text!</h1>
+<a href="https://www.w3schools.com/js/js_htmldom_animate.asp">
+-resource for how to create a basic webpage animation with javascript
+<a href="https://www.w3schools.com/js/js_htmldom_events.asp">
+-syntax example (calling a function via an event handler):
+  <h1 onclick="changeText(this)">Click on this text!</h1>
+  <script>
+    function changeText(id) { 
+      id.innerHTML = "Ooops!";
+    }
+  </script>
+-use event attributes to assign to elements 
+  -syntax example (assigning onclick to button):
+    <button onclick="displayDate()">Try it</button>
+-assign events to HTML elements via DOM
+  -syntax example (onclick event to button):
+    <script>
+      document.getElementById("myBtn").onclick = displayDate;
+    </script>
+-onload and onunload events are triggered when user loads or unloads the page, respectively
+  -example:
+    <body onload="checkCookies()">
+-onchange event often used to validate input fields
+  -example:
+    <input type="text" id="fname" onchange="upperCase()">
+    -upperCase() function will happen when user changes the content of an input field
+-onmouseover and onmouseout are events that will change something when the user mouses over content
+-see more events in link above
+<a href="https://www.w3schools.com/js/js_htmldom_eventlistener.asp">
+-adding an event listener
+  -syntax example (fires when user clicks a button):
+    document.getElementById("myBtn").addEventListener("click", displayDate);
+-addEventListener() attaches to an element and does not overwrite existing event handlers (the limitation to not using addEventListener)
+-you can add multiple event listeners to one element - even the same type of event listener
+-event listeners can be added to any DOM element, not just HTML objects
+-remove event listeners with removeEventListener()
+-addEventListener syntax decoded:
+  -addEventListener(EventInQuestion(e.g.click), FunctionCalledWhenEventHappens, OptionalBooleanForCapturing/Bubbling)
+    -note that you don't use 'on' in front of the event - just put 'click', not 'onclick'
+  -example:
+    element.addEventListener("click", function(){ alert("Hello World!"); });
+  -to pass parameters within the called function, use an anonymous function:
+    element.addEventListener("click", function(){ myFunction(p1, p2); });
+-bubbling and capturing are used to determine the priority of events when two elements both have events that will trigger
+  -in bubbling, inner element is first; in capturing, outer element is first
+  -bubbling is the default and is equal to boolean 'false'
+-lots more at the link above
+<a href="https://www.w3schools.com/js/js_htmldom_navigation.asp">
+-within HTML, you can navigate using DOM nodes
+
+
+
+
diff --git a/Notes/jsDOMpractice.html b/Notes/jsDOMpractice.html
new file mode 100644
index 000000000..d0f9c1f0b
--- /dev/null
+++ b/Notes/jsDOMpractice.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <body>
+    <!--Example of using a javascript script to write the date to HTML-->
+    <script>
+      document.write(Date());
+    </script>
+
+    <!--Example of changing existing p element-->
+    <p id="p1">Hello World!</p>
+    <script>
+      document.getElementById('p1').innerHTML = 'New text!';
+    </script>
+
+    <!--Example of changing existing h1 element using a variable-->
+    <h1 id="id01">Old Heading</h1>
+    <script>
+      var element = document.getElementById('id01');
+      element.innerHTML = 'New Heading';
+    </script>
+
+    <!--Example of changing the value of an HTML attribute with JS-->
+    <img id="myImage" src="smiley.gif" />
+    <script>
+      document.getElementById('myImage').src = 'landscape.jpg';
+    </script>
+  </body>
+</html>
diff --git a/Week1/homework/app.js b/Week1/homework/app.js
index a9b5f75d8..16b0bb512 100644
--- a/Week1/homework/app.js
+++ b/Week1/homework/app.js
@@ -3,9 +3,131 @@
 {
   const bookTitles = [
     // Replace with your own book titles
-    'harry_potter_chamber_secrets',
+    'kushiels_avatar',
+    'dragons_of_autumn_twilight',
+    'basho_the_complete_haiku',
+    'the_wit_and_wisdom_of_mark_twain',
+    'the_waste_land_and_other_poems',
+    'popco',
+    'kushiels_scion',
+    'neverwhere',
+    'the_sandman',
+    'the_coldfire_trilogy',
   ];
 
+  const favoriteBooks = {
+    popco: {
+      title: 'Popco',
+      language: 'English',
+      author: 'Scarlett Thomas',
+      cover: 'https://images.gr-assets.com/books/1347962344l/4285468.jpg',
+    },
+    kushiels_avatar: {
+      title: "Kushiel's Avatar",
+      language: 'English',
+      author: 'Jacqueline Carey',
+      cover: 'https://images.gr-assets.com/books/1233366080l/40223.jpg',
+    },
+    kushiels_scion: {
+      title: "Kushiel's Scion",
+      language: 'English',
+      author: 'Jacqueline Carey',
+      cover: 'https://images.gr-assets.com/books/1344265086l/153007.jpg',
+    },
+    neverwhere: {
+      title: 'Neverwhere',
+      language: 'English',
+      author: 'Neil Gaiman',
+      cover: 'https://images.gr-assets.com/books/1523573978l/39821861.jpg',
+    },
+    the_wit_and_wisdom_of_mark_twain: {
+      title: 'The Wit And Wisdom Of Mark Twain',
+      language: 'English',
+      author: 'Mark Twain',
+      cover: 'https://images.gr-assets.com/books/1388209857l/2965.jpg',
+    },
+    the_waste_land_and_other_poems: {
+      title: 'The Waste Land and Other Poems',
+      language: 'English',
+      author: 'T.S. Eliot',
+      cover: 'https://images.gr-assets.com/books/1372992691l/400412.jpg',
+    },
+    dragons_of_autumn_twilight: {
+      title: 'Dragons of Autumn Twilight',
+      language: 'English',
+      author: 'Margaret Weis and Tracy Hickman',
+      cover: 'https://images.gr-assets.com/books/1220752967l/1082252.jpg',
+    },
+    basho_the_complete_haiku: {
+      title: 'Basho: The Complete Haiku',
+      language: 'English, Japanese',
+      author: 'Matsuo Basho',
+      cover: 'https://images.gr-assets.com/books/1371446834l/2183600.jpg',
+    },
+    the_coldfire_trilogy: {
+      title: 'The Coldfire Trilogy',
+      language: 'English',
+      author: 'C.S. Friedman',
+      cover: 'https://images.gr-assets.com/books/1437435124l/36159.jpg',
+    },
+    the_sandman: {
+      title: 'The Sandman',
+      language: 'English',
+      author: 'Neil Gaiman',
+      cover: 'https://images.gr-assets.com/books/1352657721l/16142737.jpg',
+    },
+  };
+
   // Replace with your own code
-  console.log(bookTitles);
+  // console.log(bookTitles);
+
+  function displayList(titles) {
+    const list = document.createElement('ul'); // creates list
+    list.setAttribute('id', 'books'); // adding id of books
+    document.body.appendChild(list);
+    // list.innerHTML = 'My favorite books, with authors and languages.';
+
+    for (let i = 0; i < titles.length; i++) {
+      const titleList = document.createElement('li'); // creates each title item (li)
+      titleList.setAttribute('id', titles[i]); // sets id of each item of the list
+      list.appendChild(titleList); // adds item (li) to list(ul)
+      const titleKey = titles[i]; // id for object call
+      titleList.innerHTML += favoriteBooks[titleKey].title; // adds title of each to list
+      document.write('<br>');
+      // const imageLink = '' + favoriteBooks[titleKey].cover + '';
+      // titleList.appendChild(imageLink);
+      const myNewImage = document.createElement('img');
+      myNewImage.src = '' + favoriteBooks[titleKey].cover + '';
+      myNewImage.id = '' + titleKey + 'cover';
+
+      document.body.appendChild(myNewImage);
+      /* document.getElementById(titleKey).style.backgroundRepeat = 'no-repeat';
+      document.getElementById(titleKey).style.backgroundImage = 'width: 20%';
+      document.getElementById(titleKey).style.backgroundImage = 'height: auto';
+      document.getElementById(titleKey).style.padding = '380px 250px 250px 50px'; */
+      // document.getElementById(titleKey).style.listStyleImage = imageLink; // attempts to add covers as list bullets
+      /* const bookFacts = document.createElement('ul'); // creating a new list for each title to hold author and language
+      bookFacts.setAttribute('id', 'aandllist');
+      document.getElementById(titleKey).appendChild(bookFacts); // adding bookFacts list as child of each list item (li)
+      document.getElementById('aandllist').style.listStyle = 'none';
+      const authAndLang = document.createElement('li'); // creating variable for other info
+      bookFacts.appendChild(authAndLang); // adds authAndLang item to bookFacts list
+      authAndLang.innerHTML +=
+        'Author: ' +
+        favoriteBooks[titleKey].author +
+        '; ' +
+        'Language: ' +
+        favoriteBooks[titleKey].language; */
+      titleList.innerHTML +=
+        '<br><br>The author of ' +
+        favoriteBooks[titleKey].title +
+        ' is ' +
+        favoriteBooks[titleKey].author +
+        ', and the book is in ' +
+        favoriteBooks[titleKey].language +
+        '.';
+    }
+  }
+
+  displayList(bookTitles);
 }
diff --git a/Week1/homework/index.html b/Week1/homework/index.html
index b22147cd1..425b830e9 100644
--- a/Week1/homework/index.html
+++ b/Week1/homework/index.html
@@ -1 +1,13 @@
-<!-- replace this with your HTML content -->
\ No newline at end of file
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" type="text/css" href="style.css" />
+  </head>
+  <body>
+    <div id="favbooks">
+      <h3>My Favorite Books, with Authors and Language</h3>
+      <script src="app.js"></script>
+    </div>
+  </body>
+</html>
diff --git a/Week1/homework/style.css b/Week1/homework/style.css
index bab13ec23..d4d4f4eca 100644
--- a/Week1/homework/style.css
+++ b/Week1/homework/style.css
@@ -1 +1,4 @@
-/* add your styling here */
\ No newline at end of file
+img {
+  width: 1px;
+  height: 3px;
+}
diff --git a/package-lock.json b/package-lock.json
index e89e9916d..2b047f93a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2221,12 +2221,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -2241,17 +2243,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -2368,7 +2373,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -2380,6 +2386,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -2394,6 +2401,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -2401,12 +2409,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -2425,6 +2435,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -2505,7 +2516,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -2517,6 +2529,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -2638,6 +2651,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",