From 62c58350771edff2351754069c83cd03e2568154 Mon Sep 17 00:00:00 2001 From: HannaOdud Date: Sun, 16 Nov 2025 20:52:07 +0000 Subject: [PATCH] reading-list --- Sprint-3/reading-list/index.html | 2 +- Sprint-3/reading-list/script.js | 33 ++++++++++++++++++++++++++++++++ Sprint-3/reading-list/style.css | 6 ++++++ 3 files changed, 40 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..b6ae26cf0 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -1,3 +1,36 @@ +document.addEventListener("DOMContentLoaded", () => { + //elements of page to interact with + for (let book of books){ + const title = book.title; + const author = book.author; + const alreadyRead = book.alreadyRead; + const bookCoverImage = book.bookCoverImage; + const readingListDom = document.getElementById("reading-list") + + let bookDiv = document.createElement("div"); + bookDiv.classList.add("book"); + if (alreadyRead == true){ + bookDiv.classList.add("alreadyRead"); + } + let titleDom = document.createElement("p"); + titleDom.innerText = title; + let authorDom = document.createElement("p"); + authorDom.innerText = author; + let imageDom = document.createElement("img"); + imageDom.src = bookCoverImage; + + + bookDiv.appendChild(titleDom); + bookDiv.appendChild(authorDom); + bookDiv.appendChild(imageDom); + + readingListDom.appendChild(bookDiv); + } + +}); + + + // for the tests, do not modify this array of books const books = [ { diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css index 74406e64f..c7814d3eb 100644 --- a/Sprint-3/reading-list/style.css +++ b/Sprint-3/reading-list/style.css @@ -157,3 +157,9 @@ body { max-height: 80px; } } +.book{ + background-color: red; +} +.alreadyRead{ + background-color: green; +}