add if statement to check alreadyread books and set their background to meet color condition

Author: marthak1

Sprint-3/reading-list/script.js

@@ -22,18 +22,25 @@ const books = [
     bookCoverImage: "https://blackwells.co.uk/jacket/l/9780135957059.jpg",
   },
 ];
-function readingList(bookArray){
-const contentEl = document.getElementById("content");
-const ulListEl = document.getElementById("reading-list");
 
-for (const book of bookArray){
-const li = document.createElement("li");
-ulListEl.appendChild(li);
-li.textContent = `${book.title} by ${book.author}`;
-const img = document.createElement('img');
-li.appendChild(img)
-img.src = book.bookCoverImage;
-}
+function readingList(bookArray) {
+  const contentEl = document.getElementById("content");
+  const ulListEl = document.getElementById("reading-list");
+
+  for (const book of bookArray) {
+    const li = document.createElement("li");
+    ulListEl.appendChild(li);
+    li.textContent = `${book.title} by ${book.author}`;
+    const img = document.createElement("img");
+    li.appendChild(img);
+    img.src = book.bookCoverImage;
+
+    if (book.alreadyRead) {
+      li.style.backgroundColor = "green";
+    } else {
+      li.style.backgroundColor = "red";
+    }
+  }
 }
 readingList(books);
 // Render the list of books on the page. Each book should have a title, author and image and a background colour that is set dependent on whether we have read the book or not.