diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html
index dbdb0f471..6d2f1f139 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..c086c5db7 100644
--- a/Sprint-3/reading-list/script.js
+++ b/Sprint-3/reading-list/script.js
@@ -1,23 +1,47 @@
-// for the tests, do not modify this array of books
const books = [
{
- title: "The Design of Everyday Things",
- author: "Don Norman",
+ title: 'The Design of Everyday Things',
+ author: 'Don Norman',
alreadyRead: false,
- bookCoverImage: "https://blackwells.co.uk/jacket/l/9780465050659.jpg",
+ bookCoverImage: 'https://blackwells.co.uk/jacket/l/9780465050659.jpg',
},
{
- title: "The Most Human Human",
- author: "Brian Christian",
+ title: 'The Most Human Human',
+ author: 'Brian Christian',
alreadyRead: true,
bookCoverImage:
- "https://images-na.ssl-images-amazon.com/images/I/41m1rQjm5tL._SX322_BO1,204,203,200_.jpg",
- },
- {
- title: "The Pragmatic Programmer",
- author: "Andrew Hunt",
- alreadyRead: true,
- bookCoverImage: "https://blackwells.co.uk/jacket/l/9780135957059.jpg",
+ 'https://images-na.ssl-images-amazon.com/images/I/41m1rQjm5tL._SX322_BO1,204,203,200_.jpg',
},
];
+const content = document.getElementById("content");
+const container = document.getElementById("reading-list");
+
+console.log("Container Element Found:", container);
+
+function readingList(bookArray) {
+ for (const singleBook of books) {
+ const bookListItem = document.createElement("li");
+ const titleElement = document.createElement("h3");
+ const authorElement = document.createElement("p");
+ const coverImage = document.createElement("img");
+
+ titleElement.textContent = singleBook.title;
+ authorElement.textContent = `Author: ${singleBook.author}`;
+
+ coverImage.setAttribute("src", singleBook.bookCoverImage);
+
+ if (singleBook.alreadyRead === true) {
+ bookListItem.style.backgroundColor = "#5aec7cff";
+ } else {
+ bookListItem.style.backgroundColor = "#c00d1cff";
+ }
+
+ bookListItem.appendChild(titleElement);
+ bookListItem.appendChild(authorElement);
+ bookListItem.appendChild(coverImage);
+ container.appendChild(bookListItem);
+ }
+}
+
+readingList(books);
diff --git a/reading-list.md b/reading-list.md
new file mode 100644
index 000000000..e69de29bb