Query selector not working

foocoding · Catsudemo · Jun 16, 2019 · Jun 19, 2019 · Jun 22, 2019 · Jun 22, 2019
commit 0ab338508b4479e52540e5d826c1fb4042282a73
diff --git a/Week1/homework/app.js b/Week1/homework/app.js
@@ -1,11 +1,164 @@
-'use strict';
+// 'use strict';
+// const bookTitles = [
+//   'memoirs_of_a_geisha',
+//   'enma_the_immortal',
+//   'confessions',
+//   'coin_locker_babies',
+//   'beauty_and_sadness',
+//   'house_of_sleeping_beauties',
+//   'empress',
+//   'the_next_continent',
+//   'underground',
+//   'after_dark',
+// ];
 
-{
-  const bookTitles = [
-    // Replace with your own book titles
-    'harry_potter_chamber_secrets',
-  ];
+const booksInfo = {
+  memoirs_of_a_geisha: {
+    properties: {
+      title: 'Memoirs of a Geisha',
+      language: 'English',
+      author: 'Arthur Golden',
+    },
+  },
+  enma_the_immortal: {
+    properties: {
+      title: 'Enma the Immortal',
+      language: 'English',
+      author: 'Fumi Nakamura',
+    },
+  },
+  confessions: {
+    properties: {
+      title: 'Confessions',
+      language: 'Japanese',
+      author: 'Kanae Minato',
+    },
+  },
+  coin_locker_babies: {
+    properties: {
+      title: 'Coin Locker Babies',
+      language: 'Japanese',
+      author: 'Ryu Murakami',
+    },
+  },
+  beauty_and_sadness: {
+    properties: {
+      title: 'Beauty and Sadness',
+      language: 'Japanese',
+      author: 'Yasunari Kawabata',
+    },
+  },
+  house_of_sleeping_beauties: {
+    properties: {
+      title: 'House of Sleeping Beauties',
+      language: 'Japanese',
+      author: 'Yasunari Kawabata',
+    },
+  },
+  empress: {
+    properties: {
+      title: 'Empress',
+      language: 'English',
+      author: 'Shan Sa',
+    },
+  },
+  the_next_continent: {
+    properties: {
+      title: 'The Next Continent',
+      language: 'english',
+      author: 'Issui Ogawa',
+    },
+  },
+  underground: {
+    properties: {
+      title: 'Underground',
+      language: 'Japanese',
+      author: 'Haruki Murakami',
+    },
+  },
+  after_dark: {
+    properties: {
+      title: 'After Dark',
+      language: 'japanese',
+      author: 'Haruki Murakami',
+    },
+  },
+};
 
-  // Replace with your own code
-  console.log(bookTitles);
+// 1.3
+// window.onload = () => {
+// const myBookList = ['Book1', 'Book2', 'Book3', 'Book4', 'Book5', 'Book6'];
+
+//   const myBookSpot = document.querySelector('#bookList');
+
+//   const ol = document.createElement('ol');
+
+//   for (const book of myBookList) {
+//     const li = document.createElement('li');
+//     li.appendChild(document.createTextNode(book));
+//     ol.appendChild(li);
+//   }
+//   myBookSpot.appendChild(ol);
+// };
+
+window.onload = () => {
+  const myBookSpot = document.querySelector('#bookList');
+
+  const div = document.createElement('div');
+  div.innerText = "This is a list of Catt's favourite books";
+
+  for (book in booksInfo) {
+    const eachBookDiv = document.createElement('div');
+    eachBookDiv.id = book;
+    const name = document.createElement('h4');
+    name.innerText = booksInfo[book].properties.title;
+    eachBookDiv.appendChild(name);
+
+    const ul = document.createElement('ul');
+
+    const author = document.createElement('li');
+    author.innerText = booksInfo[book].properties.author;
+    ul.appendChild(author);
+
+    const language = document.createElement('li');
+    language.innerText = booksInfo[book].properties.language;
+    ul.appendChild(language);
+
+    eachBookDiv.appendChild(ul);
+    div.appendChild(eachBookDiv);
+
+    myBookSpot.appendChild(div);
+  }
+};
+console.log('loaded');
+
+const bookImages = [
+  { memoirs_of_a_geisha: 'book_covers/memoirs_of_a_geisha_img.jpg' },
+  { enma_the_immortal: 'book_covers/enma_the_immortal_img.jpg' },
+  { confessions: 'book_covers/confessions_img.jpg' },
+  { coin_locker_babies: 'book_covers/coin_locker_babies_img.jpg' },
+  { beauty_and_sadness: 'book_covers/beauty_and_sadness_img.jpg' },
+  { house_of_sleeping_beauties: 'book_covers/house_of_sleeping_beauties_img.jpg' },
+  { empress: 'book_covers/empress_img.jpg' },
+  { the_next_continent: 'book_covers/the_next_continent_img.jpg' },
+  { underground: 'book_covers/underground_img.jpg' },
+  { after_dark: 'book_covers/after_dark_img.jpg' },
+];
+
+// function addBookImages(bookPics) {
+//   const length = bookPics.length;
+//   for (let i = 0; i < length; i++) {
+//     console.log(i);
+//     // document.querySelector(bookPics.pic)
+//   }
+// }
+// addBookImages(bookImages);
+// console.log(bookImages);
+
+for (image in bookImages) {
+  const imageID = Object.keys(bookImages[image])[0];
+  const queryID = '#' + imageID;
+  const lookFor = document.querySelector(queryID);
+
+  console.log(imageID, lookFor, queryID, document.querySelector('#confessions'));
 }
diff --git a/Week1/homework/index.html b/Week1/homework/index.html
@@ -1 +1,15 @@
-<!-- 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" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <title>Foo Coding Book Array</title>
+  </head>
+  <body>
+    <h2>Book list</h2>
+    <div id="bookList"></div>
+    <script src="app.js"></script>
+    <div id="div1">I'm the next div</div>
+  </body>
+</html>