diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js
index 6024d73a0..d9978c4ff 100644
--- a/Sprint-3/reading-list/script.js
+++ b/Sprint-3/reading-list/script.js
@@ -1,4 +1,6 @@
// for the tests, do not modify this array of books
+
+
const books = [
{
title: "The Design of Everyday Things",
@@ -21,3 +23,45 @@ const books = [
},
];
+
+
+
+/**
+ * Render the reading list into the DOM.
+ * Expects an element with id="reading-list" in index.html (e.g.
)
+ */
+
+
+
+
+function readingList() {
+ const unorderedList = document.querySelector("#reading-list");
+
+ books.forEach((book) => {
+ const li = document.createElement("li");
+
+ // Image first
+ const img = document.createElement("img");
+ img.src = book.bookCoverImage;
+ img.alt = `${book.title} by ${book.author} — book cover`;
+ img.loading = "lazy";
+ li.appendChild(img);
+
+ // Text
+ const p = document.createElement("p");
+ p.innerText = `${book.title} by ${book.author}`;
+ li.appendChild(p);
+
+ // Inline background color (Jest reads this)
+ li.style.backgroundColor = book.alreadyRead ? "red" : "green";
+
+ unorderedList.appendChild(li);
+ });
+}
+
+// ---- FIX FOR JSDOM ----
+if (document.readyState === "loading") {
+ document.addEventListener("DOMContentLoaded", readingList);
+} else {
+ readingList();
+}
\ No newline at end of file