foocoding · nuanprae · Feb 15, 2021 · Feb 16, 2021 · Feb 16, 2021 · Feb 16, 2021
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -15,5 +15,6 @@
     "roverjs",
     "taalmap",
     "trollface"
-  ]
+  ],
+  "liveServer.settings.port": 5501
 }
diff --git a/Week1/homework/app.js b/Week1/homework/app.js
@@ -1,11 +1,133 @@
 'use strict';
 
 {
-  const bookTitles = [
-    // Replace with your own book titles
-    'harry_potter_chamber_secrets',
-  ];
+  // const bookTitles = [
+  //   '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);
+  // Make a function (or functions) that generate a ul with li elements for each book ID in the array using a for loop.
+  // const generateLi = array => {
+  //   const ul = document.createElement('ul');
+  //   document.body.appendChild(ul);
+  //   for (const element of array) {
+  //     const li = document.createElement('li');
+  //     li.innerHTML = element;
+  //     ul.appendChild(li);
+  //   }
+  // };
+
+  const books = {
+    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 bookCovers = {
+    the_journey: './img/thejourney.jpg',
+    the_rescue: './img/therescue.jpg',
+    the_siege: './img/thesiege.jpg',
+    the_shattering: './img/theshattering.jpg',
+    the_burning: './img/theburning.jpg',
+    the_hatchling: './img/thehatchling.jpg',
+    the_outcast: './img/theoutcast.jpg',
+    the_first_collier: './img/thefirstcollier.jpg',
+    the_coming_of_hoole: './img/thecomingofhoole.jpg',
+    the_capture: './img/thecapture.jpg',
+  };
+
+  // generate li that includes info and book cover for each li (appended to one ul)
+  const generateBooks = info => {
+    const section = document.createElement('section');
+    const ul = document.createElement('ul');
+    for (const key of Object.keys(info)) {
+      const li = document.createElement('li');
+      li.setAttribute('id', key);
+      const title = document.createElement('h2');
+      const language = document.createElement('h3');
+      const author = document.createElement('h3');
+
+      title.innerText = info[key].title;
+      language.innerText = `Language: ${info[key].language}`;
+      author.innerText = `Author: ${info[key].author}`;
+
+      li.appendChild(title);
+      li.appendChild(language);
+      li.appendChild(author);
+
+      ul.appendChild(li);
+    }
+    section.appendChild(ul);
+    document.body.appendChild(section);
+  };
+
+  const injectImage = images => {
+    for (const key of Object.keys(images)) {
+      const img = document.createElement('img');
+      img.src = images[key];
+      img.alt = key;
+
+      const secondLi = document.getElementById(key).children[1];
+      document.getElementById(key).insertBefore(img, secondLi);
+    }
+  };
+
+  // generate page
+  generateBooks(books);
+  injectImage(bookCovers);
 }
diff --git a/Week1/homework/img/theburning.jpg b/Week1/homework/img/theburning.jpg
diff --git a/Week1/homework/img/thecapture.jpg b/Week1/homework/img/thecapture.jpg
diff --git a/Week1/homework/img/thecomingofhoole.jpg b/Week1/homework/img/thecomingofhoole.jpg
diff --git a/Week1/homework/img/thefirstcollier.jpg b/Week1/homework/img/thefirstcollier.jpg
diff --git a/Week1/homework/img/thehatchling.jpg b/Week1/homework/img/thehatchling.jpg
diff --git a/Week1/homework/img/thejourney.jpg b/Week1/homework/img/thejourney.jpg
diff --git a/Week1/homework/img/theoutcast.jpg b/Week1/homework/img/theoutcast.jpg
diff --git a/Week1/homework/img/therescue.jpg b/Week1/homework/img/therescue.jpg
diff --git a/Week1/homework/img/theshattering.jpg b/Week1/homework/img/theshattering.jpg
diff --git a/Week1/homework/img/thesiege.jpg b/Week1/homework/img/thesiege.jpg
diff --git a/Week1/homework/index.html b/Week1/homework/index.html
@@ -1 +1,13 @@
-<!-- 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">
+  <link rel="stylesheet" href="style.css">
+  <title>JavaScript2/1</title>
+</head>
+<body>
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/Week1/homework/style.css b/Week1/homework/style.css
@@ -1 +1,33 @@
-/* add your styling here */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+body {
+  background-color: #843e22;
+  font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+  line-height: 1.5;
+  color: #843e22;
+}
+section {
+  margin: 1em;
+}
+ul {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
+  gap: 2em;
+  margin: 1em;
+}
+li {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #f0e6a9;
+  list-style: none;
+  padding: 0.5em 0;
+  font-size: 1.25rem;
+}
+img {
+  width: 60%;
+  margin-top: 1em;
+}