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..b6ae26cf0 100644
--- a/Sprint-3/reading-list/script.js
+++ b/Sprint-3/reading-list/script.js
@@ -1,3 +1,36 @@
+document.addEventListener("DOMContentLoaded", () => {
+ //elements of page to interact with
+ for (let book of books){
+ const title = book.title;
+ const author = book.author;
+ const alreadyRead = book.alreadyRead;
+ const bookCoverImage = book.bookCoverImage;
+ const readingListDom = document.getElementById("reading-list")
+
+ let bookDiv = document.createElement("div");
+ bookDiv.classList.add("book");
+ if (alreadyRead == true){
+ bookDiv.classList.add("alreadyRead");
+ }
+ let titleDom = document.createElement("p");
+ titleDom.innerText = title;
+ let authorDom = document.createElement("p");
+ authorDom.innerText = author;
+ let imageDom = document.createElement("img");
+ imageDom.src = bookCoverImage;
+
+
+ bookDiv.appendChild(titleDom);
+ bookDiv.appendChild(authorDom);
+ bookDiv.appendChild(imageDom);
+
+ readingListDom.appendChild(bookDiv);
+ }
+
+});
+
+
+
// for the tests, do not modify this array of books
const books = [
{
diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css
index 74406e64f..c7814d3eb 100644
--- a/Sprint-3/reading-list/style.css
+++ b/Sprint-3/reading-list/style.css
@@ -157,3 +157,9 @@ body {
max-height: 80px;
}
}
+.book{
+ background-color: red;
+}
+.alreadyRead{
+ background-color: green;
+}