From 703b5b31fb2be02163c8ee5061dc8ce6ba2a4d70 Mon Sep 17 00:00:00 2001 From: KhotKeys Date: Sun, 9 Aug 2026 15:48:05 +0100 Subject: [PATCH] Implement reading-list --- Sprint-3/reading-list/index.html | 2 +- Sprint-3/reading-list/script.js | 25 +++++++++++++++++++++++++ 2 files changed, 26 insertions(+), 1 deletion(-) diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html index dbdb0f471..c67805f51 100644 --- a/Sprint-3/reading-list/index.html +++ b/Sprint-3/reading-list/index.html @@ -4,7 +4,7 @@ - Title here + Reading list app
diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 6024d73a0..6867cbd7b 100644 --- a/Sprint-3/reading-list/script.js +++ b/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 = `

${book.title}

${book.author}

`; + list.appendChild(li); + }); +});