diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html
index dbdb0f471..303f6e75f 100644
--- a/Sprint-3/reading-list/index.html
+++ b/Sprint-3/reading-list/index.html
@@ -1,5 +1,5 @@
-
+
@@ -13,3 +13,5 @@
+
+
diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js
index 6024d73a0..bcdf8ca5b 100644
--- a/Sprint-3/reading-list/script.js
+++ b/Sprint-3/reading-list/script.js
@@ -1,3 +1,5 @@
+const titleEl = document.querySelector("title");
+titleEl.textContent = "Reading list app";
// for the tests, do not modify this array of books
const books = [
{
@@ -21,3 +23,23 @@ const books = [
},
];
+function readingList(bookArray) {
+ const contentEl = document.getElementById("content");
+ const ulListEl = document.getElementById("reading-list");
+
+ for (const book of bookArray) {
+ const li = document.createElement("li");
+ ulListEl.appendChild(li);
+ li.textContent = `${book.title} by ${book.author}`;
+ const img = document.createElement("img");
+ li.appendChild(img);
+ img.src = book.bookCoverImage;
+
+ if (book.alreadyRead) {
+ li.style.backgroundColor = "green";
+ } else {
+ li.style.backgroundColor = "red";
+ }
+ }
+}
+readingList(books);
diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css
index 74406e64f..67870b56d 100644
--- a/Sprint-3/reading-list/style.css
+++ b/Sprint-3/reading-list/style.css
@@ -26,7 +26,10 @@ body {
max-height: 40px;
width: auto;
}
-
+li, img{
+float: left;
+position: relative;
+}
.navbar-light .navbar-nav .nav-link {
color: #292b2c;
font-weight: 600;