From 85e4107c25f7cad23edb9d6a56d3bc22c29b952d Mon Sep 17 00:00:00 2001 From: marthak1 Date: Fri, 3 Apr 2026 16:41:04 +0100 Subject: [PATCH 1/7] change html title using js queryselector --- Sprint-3/reading-list/index.html | 4 +++- Sprint-3/reading-list/script.js | 2 ++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html index dbdb0f471..303f6e75f 100644 --- a/Sprint-3/reading-list/index.html +++ b/Sprint-3/reading-list/index.html @@ -1,5 +1,5 @@ - + @@ -13,3 +13,5 @@ + + diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 6024d73a0..cdd1f30fd 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -1,3 +1,5 @@ +const titleEl = document.querySelector("title"); +titleEl.textContent = "Reading list app"; // for the tests, do not modify this array of books const books = [ { From ac442315d28aa256b17a23713cd86b0ce1a627ef Mon Sep 17 00:00:00 2001 From: marthak1 Date: Fri, 3 Apr 2026 17:05:09 +0100 Subject: [PATCH 2/7] create function and select html elements for modifications --- Sprint-3/reading-list/script.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index cdd1f30fd..55d3b96ab 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -22,4 +22,16 @@ const books = [ bookCoverImage: "https://blackwells.co.uk/jacket/l/9780135957059.jpg", }, ]; +function readingList(arrays){ +const contentEl = document.getElementById("#content"); +const listEl = document.getElementById("#reading-list"); +} +// readingList(books); +// Render the list of books on the page. Each book should have a title, author and image and a background colour that is set dependent on whether we have read the book or not. + +// ## 🧭 Strategy + +// Try and outline your strategy / approach for solving this problem before you get started. There is also a test suite provided to help you meet the acceptance criteria in the issue. + +// The end result should look something like this \ No newline at end of file From 4f6828f3dfc7334567b8e8b7478e584a233053f0 Mon Sep 17 00:00:00 2001 From: marthak1 Date: Fri, 3 Apr 2026 21:45:35 +0100 Subject: [PATCH 3/7] create and append li elementwith place holder --- Sprint-3/reading-list/script.js | 11 +++++++---- Sprint-3/reading-list/style.css | 5 ++++- 2 files changed, 11 insertions(+), 5 deletions(-) diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 55d3b96ab..a151d60dc 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -23,15 +23,18 @@ const books = [ }, ]; function readingList(arrays){ -const contentEl = document.getElementById("#content"); -const listEl = document.getElementById("#reading-list"); +const contentEl = document.getElementById("content"); +const ulListEl = document.getElementById("reading-list"); +const li = document.createElement("li"); +ulListEl.appendChild(li); +li.textContent ="placeholder text"; + } -// readingList(books); +readingList(books); // Render the list of books on the page. Each book should have a title, author and image and a background colour that is set dependent on whether we have read the book or not. // ## 🧭 Strategy // Try and outline your strategy / approach for solving this problem before you get started. There is also a test suite provided to help you meet the acceptance criteria in the issue. - // The end result should look something like this \ No newline at end of file diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css index 74406e64f..67870b56d 100644 --- a/Sprint-3/reading-list/style.css +++ b/Sprint-3/reading-list/style.css @@ -26,7 +26,10 @@ body { max-height: 40px; width: auto; } - +li, img{ +float: left; +position: relative; +} .navbar-light .navbar-nav .nav-link { color: #292b2c; font-weight: 600; From b52d2297ea0e62e6ff760cc526a0d703ce7a4515 Mon Sep 17 00:00:00 2001 From: marthak1 Date: Fri, 3 Apr 2026 21:55:07 +0100 Subject: [PATCH 4/7] create and append image element with placeholder image --- Sprint-3/reading-list/script.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index a151d60dc..26113bdea 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -28,7 +28,9 @@ const ulListEl = document.getElementById("reading-list"); const li = document.createElement("li"); ulListEl.appendChild(li); li.textContent ="placeholder text"; - +const img = document.createElement('img'); +li.appendChild(img) +img.src = "https://blackwells.co.uk/jacket/l/9780135957059.jpg"; } readingList(books); From a1af7d4013d62a7ec5048a944cee097c00a80b19 Mon Sep 17 00:00:00 2001 From: marthak1 Date: Fri, 3 Apr 2026 22:44:09 +0100 Subject: [PATCH 5/7] create loop through book object to render book list, title, author and image --- Sprint-3/reading-list/script.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 26113bdea..b52f0d9be 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -22,16 +22,18 @@ const books = [ bookCoverImage: "https://blackwells.co.uk/jacket/l/9780135957059.jpg", }, ]; -function readingList(arrays){ +function readingList(bookArray){ const contentEl = document.getElementById("content"); const ulListEl = document.getElementById("reading-list"); + +for (const book of bookArray){ const li = document.createElement("li"); ulListEl.appendChild(li); -li.textContent ="placeholder text"; +li.textContent = `${book.title} by ${book.author}`; const img = document.createElement('img'); li.appendChild(img) -img.src = "https://blackwells.co.uk/jacket/l/9780135957059.jpg"; - +img.src = book.bookCoverImage; +} } readingList(books); // Render the list of books on the page. Each book should have a title, author and image and a background colour that is set dependent on whether we have read the book or not. From c808c0df5ffe0d9fffb527e1799cdb5dc1c47d36 Mon Sep 17 00:00:00 2001 From: marthak1 Date: Fri, 3 Apr 2026 23:07:22 +0100 Subject: [PATCH 6/7] add if statement to check alreadyread books and set their background to meet color condition --- Sprint-3/reading-list/script.js | 29 ++++++++++++++++++----------- 1 file changed, 18 insertions(+), 11 deletions(-) diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index b52f0d9be..60d5acbfb 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -22,18 +22,25 @@ const books = [ bookCoverImage: "https://blackwells.co.uk/jacket/l/9780135957059.jpg", }, ]; -function readingList(bookArray){ -const contentEl = document.getElementById("content"); -const ulListEl = document.getElementById("reading-list"); -for (const book of bookArray){ -const li = document.createElement("li"); -ulListEl.appendChild(li); -li.textContent = `${book.title} by ${book.author}`; -const img = document.createElement('img'); -li.appendChild(img) -img.src = book.bookCoverImage; -} +function readingList(bookArray) { + const contentEl = document.getElementById("content"); + const ulListEl = document.getElementById("reading-list"); + + for (const book of bookArray) { + const li = document.createElement("li"); + ulListEl.appendChild(li); + li.textContent = `${book.title} by ${book.author}`; + const img = document.createElement("img"); + li.appendChild(img); + img.src = book.bookCoverImage; + + if (book.alreadyRead) { + li.style.backgroundColor = "green"; + } else { + li.style.backgroundColor = "red"; + } + } } readingList(books); // Render the list of books on the page. Each book should have a title, author and image and a background colour that is set dependent on whether we have read the book or not. From ac091339f4769d894473bfe2835f110d6c1d338d Mon Sep 17 00:00:00 2001 From: marthak1 Date: Fri, 3 Apr 2026 23:19:44 +0100 Subject: [PATCH 7/7] removed unused comment --- Sprint-3/reading-list/script.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 60d5acbfb..bcdf8ca5b 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -43,9 +43,3 @@ function readingList(bookArray) { } } readingList(books); -// Render the list of books on the page. Each book should have a title, author and image and a background colour that is set dependent on whether we have read the book or not. - -// ## 🧭 Strategy - -// Try and outline your strategy / approach for solving this problem before you get started. There is also a test suite provided to help you meet the acceptance criteria in the issue. -// The end result should look something like this \ No newline at end of file