diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html
index dbdb0f471..88102fc1f 100644
--- a/Sprint-3/reading-list/index.html
+++ b/Sprint-3/reading-list/index.html
@@ -4,7 +4,7 @@
- Title here
+ Reading List
diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js
index 6024d73a0..e7945b5b1 100644
--- 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);
+});
\ No newline at end of file