From 732d8c0ed69dd29e8cafd4c80b9880953dbaacae Mon Sep 17 00:00:00 2001 From: Khor Biel Date: Tue, 18 Nov 2025 13:16:57 +0000 Subject: [PATCH 1/2] Rendered the list of books --- Sprint-3/reading-list/index.html | 4 +-- Sprint-3/reading-list/script.js | 42 ++++++++++++++++++++++++++++++++ 2 files changed, 44 insertions(+), 2 deletions(-) diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html index dbdb0f471..dc501edef 100644 --- a/Sprint-3/reading-list/index.html +++ b/Sprint-3/reading-list/index.html @@ -1,10 +1,10 @@ - + - Title here + Reading list app
diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 6024d73a0..421c90898 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,43 @@ 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; + 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(); +} From 0b58a7964209ae69204616f779a83bb91fd6e3ed Mon Sep 17 00:00:00 2001 From: Khor Biel Date: Mon, 24 Nov 2025 12:13:30 +0000 Subject: [PATCH 2/2] fix: add alt attributes to book images for accessibility earlier --- Sprint-3/reading-list/script.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 421c90898..7030fa450 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -43,6 +43,8 @@ function readingList() { // 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