diff --git a/week-3/reading-list/index.html b/week-3/reading-list/index.html index dbdb0f47..a9ce3aa8 100644 --- a/week-3/reading-list/index.html +++ b/week-3/reading-list/index.html @@ -1,15 +1,19 @@ - + - - - - - Title here - - -
- -
- - - + + + + + + + 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 6024d73a..68600e0d 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,28 @@ const books = [ }, ]; + +const getReadingList = document.getElementById("content"); +const listOfBooks = document.getElementById("reading-list"); + +for (const item of books) { + const li = document.createElement("li"); + + + const p = document.createElement("p"); + p.textContent = `${item.title} by ${item.author}`; + + const image = document.createElement("img"); + image.src = item.bookCoverImage; + + 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 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; }