diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html
index dbdb0f471..d004e7e89 100644
--- a/Sprint-3/reading-list/index.html
+++ b/Sprint-3/reading-list/index.html
@@ -4,11 +4,13 @@
- Title here
+ Reading list app
diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js
index 6024d73a0..159512514 100644
--- a/Sprint-3/reading-list/script.js
+++ b/Sprint-3/reading-list/script.js
@@ -21,3 +21,29 @@ const books = [
},
];
+function readingListApp(books) {
+ const container = document.getElementById("reading-list-app");
+ if (!container) return;
+
+ for (let i = 0; i < books.length; i++) {
+ const book = books[i];
+
+ const bookItem = document.createElement("div");
+ bookItem.className = "book";
+ bookItem.style.backgroundColor = book.alreadyRead ? "green" : "red";
+
+ const bookInfo = document.createElement("div");
+ bookInfo.innerHTML = `${book.title} by ${book.author}`;
+
+ const img = document.createElement("img");
+ img.src = book.bookCoverImage;
+ img.alt = `${book.title} cover`;
+
+ bookItem.appendChild(bookInfo);
+
+ bookItem.appendChild(img);
+ container.appendChild(bookItem);
+ }
+}
+
+readingListApp(books);
diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css
index 74406e64f..4948d741b 100644
--- a/Sprint-3/reading-list/style.css
+++ b/Sprint-3/reading-list/style.css
@@ -5,7 +5,7 @@
* Lesson: 1,2
* Class: Scotland 2017
*/
-
+/*
html,
body {
font-family: "Source Sans Pro", -apple-system, system-ui, BlinkMacSystemFont,
@@ -68,7 +68,7 @@ body {
border-radius: 0;
}
-/* Headings */
+/* Headings
.heading-underline {
position: relative;
margin-bottom: 2em;
@@ -90,7 +90,7 @@ body {
background: #ce5f31;
}
-/* Article */
+/* Article *
.article {
margin-bottom: 2em;
}
@@ -156,4 +156,50 @@ body {
.navbar-brand > img {
max-height: 80px;
}
-}
+} */
+ html,
+ body {
+ font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+ padding: 2rem;
+
+ }
+
+ .book {
+ display: block;
+ align-items: left;
+ margin-bottom: 1.5rem;
+ padding: 1rem;
+ border: 1px solid #ddd;
+ border-radius: 8px;
+ background-color: #f9f9f9;
+ }
+
+ .book img {
+ height: 320px;
+ margin-right: 0rem;
+ border-radius: 4px;
+ margin-top: 10px;
+ margin-left: -1rem;
+ margin-bottom: -16px;
+ }
+
+ .book-info h3 {
+ margin: 0;
+ font-size: 1.2rem;
+ }
+
+ .book-info p {
+ margin: 0.3rem 0;
+ }
+
+ .read {
+ color: green;
+ font-weight: bold;
+ }
+
+ .unread {
+ color: red;
+ font-weight: bold;
+ }
+
+