Readinglist homework

miriamjorna · miriamjorna · commit 978394b7ee70 · 2026-04-18T23:40:52.000+01:00
diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html
@@ -7,9 +7,8 @@
     <title>Reading list app</title>
   </head>
   <body>
-    <div id="content">
-      <ul id="reading-list"></ul>
-    </div>
+    <h1>My Reading List</h1>
+    <div id="book-list"></div>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js
@@ -21,3 +21,25 @@ const books = [
   },
 ];
 
+function readingList(books) {
+  const bookList = document.getElementById("book-list");
+
+  books.forEach((book) => {
+    const card = document.createElement("div");
+    card.classList.add("book-card");
+    card.classList.add(book.alreadyRead ? "read" : "unread");
+
+    card.innerHTML = `
+      <img src="${book.bookCoverImage}" alt="${book.title}" />
+      <div>
+        <h2>${book.title}</h2>
+        <p>By ${book.author}</p>
+        <p>${book.alreadyRead ? "Already read ✅" : "Not read yet 📖"}</p>
+      </div>
+    `;
+
+    bookList.appendChild(card);
+  });
+}
+
+readingList(books);
diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css
@@ -12,6 +12,28 @@ body {
     "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 
+.book-card {
+  padding: 20px;
+  margin: 15px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.book-card img {
+  height: 150px;
+  width: auto;
+}
+
+.read {
+  background-color: green;
+}
+
+.unread {
+  background-color: red;
+}
+
 .site-footer {
   margin-top: 4em;
 }
@@ -133,7 +155,7 @@ body {
   height: 37px;
 }
 
-.colorButton {
+.colorBtn {
   margin-bottom: 20px;
   margin-right: 20px;
   width: 100px;
