From e95289491927da37a1da4d7f52e8d1a7fac4ff51 Mon Sep 17 00:00:00 2001 From: miriamjorna Date: Thu, 16 Apr 2026 23:37:04 +0100 Subject: [PATCH 1/2] changed title in html --- 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 dbdb0f471..c67805f51 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 978394b7ee70156fb75f951efef240921d43f8f1 Mon Sep 17 00:00:00 2001 From: miriamjorna Date: Sat, 18 Apr 2026 23:40:52 +0100 Subject: [PATCH 2/2] Readinglist homework --- Sprint-3/reading-list/index.html | 5 ++--- Sprint-3/reading-list/script.js | 22 ++++++++++++++++++++++ Sprint-3/reading-list/style.css | 24 +++++++++++++++++++++++- 3 files changed, 47 insertions(+), 4 deletions(-) diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html index c67805f51..f63379b16 100644 --- a/Sprint-3/reading-list/index.html +++ b/Sprint-3/reading-list/index.html @@ -7,9 +7,8 @@ Reading list app -
-
    -
    +

    My Reading List

    +
    diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 6024d73a0..e9e9c9d12 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -21,3 +21,25 @@ const books = [ }, ]; +function readingList(books) { + const bookList = document.getElementById("book-list"); + + books.forEach((book) => { + const card = document.createElement("div"); + card.classList.add("book-card"); + card.classList.add(book.alreadyRead ? "read" : "unread"); + + card.innerHTML = ` + ${book.title} +
    +

    ${book.title}

    +

    By ${book.author}

    +

    ${book.alreadyRead ? "Already read ✅" : "Not read yet 📖"}

    +
    + `; + + bookList.appendChild(card); + }); +} + +readingList(books); diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css index 74406e64f..2fe333a82 100644 --- a/Sprint-3/reading-list/style.css +++ b/Sprint-3/reading-list/style.css @@ -12,6 +12,28 @@ body { "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } +.book-card { + padding: 20px; + margin: 15px; + border-radius: 8px; + display: flex; + align-items: center; + gap: 20px; +} + +.book-card img { + height: 150px; + width: auto; +} + +.read { + background-color: green; +} + +.unread { + background-color: red; +} + .site-footer { margin-top: 4em; } @@ -133,7 +155,7 @@ body { height: 37px; } -.colorButton { +.colorBtn { margin-bottom: 20px; margin-right: 20px; width: 100px;