From 2576e80ee27ff341c07d49c12e0591db843051c0 Mon Sep 17 00:00:00 2001 From: Della Bella Date: Tue, 11 Nov 2025 07:14:19 +0000 Subject: [PATCH 1/2] Start Reading list App --- Sprint-3/reading-list/index.html | 2 +- reading-list.md | 0 2 files changed, 1 insertion(+), 1 deletion(-) create mode 100644 reading-list.md 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/reading-list.md b/reading-list.md new file mode 100644 index 000000000..e69de29bb From 51f74bf13a7d82f44dd2c347e4d6ec4df481d319 Mon Sep 17 00:00:00 2001 From: Della Bella Date: Wed, 12 Nov 2025 20:46:07 +0000 Subject: [PATCH 2/2] Reading List Excercise --- Sprint-3/reading-list/script.js | 50 ++++++++++++++++++++++++--------- 1 file changed, 37 insertions(+), 13 deletions(-) diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 6024d73a0..c086c5db7 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -1,23 +1,47 @@ -// for the tests, do not modify this array of books const books = [ { - title: "The Design of Everyday Things", - author: "Don Norman", + title: 'The Design of Everyday Things', + author: 'Don Norman', alreadyRead: false, - bookCoverImage: "https://blackwells.co.uk/jacket/l/9780465050659.jpg", + bookCoverImage: 'https://blackwells.co.uk/jacket/l/9780465050659.jpg', }, { - title: "The Most Human Human", - author: "Brian Christian", + title: 'The Most Human Human', + author: 'Brian Christian', alreadyRead: true, bookCoverImage: - "https://images-na.ssl-images-amazon.com/images/I/41m1rQjm5tL._SX322_BO1,204,203,200_.jpg", - }, - { - title: "The Pragmatic Programmer", - author: "Andrew Hunt", - alreadyRead: true, - bookCoverImage: "https://blackwells.co.uk/jacket/l/9780135957059.jpg", + 'https://images-na.ssl-images-amazon.com/images/I/41m1rQjm5tL._SX322_BO1,204,203,200_.jpg', }, ]; +const content = document.getElementById("content"); +const container = document.getElementById("reading-list"); + +console.log("Container Element Found:", container); + +function readingList(bookArray) { + for (const singleBook of books) { + const bookListItem = document.createElement("li"); + const titleElement = document.createElement("h3"); + const authorElement = document.createElement("p"); + const coverImage = document.createElement("img"); + + titleElement.textContent = singleBook.title; + authorElement.textContent = `Author: ${singleBook.author}`; + + coverImage.setAttribute("src", singleBook.bookCoverImage); + + if (singleBook.alreadyRead === true) { + bookListItem.style.backgroundColor = "#5aec7cff"; + } else { + bookListItem.style.backgroundColor = "#c00d1cff"; + } + + bookListItem.appendChild(titleElement); + bookListItem.appendChild(authorElement); + bookListItem.appendChild(coverImage); + container.appendChild(bookListItem); + } +} + +readingList(books);