CodeYourFuture · HadikaMalik · Jan 23, 2024 · Feb 19, 2024
diff --git a/week-3/reading-list/index.html b/week-3/reading-list/index.html
@@ -4,7 +4,8 @@
     <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">
@@ -13,3 +14,14 @@
     <script src="script.js"></script>
   </body>
 </html>
+
+
+<!-- <div id="content">
+  <ul id="reading-list">
+    <li id="list-of-books">
+      <p>book title</p>
+      <p>book author</p>
+      <img <p>books cover img url</p> />
+    </li>
+  </ul>
+</div> -->
diff --git a/week-3/reading-list/script.js b/week-3/reading-list/script.js
@@ -1,3 +1,4 @@
+
 // for the tests, do not modify this array of books
 const books = [
   {
@@ -21,3 +22,23 @@ const books = [
   },
 ];
 
+
+const getReadingList = document.getElementById("content");
+const listOfBooks = document.getElementById("reading-list");
+console.log(getReadingList);
+
+for (const item of books){
+  const li = document.createElement("li");
+  listOfBooks.appendChild(li);
+
+  const p = document.createElement("p");
+  li.appendChild(p);
+  p.textContent = `${item.title} by ${item.author}`;
+
+  const image = document.createElement("img");
+  li.appendChild(image);
+  image.src = item.bookCoverImage;
+
+  if (item.alreadyRead === true){li.setAttribute("class", "green")}
+  else {li.setAttribute("class", "red")}
+}
diff --git a/week-3/reading-list/style.css b/week-3/reading-list/style.css
@@ -124,6 +124,10 @@ body {
   background-color: red;
 }
 
+.green{
+  background-color: green;
+}
+
 .addArticle {
   margin-bottom: 10px;
 }