diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html
index dbdb0f471..dd6f0cd97 100644
--- a/Sprint-3/reading-list/index.html
+++ b/Sprint-3/reading-list/index.html
@@ -4,9 +4,10 @@
- Title here
+ Reading List App
+ Reading list app
diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js
index 6024d73a0..86ff17001 100644
--- a/Sprint-3/reading-list/script.js
+++ b/Sprint-3/reading-list/script.js
@@ -21,3 +21,34 @@ const books = [
},
];
+function readingList(books) {
+ const readingListUl = document.getElementById("reading-list");
+
+ for (let i = 0; i < books.length; i++) {
+ const li = document.createElement("li");
+ const bookDetails = document.createTextNode(
+ `${books[i].title} by ${books[i].author}`
+ );
+
+ li.classList.add("book-card");
+ li.appendChild(bookDetails);
+
+ if (books[i].alreadyRead) {
+ li.classList.add("read"); // If true, add the 'read' class
+ } else {
+ li.classList.add("not-read"); // If false, add the 'not-read' class
+ }
+
+ const bookImg = document.createElement("img");
+ bookImg.src = books[i].bookCoverImage;
+ bookImg.alt = `cover of ${books[i].title}`;
+ bookImg.style.width = "150px";
+
+ li.appendChild(document.createElement("br"));
+ li.appendChild(bookImg);
+
+ readingListUl.appendChild(li);
+ }
+}
+
+readingList(books);
diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css
index 74406e64f..21dc90e88 100644
--- a/Sprint-3/reading-list/style.css
+++ b/Sprint-3/reading-list/style.css
@@ -157,3 +157,30 @@ body {
max-height: 80px;
}
}
+
+
+/* css reading list app */
+.book-card {
+ padding: 20px;
+ margin: 40px;
+ border-radius: 5px;
+ border: 1px solid rgb(153, 144, 144);
+ font-family:Arial, Helvetica, sans-serif;
+}
+
+h1{
+ text-align: center;
+ margin-top: 50px;
+}
+
+.read{
+ background-color: red;
+}
+
+.not-read{
+ background-color: green
+}
+
+.book-card img{
+ margin-top: 20px;
+}