Add array, object containing book info and function listItems

foocoding · nuanprae · Feb 15, 2021 · Feb 16, 2021 · Feb 16, 2021 · Feb 16, 2021
commit 02c6a13573bd46dbeeb0c32336c2d2c51889e941
diff --git a/Week1/homework/app.js b/Week1/homework/app.js
@@ -2,10 +2,93 @@
 
 {
   const bookTitles = [
-    // Replace with your own book titles
-    'harry_potter_chamber_secrets',
+    'the_capture',
+    'the_journey',
+    'the_rescue',
+    'the_siege',
+    'the_shattering',
+    'the_burning',
+    'the_hatchling',
+    'the_outcast',
+    'the_first_collier',
+    'the_coming_of_hoole',
   ];
 
-  // Replace with your own code
-  console.log(bookTitles);
+  const guardiansOfGahooleSeries = {
+    the_capture: {
+      title: 'The Capture',
+      language: 'English',
+      author: 'Kathryn Lasky',
+    },
+    the_journey: {
+      title: 'The Journey',
+      language: 'English',
+      author: 'Kathryn Lasky',
+    },
+    the_rescue: {
+      title: 'The Rescue',
+      language: 'English',
+      author: 'Kathryn Lasky',
+    },
+    the_siege: {
+      title: 'The Siege',
+      language: 'English',
+      author: 'Kathryn Lasky',
+    },
+    the_shattering: {
+      title: 'The Shattering',
+      language: 'English',
+      author: 'Kathryn Lasky',
+    },
+    the_burning: {
+      title: 'The Burning',
+      language: 'English',
+      author: 'Kathryn Lasky',
+    },
+    the_hatchling: {
+      title: 'The Hatchling',
+      language: 'English',
+      author: 'Kathryn Lasky',
+    },
+    the_outcast: {
+      title: 'The Outcast',
+      language: 'English',
+      author: 'Kathryn Lasky',
+    },
+    the_first_collier: {
+      title: 'The First Collier',
+      language: 'English',
+      author: 'Kathryn Lasky',
+    },
+    the_coming_of_hoole: {
+      title: 'The Coming of Hoole',
+      language: 'English',
+      author: 'Kathryn Lasky',
+    },
+  };
+
+  const listItems = (keys, obj) => {
+    for (let i = 0; i < keys.length; i++) {
+      const ul = document.createElement('ul');
+      document.body.appendChild(ul);
+      const h1 = document.createElement('h1');
+      const li1 = document.createElement('li');
+      const li2 = document.createElement('li');
+      const id = keys[i];
+      const title = obj[id].title;
+      const language = obj[id].language;
+      const author = obj[id].author;
+      debugger;
+      // to access a variable in an object needs []
+      h1.innerHTML = title;
+      li1.innerHTML = `Language: ${language}`;
+      li2.innerHTML = `Author: ${author}`;
+
+      ul.appendChild(h1);
+      ul.appendChild(li1);
+      ul.appendChild(li2);
+    }
+  };
+
+  listItems(bookTitles, guardiansOfGahooleSeries);
 }
diff --git a/Week1/homework/index.html b/Week1/homework/index.html
@@ -1 +1,12 @@
-<!-- replace this with your HTML content -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>JavaScript2/1</title>
+</head>
+<body>
+  <script src="app.js"></script>
+</body>
+</html>