diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html
index dbdb0f471..c67805f51 100644
--- a/Sprint-3/reading-list/index.html
+++ b/Sprint-3/reading-list/index.html
@@ -4,7 +4,7 @@
- Title here
+ Reading list app
diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js
index 6024d73a0..9e0f29abc 100644
--- a/Sprint-3/reading-list/script.js
+++ b/Sprint-3/reading-list/script.js
@@ -21,3 +21,31 @@ const books = [
},
];
+function readingList(books) {
+ const readingListElement = document.querySelector("#reading-list");
+
+ books.forEach(book => {
+ const listItem = document.createElement('li'); // for each book, create a list item
+ listItem.style.backgroundColor = book.alreadyRead ? 'green' : 'red'; // set background color based on alreadyRead status
+
+ const titleAuthor = document.createElement("p"); // create a paragraph for title and author
+ titleAuthor.textContent = `${book.title} by ${book.author}`; // set text content to "title by author"
+
+ const coverImage = document.createElement("img");
+ coverImage.src = book.bookCoverImage;
+ //coverImage.alt = `Cover of ${book.title}`; // this make the test fail
+
+ listItem.appendChild(titleAuthor);
+ listItem.appendChild(coverImage);
+
+ readingListElement.appendChild(listItem);
+ });
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+ readingList(books);
+});
+
+
+
+