From df9ff864a982a668f90d0d44b5e86900790abdcd Mon Sep 17 00:00:00 2001 From: Ali Date: Mon, 24 Nov 2025 16:11:37 +0000 Subject: [PATCH] Fix: update title in index.html and enhance readingList function in script.js --- Sprint-3/reading-list/index.html | 2 +- Sprint-3/reading-list/script.js | 44 ++++++++++++++++++++++++++++++++ 2 files changed, 45 insertions(+), 1 deletion(-) diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html index dbdb0f471..6d2f1f139 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..d9978c4ff 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -1,4 +1,6 @@ // for the tests, do not modify this array of books + + const books = [ { title: "The Design of Everyday Things", @@ -21,3 +23,45 @@ const books = [ }, ]; + + + +/** + * Render the reading list into the DOM. + * Expects an element with id="reading-list" in index.html (e.g. ) + */ + + + + +function readingList() { + const unorderedList = document.querySelector("#reading-list"); + + books.forEach((book) => { + const li = document.createElement("li"); + + // Image first + const img = document.createElement("img"); + img.src = book.bookCoverImage; + img.alt = `${book.title} by ${book.author} — book cover`; + img.loading = "lazy"; + li.appendChild(img); + + // Text + const p = document.createElement("p"); + p.innerText = `${book.title} by ${book.author}`; + li.appendChild(p); + + // Inline background color (Jest reads this) + li.style.backgroundColor = book.alreadyRead ? "red" : "green"; + + unorderedList.appendChild(li); + }); +} + +// ---- FIX FOR JSDOM ---- +if (document.readyState === "loading") { + document.addEventListener("DOMContentLoaded", readingList); +} else { + readingList(); +} \ No newline at end of file