From 46354f9a9f529fd20aabc863f47ca6cc047eeea2 Mon Sep 17 00:00:00 2001 From: Serna Malala Date: Fri, 10 Jan 2025 18:44:01 +0200 Subject: [PATCH 1/3] Added readinglist name --- Sprint-3/reading-list/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html index dbdb0f47..c67805f5 100644 --- a/Sprint-3/reading-list/index.html +++ b/Sprint-3/reading-list/index.html @@ -4,7 +4,7 @@ - Title here + Reading list app
From ec3c28e23ac19f1081ef14536b89c6c8664a8845 Mon Sep 17 00:00:00 2001 From: Serna Malala Date: Fri, 10 Jan 2025 18:44:31 +0200 Subject: [PATCH 2/3] Added code to make books be displayed on screen using DOM manipulation --- Sprint-3/reading-list/script.js | 27 +++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 6024d73a..da6a9a71 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -21,3 +21,30 @@ const books = [ }, ]; +const readingList = document.getElementById("content"); +function populateBooks(bookArray) { + + bookArray.forEach(item => { + + const listItem = document.createElement("ul"); + const div = document.createElement("div"); + const title = document.createElement("h2"); + const image = document.createElement("img"); + let colour = "red"; + if (item.alreadyRead === true) { + colour = "green"; + } + title.textContent = `${item.title} by ${item.author}`; + image.src = item.bookCoverImage; + readingList.style.textAlign = "center"; + div.style.background = colour; + div.style.maxWidth = "500px"; + image.style.width = "200px"; + readingList.appendChild(listItem); + listItem.appendChild(div); + div.appendChild(title); + div.appendChild(image); + }); +} + +populateBooks(books); \ No newline at end of file From d3a22a9be301a67882b34596f21cc112e7e7b8fc Mon Sep 17 00:00:00 2001 From: Serna Malala Date: Fri, 10 Jan 2025 18:59:44 +0200 Subject: [PATCH 3/3] Adjusted some code for the tests to pass but I cant seem to pass all of them --- Sprint-3/reading-list/script.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index da6a9a71..8f3b1e20 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -21,28 +21,31 @@ const books = [ }, ]; -const readingList = document.getElementById("content"); +const readingList = document.getElementById("reading-list"); function populateBooks(bookArray) { bookArray.forEach(item => { - const listItem = document.createElement("ul"); + const listItem = document.createElement("li"); const div = document.createElement("div"); const title = document.createElement("h2"); + const author = document.createElement("h3"); const image = document.createElement("img"); let colour = "red"; if (item.alreadyRead === true) { colour = "green"; } - title.textContent = `${item.title} by ${item.author}`; + title.textContent = item.title; + author.textContent = item.author; image.src = item.bookCoverImage; readingList.style.textAlign = "center"; - div.style.background = colour; + div.style.backgroundColor = colour; div.style.maxWidth = "500px"; image.style.width = "200px"; readingList.appendChild(listItem); listItem.appendChild(div); div.appendChild(title); + div.appendChild(author); div.appendChild(image); }); }