reading list is done

fikretTest · fikretTest · commit 189c65da78e6 · 2024-01-21T13:47:37.000Z
diff --git a/week-3/reading-list/index.html b/week-3/reading-list/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <title>Title here</title>
+    <title>Reading list app</title>
   </head>
   <body>
     <div id="content">
diff --git a/week-3/reading-list/script.js b/week-3/reading-list/script.js
@@ -21,3 +21,30 @@ const books = [
   },
 ];
 
+const container = document.getElementById("reading-list");
+
+function appendBook(book) {
+  const liBook = document.createElement("li");
+
+  const description = document.createElement("p");
+  description.textContent = book.title + " by " + book.author;
+
+  const alreadyRead = book.alreadyRead;
+  const imgSrc = document.createElement("img");
+  imgSrc.setAttribute("src", book.bookCoverImage);
+  imgSrc.style.height = "400px";
+  if (alreadyRead) {
+    liBook.style.backgroundColor = "green";
+  } else {
+    liBook.style.backgroundColor = "red";
+  }
+  liBook.appendChild(description);
+
+  liBook.appendChild(imgSrc);
+
+  container.appendChild(liBook);
+}
+
+for (let book of books) {
+  appendBook(book);
+}
