London/May 2025/Alexandru Pocovnicu/Sprint3/reading list

Sprint-3/reading-list/script.js

@@ -1,4 +1,6 @@
-// for the tests, do not modify this array of books
+// for the tests, do not modify this array of books.
+
+
 const books = [
   {
     title: "The Design of Everyday Things",
@@ -21,3 +23,41 @@ const books = [
   },
 ];
 
+//
+//create <li> elements
+//add the content of the objects to the <li>s
+    //extract each object from the array
+//append the <li>s to the <ul> tag in html    
+
+
+
+  function displaybooks(book) {
+    const bookTitle = document.createElement("p");
+    bookTitle.textContent = book.title;
+    const bookAuthor = document.createElement("p");
+    bookAuthor.textContent = book.author;
+
+    const titleAuthor = document.createElement("p");
+    titleAuthor.textContent =
+      bookTitle.textContent + " by " + bookAuthor.textContent;
+
+    const image = document.createElement("img");
+    image.src = book.bookCoverImage;
+
+    const allTogether = document.createElement("li");
+    allTogether.appendChild(titleAuthor);
+    allTogether.appendChild(image);
+
+    if (book.alreadyRead === false) {
+      allTogether.style.backgroundColor = "red";
+    } else {
+      allTogether.style.backgroundColor = "green";
+    }
+
+    document.querySelector("#reading-list").appendChild(allTogether);
+  }
+
+  for (let i = 0; i < books.length; i++) {
+    displaybooks(books[i]);
+  }
+