Refactor placeImage() to be part of generateItems()

foocoding · nuanprae · Feb 15, 2021 · Feb 16, 2021 · Feb 16, 2021 · Feb 16, 2021
commit dbfc4c43cd6922e840756edf68ab4e9433579937
diff --git a/Week1/homework/app.js b/Week1/homework/app.js
@@ -88,9 +88,6 @@
       ul.appendChild(li);
     }
   };
-
-  // Now change the function from step 1.3 that you used to display the book ID's in a list
-  // to take the actual information about the book from the object and display that.
   const generateHeader = title => {
     const header = document.createElement('h1');
     header.innerHTML = title;
@@ -99,38 +96,35 @@
   };
   generateHeader("Guardians of Ga'Hoole");
 
-  const generateItems = obj => {
+  // generate li that includes info and book cover for each li (appended to one ul)
+  const generateItems = (info, images) => {
     const ul = document.createElement('ul');
     document.body.appendChild(ul);
-    // loop over keys from obj (turned into array of keys)
-    for (const key of Object.keys(obj)) {
+    // loop over bookObj and append each li (with info) to ul
+    for (const key of Object.keys(info)) {
       const li = document.createElement('li');
       ul.appendChild(li);
       li.setAttribute('id', key);
 
       const heading = document.createElement('h1');
       li.appendChild(heading);
-      heading.innerHTML = obj[key].title;
+      heading.innerHTML = info[key].title;
 
       const subHeading1 = document.createElement('h2');
       li.appendChild(subHeading1);
-      subHeading1.innerHTML = `Language: ${obj[key].language}`;
+      subHeading1.innerHTML = `Language: ${info[key].language}`;
 
       const subHeading2 = document.createElement('h2');
       li.appendChild(subHeading2);
-      subHeading2.innerHTML = `Author: ${obj[key].author}`;
+      subHeading2.innerHTML = `Author: ${info[key].author}`;
     }
-  };
-  generateItems(guardiansOfGahooleSeries);
-
-  // write a function which places an image at the corresponding li element.
-  const placeImage = images => {
+    // loop over bookCovers object and display the corresponding book cover for each li
     for (const key of Object.keys(images)) {
       const img = document.createElement('img');
       img.src = images[key];
       img.alt = key;
       document.getElementById(key).appendChild(img);
     }
   };
-  placeImage(bookCovers);
+  generateItems(guardiansOfGahooleSeries, bookCovers);
 }
diff --git a/Week1/homework/style.css b/Week1/homework/style.css
@@ -11,7 +11,7 @@ body {
 }
 ul {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 2em;
   margin: 1em;
 }
@@ -31,5 +31,5 @@ img {
   color: #f0e6a9;
   font-size: 3rem;
   text-align: center;
-  margin-top: 0.5em;
+  margin-top: 0.3em;
 }