From 39451d9b98ce4f09076c1a78287294eaf7a05b05 Mon Sep 17 00:00:00 2001 From: Your Name Date: Tue, 23 Jan 2024 11:40:20 +0000 Subject: [PATCH 1/2] reading list complete --- week-3/reading-list/index.html | 14 +++++++++++++- week-3/reading-list/script.js | 21 +++++++++++++++++++++ week-3/reading-list/style.css | 4 ++++ 3 files changed, 38 insertions(+), 1 deletion(-) diff --git a/week-3/reading-list/index.html b/week-3/reading-list/index.html index dbdb0f47..f3ef416e 100644 --- a/week-3/reading-list/index.html +++ b/week-3/reading-list/index.html @@ -4,7 +4,8 @@ - Title here + + Reading list app
@@ -13,3 +14,14 @@ + + + \ No newline at end of file diff --git a/week-3/reading-list/script.js b/week-3/reading-list/script.js index 6024d73a..995a898d 100644 --- a/week-3/reading-list/script.js +++ b/week-3/reading-list/script.js @@ -1,3 +1,4 @@ + // for the tests, do not modify this array of books const books = [ { @@ -21,3 +22,23 @@ const books = [ }, ]; + +const getReadingList = document.getElementById("content"); +const listOfBooks = document.getElementById("reading-list"); +console.log(getReadingList); + +for (const item of books){ + const li = document.createElement("li"); + listOfBooks.appendChild(li); + + const p = document.createElement("p"); + li.appendChild(p); + p.textContent = `${item.title} by ${item.author}`; + + const image = document.createElement("img"); + li.appendChild(image); + image.src = item.bookCoverImage; + + if (item.alreadyRead === true){li.setAttribute("class", "green")} + else {li.setAttribute("class", "red")} +} \ No newline at end of file diff --git a/week-3/reading-list/style.css b/week-3/reading-list/style.css index 74406e64..778b4bdb 100644 --- a/week-3/reading-list/style.css +++ b/week-3/reading-list/style.css @@ -124,6 +124,10 @@ body { background-color: red; } +.green{ + background-color: green; +} + .addArticle { margin-bottom: 10px; } From fefaad92c3fd4feba7d7e322552a33177235fc76 Mon Sep 17 00:00:00 2001 From: Your Name Date: Mon, 19 Feb 2024 11:46:04 +0000 Subject: [PATCH 2/2] changed according to Altoms feedback --- week-3/reading-list/index.html | 40 ++++++++++++++-------------------- week-3/reading-list/script.js | 19 ++++++++++------ 2 files changed, 28 insertions(+), 31 deletions(-) diff --git a/week-3/reading-list/index.html b/week-3/reading-list/index.html index f3ef416e..a9ce3aa8 100644 --- a/week-3/reading-list/index.html +++ b/week-3/reading-list/index.html @@ -1,27 +1,19 @@ - + - - - - - - Reading list app - - -
-
    -
    - - - + + + + - \ No newline at end of file + Reading list app + + + +
    +
      +
      + + + + \ No newline at end of file diff --git a/week-3/reading-list/script.js b/week-3/reading-list/script.js index 995a898d..68600e0d 100644 --- a/week-3/reading-list/script.js +++ b/week-3/reading-list/script.js @@ -25,20 +25,25 @@ const books = [ const getReadingList = document.getElementById("content"); const listOfBooks = document.getElementById("reading-list"); -console.log(getReadingList); -for (const item of books){ +for (const item of books) { const li = document.createElement("li"); - listOfBooks.appendChild(li); + const p = document.createElement("p"); - li.appendChild(p); p.textContent = `${item.title} by ${item.author}`; const image = document.createElement("img"); - li.appendChild(image); image.src = item.bookCoverImage; - if (item.alreadyRead === true){li.setAttribute("class", "green")} - else {li.setAttribute("class", "red")} + if (item.alreadyRead === true) { + li.setAttribute("class", "green") + } else { + li.setAttribute("class", "red") + } + + + listOfBooks.appendChild(li); + li.appendChild(p); + li.appendChild(image); } \ No newline at end of file