foocoding · chichiglacierz · Aug 9, 2019
diff --git a/Week1/homework/app.js b/Week1/homework/app.js
@@ -1,11 +1,129 @@
 'use strict';
+document.body.style.backgroundColor = '#40E0D0';
 
-{
-  const bookTitles = [
-    // Replace with your own book titles
-    'harry_potter_chamber_secrets',
-  ];
+// array of books containing 10 strings. lowercase
+const bookNames = [
+  'going_down_river_road',
+  'the_river_and_the_source',
+  "salem's_lot",
+  'americanah',
+  'things_fall_apart',
+  'animal_farm',
+  'the_river_between',
+  'the_dead_stay_dumb',
+  'arrow_of_god',
+  'a_song_of_ice_and_fire',
+];
 
-  // Replace with your own code
-  console.log(bookTitles);
+const showBooks = Object.values(bookNames);
+console.log(showBooks);
+
+// the part below not showing on console on chrome
+// function printBookNames(bookNames) {
+//   console.table(bookNames);
+// }
+
+//printing out the string of the above array:
+for (let i = 0; i < bookNames.length; i++) {
+  console.log(bookNames[i]);
+}
+
+const header = document.querySelector('header');
+const h1 = header.querySelector('h1'); //getting h1 elem inside of header
+h1.textContent = 'Loading Book Recommendations ..';
+
+const p1 = header.querySelector('p');
+p1.id = 'p1';
+p1.innerHTML = '<i>Some of the books I have read over the past years include the following</i>';
+
+// eslint-disable-next-line no-unused-vars
+// 1.3. Make a function (or functions) that generate a ul with li elements for each book ID in the array using a for loop.
+
+// 1.4 create object containing details of each book:
+const bookDetails = {
+  going_down_river_road: {
+    title: 'Going Down River Road',
+    author: 'Meja Mwangi',
+    language: 'English',
+    published: 1976,
+  },
+
+  the_river_and_the_source: {
+    title: 'The River And The Source',
+    author: 'Margaret Ogola',
+    language: 'English',
+    published: 1994,
+  },
+
+  homing_in: {
+    title: 'Salem´s Lot',
+    author: 'Stephen King',
+    language: 'English',
+    published: 1975,
+  },
+
+  americanah: {
+    title: 'Americanah',
+    author: 'Chimamanda Ngozi Adichie',
+    language: 'English',
+    published: 2013,
+  },
+
+  things_fall_apart: {
+    title: 'Things Fall Apart',
+    author: 'Chinua Achebe',
+    language: 'English',
+    published: 1958,
+  },
+
+  animal_farm: {
+    title: 'Animal Farm',
+    author: 'George Orwell',
+    language: 'English',
+    published: 1945,
+  },
+
+  the_river_between: {
+    title: 'The River Between',
+    author: 'Ngugi wa Thiong´o',
+    language: 'English',
+    published: 1965,
+  },
+
+  the_dead_stay_dumb: {
+    title: 'The Dead Stay Dumb',
+    author: 'James Hardley Chase',
+    language: 'English',
+    published: 1939,
+  },
+
+  fictitious_book: {
+    title: 'Arrow of God',
+    author: 'Chinua Achebe',
+    language: 'English',
+    published: 1964,
+  },
+
+  and_another_one: {
+    title: 'A Song of Ice and Fire',
+    author: 'George R.R. Martin',
+    language: 'English',
+    published: 1996,
+  },
+};
+console.log(Object.keys(bookDetails));
+
+const createBookList = document.createElement('ul');
+for (let key in bookDetails) {
+  let li = document.createElement('li');
+  li.id = 'book';
+  //let  = document.createElement('p');
+  li.innerText = bookDetails[key].title;
+  li.innerText = bookDetails[key].author;
+  li.innerText = bookDetails[key].language;
+  li.innerText = bookDetails[key].published;
+  createBookList.appendChild(li);
+  document.getElementById('book-list').appendChild(createBookList);
 }
+
+console.log(createBookList);
diff --git a/Week1/homework/example.js b/Week1/homework/example.js
@@ -0,0 +1,85 @@
+function test(param) {}
+const something = function() {};
+
+const arrowFunc = () => {};
+
+const ages = [21, 41, 5, 1, 6, 4, 7];
+
+const lessThan10 = [];
+
+for (age of ages) {
+  if (age < 10) {
+    lessThan10.push(age);
+  }
+}
+
+/* 
+    I want console to show:
+        Book title is Deathly Hallows
+        Book author is JKRowling
+        Book price is 23.12
+*/
+const harryPotter = { title: 'Deathly Hallows', author: 'JKRowling', price: 23.12 };
+
+const gabe = { age: 30 };
+gabe.age; // 30
+gabe['age']; // 30
+const something = 'age';
+gabe[something]; // 30
+
+for (let key in harryPotter) {
+  console.log(`Book ${key} is ${harryPotter[key]}`);
+}
+
+// Book title is Deathly Hallows
+// Book author is JKRowling
+// Book price is 23.12
+
+// const lessThan10Alt = ages.filter(age => {
+//   // boolean---true or false
+//   // if you return true--- it will be in the new array
+//   // if you return false--- it won't
+//   return age < 10; // true or false
+// });
+
+const lessThan10Alt = ages.filter(age => age < 10);
+
+const lessThan10Alt = ages.filter(age => {
+  return age < 10;
+});
+const lessThan10Alt = ages.filter(function(age) {
+  return age < 10;
+});
+const lessThan10Alt = ages.filter(function lessThan10(age) {
+  return age < 10;
+});
+
+lessThan10(102);
+
+function lessThan10(age) {
+  return age < 10;
+}
+const lessThan10Alt = ages.filter(lessThan10);
+
+const spotifUsers = [
+  { username: 'luxor123', userId: '1235' },
+  { username: 'monkey', userId: '6245' },
+  { username: 'spsa22', userId: '858393' },
+];
+
+// console.log all of the userId's
+console.log(spotifUsers[0].userId);
+console.log(spotifUsers[1].userId);
+console.log(spotifUsers[2].userId);
+
+// use a forEach to do the same thing
+
+spotifUsers.forEach(userObj => {
+  console.log(userObj.userId);
+});
+/*
+    Will print:the user id´s
+        1235
+        6245
+        858393
+*/
diff --git a/Week1/homework/index.html b/Week1/homework/index.html
@@ -1 +1,23 @@
-<!-- replace this with your HTML content -->
+<!-- replace this with your HTML content -->
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Books: Javascript 2 Exercise 1</title>
+  </head>
+  <body>
+    <header id="header">
+      <h1 id="h1"></h1>
+      <p></p>
+      <hr />
+    </header>
+    <main>
+      <div id="book-list"></div>
+    </main>
+    <script type="text/javascript" src="app.js"></script>
+  </body>
+
+  <br />
+  <footer>
+    <p>&copy; 2019</p>
+  </footer>
+</html>
diff --git a/Week1/homework/pictures/Going-Down-River-Road.jpg b/Week1/homework/pictures/Going-Down-River-Road.jpg
diff --git a/Week1/homework/pictures/a_song_of_ice_and_fire.jpg b/Week1/homework/pictures/a_song_of_ice_and_fire.jpg
diff --git a/Week1/homework/pictures/americanah.jpg b/Week1/homework/pictures/americanah.jpg
diff --git a/Week1/homework/pictures/animal_farm.jpeg b/Week1/homework/pictures/animal_farm.jpeg
diff --git a/Week1/homework/pictures/arrow_of_god.jpg b/Week1/homework/pictures/arrow_of_god.jpg
diff --git a/Week1/homework/pictures/the_dead.jpg b/Week1/homework/pictures/the_dead.jpg
diff --git a/Week1/homework/pictures/the_river.jpg b/Week1/homework/pictures/the_river.jpg
diff --git a/Week1/homework/pictures/things_fall_apart.jpg b/Week1/homework/pictures/things_fall_apart.jpg
diff --git a/Week1/homework/style.css b/Week1/homework/style.css
@@ -1 +1,12 @@
-/* add your styling here */
+/* add your styling here */
+* {
+  margin: auto;
+}
+body {
+  background-color: turquoise;
+}
+#book-list > * {
+  display: grid;
+  grid-column: 50%, 50%;
+  grid-row: 50vh, 50vh;
+}