From 703b5b31fb2be02163c8ee5061dc8ce6ba2a4d70 Mon Sep 17 00:00:00 2001 From: KhotKeys Date: Sun, 9 Aug 2026 15:48:05 +0100 Subject: [PATCH 1/2] 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); + }); +}); From de9406b725e067cb0597f2a6e44a812e7db119c6 Mon Sep 17 00:00:00 2001 From: KhotKeys Date: Sun, 16 Aug 2026 22:36:40 +0100 Subject: [PATCH 2/2] refactor: use semantic CSS classes for book list styling to address code review --- Sprint-3/reading-list/script.js | 2 +- Sprint-3/reading-list/script.test.js | 6 +++--- Sprint-3/reading-list/style.css | 8 ++++++++ 3 files changed, 12 insertions(+), 4 deletions(-) diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 6867cbd7b..0dead0632 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -41,7 +41,7 @@ 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.classList.add(book.alreadyRead ? "book-read" : "book-unread"); li.innerHTML = `

${book.title}

${book.author}

`; list.appendChild(li); }); diff --git a/Sprint-3/reading-list/script.test.js b/Sprint-3/reading-list/script.test.js index 39bdd921d..afeefe06e 100644 --- a/Sprint-3/reading-list/script.test.js +++ b/Sprint-3/reading-list/script.test.js @@ -67,16 +67,16 @@ describe("Reading list", () => { const firstLi = page.window.document.querySelector( "#reading-list > :first-child" ); - expect(firstLi).toHaveStyle({ backgroundColor: "red" }); + expect(firstLi).toHaveClass("book-unread"); const secondLi = page.window.document.querySelector( "#reading-list > :nth-child(2)" ); - expect(secondLi).toHaveStyle({ backgroundColor: "green" }); + expect(secondLi).toHaveClass("book-read"); const thirdLi = page.window.document.querySelector( "#reading-list > :nth-child(3)" ); - expect(thirdLi).toHaveStyle({ backgroundColor: "green" }); + expect(thirdLi).toHaveClass("book-read"); }); }); diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css index 74406e64f..f353c9b99 100644 --- a/Sprint-3/reading-list/style.css +++ b/Sprint-3/reading-list/style.css @@ -157,3 +157,11 @@ body { max-height: 80px; } } + +.book-read { + background-color: green; +} + +.book-unread { + background-color: red; +}