Build reading list app with dynamic rendering, images, and conditional styling

MacDonald91 · MacDonald91 · commit 9771eeb33c18 · 2026-03-18T14:54:33.000Z
diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <title>Title here</title>
+    <title>Reading List</title>
   </head>
   <body>
     <div id="content">
diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js
@@ -21,3 +21,31 @@ const books = [
   },
 ];
 
+const list = document.getElementById("reading-list");
+
+books.forEach((book) => {
+  const li = document.createElement("li");
+
+  // Add title + author (text must exist for tests)
+  li.textContent = `${book.title} by ${book.author}`;
+
+  // Create image
+  const img = document.createElement("img");
+  img.src = book.bookCoverImage;
+
+  // IMPORTANT: ensures exact HTML match for tests
+  img.setAttribute("src", book.bookCoverImage);
+
+  // Add image to list item
+  li.appendChild(img);
+
+  // Set background colour based on read status
+  if (book.alreadyRead) {
+    li.style.backgroundColor = "green";
+  } else {
+    li.style.backgroundColor = "red";
+  }
+
+  // Add to page
+  list.appendChild(li);
+});
