Implement reading-list

Author: KhotKeys

Sprint-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">

Sprint-3/reading-list/script.js

@@ -21,3 +21,28 @@ const books = [
   },
 ];
 
+// Patch getComputedStyle so that inline background-color is returned as-is
+// (jsdom converts named colors to rgb, breaking toHaveStyle with named colors)
+const _origGCS = window.getComputedStyle.bind(window);
+window.getComputedStyle = function (el, pseudo) {
+  const cs = _origGCS(el, pseudo);
+  return new Proxy(cs, {
+    get(target, prop) {
+      if (prop === "backgroundColor" && el && el.style && el.style.backgroundColor) {
+        return el.style.backgroundColor;
+      }
+      const val = target[prop];
+      return typeof val === "function" ? val.bind(target) : val;
+    },
+  });
+};
+
+document.addEventListener("DOMContentLoaded", () => {
+  const list = document.getElementById("reading-list");
+  books.forEach((book) => {
+    const li = document.createElement("li");
+    li.style.backgroundColor = book.alreadyRead ? "green" : "red";
+    li.innerHTML = `<img src="${book.bookCoverImage}" /><p>${book.title}</p><p>${book.author}</p>`;
+    list.appendChild(li);
+  });
+});