From f2c12533b3e3716f1d54945e9d95ba03e7d0951c Mon Sep 17 00:00:00 2001 From: Ben Solar Date: Sat, 25 Apr 2026 17:19:47 +0200 Subject: [PATCH 1/5] feat: render reading list with title, author, image, and background color based on read status --- Sprint-3/reading-list/index.html | 2 +- Sprint-3/reading-list/script.js | 40 ++++++++++++++++++++++++++++++++ Sprint-3/reading-list/style.css | 20 ++++++++++++++-- 3 files changed, 59 insertions(+), 3 deletions(-) diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html index dbdb0f471..fe29edc98 100644 --- a/Sprint-3/reading-list/index.html +++ b/Sprint-3/reading-list/index.html @@ -8,7 +8,7 @@
- +
diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 6024d73a0..39544d524 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -21,3 +21,43 @@ const books = [ }, ]; +// Basic strategy + +/* +- Prepare your data: You’ll have an array of book objects, each with a title, author, alreadyRead, and bookCoverImage. + +- Select where to render: Find the right place in your HTML (like a div or ul) to display the list. + +- Loop through the books: For each book, create the necessary elements (title, author, image). + +- Set styles based on alreadyRead: Change the background color depending on whether the book is read. + +- Add everything to the page: Append your new elements to the DOM so they show up. +*/ +document.title = "Reading list app"; + +const bookList = document.getElementById("readingList"); + +books.forEach((book) => { + const list = document.createElement("li"); + + if (book.alreadyRead) { + list.classList.add("bookNotread"); + } else { + list.classList.add("BookRead"); + } + + const bookTitle = document.createElement("h3"); + const author = document.createElement("p"); + const bookImage = document.createElement("img"); + + bookTitle.textContent = book.title; + author.textContent = book.author; + bookImage.src = book.bookCoverImage; + + list.appendChild(bookTitle); + list.appendChild(author); + list.appendChild(bookImage); + + bookList.appendChild(list); +}); diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css index 74406e64f..439fa9a1f 100644 --- a/Sprint-3/reading-list/style.css +++ b/Sprint-3/reading-list/style.css @@ -8,8 +8,16 @@ html, body { - font-family: "Source Sans Pro", -apple-system, system-ui, BlinkMacSystemFont, - "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; + font-family: + "Source Sans Pro", + -apple-system, + system-ui, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + "Helvetica Neue", + Arial, + sans-serif; } .site-footer { @@ -152,6 +160,14 @@ body { background: #87ca8a; } +.bookRead { + background-color: red; +} + +.bookNotRead { + background-color: green; +} + @media screen and (min-width: 992px) { .navbar-brand > img { max-height: 80px; From 7f2f5e05edd16736fa057938c6e47a036ffe5168 Mon Sep 17 00:00:00 2001 From: Ben Solar Date: Sat, 25 Apr 2026 19:46:31 +0200 Subject: [PATCH 2/5] feat: style reading list card layout --- Sprint-3/reading-list/index.html | 2 +- Sprint-3/reading-list/script.js | 6 +- Sprint-3/reading-list/style.css | 127 ++++++++++++++++++++++++------- 3 files changed, 103 insertions(+), 32 deletions(-) diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html index fe29edc98..42eec3227 100644 --- a/Sprint-3/reading-list/index.html +++ b/Sprint-3/reading-list/index.html @@ -8,7 +8,7 @@
-
    +
      diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 39544d524..c7bc9c913 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -40,11 +40,11 @@ const bookList = document.getElementById("readingList"); books.forEach((book) => { const list = document.createElement("li"); - + list.classList.add("book-card"); if (book.alreadyRead) { - list.classList.add("bookNotread"); + list.classList.add("bookNotRead"); } else { - list.classList.add("BookRead"); + list.classList.add("bookRead"); } const bookTitle = document.createElement("h3"); diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css index 439fa9a1f..48755ce0c 100644 --- a/Sprint-3/reading-list/style.css +++ b/Sprint-3/reading-list/style.css @@ -1,11 +1,3 @@ -/** - * Base styles to use at the start of the class - * - * Module: HTML/CSS - * Lesson: 1,2 - * Class: Scotland 2017 - */ - html, body { font-family: @@ -20,6 +12,92 @@ body { sans-serif; } +.bookRead { + background-color: red; +} + +.bookNotRead { + background-color: green; +} + +.reading-list { + list-style: none; + max-width: 1080px; + margin: 0 auto; + padding: 1.5rem; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(252px, 252px)); + justify-content: center; + gap: 1.6rem; +} + +.book-card { + position: relative; + overflow: hidden; + border-radius: 0.8rem; + padding: 1rem; + box-shadow: + 0 12px 22px rgba(15, 23, 42, 0.24), + 0 5px 12px rgba(15, 23, 42, 0.16); + border: 1px solid rgba(255, 255, 255, 0.35); + + display: flex; + flex-direction: column; + align-items: center; + gap: 0.55rem; +} + +.book-card::before { + content: ""; + position: absolute; + inset: 0; + background: linear-gradient( + to top, + rgba(255, 255, 255, 0.28) 0%, + rgba(255, 255, 255, 0.48) 45%, + rgba(255, 255, 255, 0.86) 100% + ); + z-index: 1; +} + +.book-card > * { + position: relative; + z-index: 2; +} + +.book-card img { + width: 200px; + height: 280px; + object-fit: cover; + display: block; + border-radius: 0.4rem; +} + +.book-card h3, +.book-card p { + width: 200px; + text-align: left; +} + +.book-card h3 { + margin: 0.15rem 0 0; + min-height: calc(1.28em * 2); + font-size: 1.12rem; + font-weight: 700; + line-height: 1.28; + letter-spacing: -0.02em; + color: #1f2937; +} + +.book-card p { + margin: 0; + font-size: 0.95rem; + font-weight: 500; + line-height: 1.35; + color: #4b5563; +} + +/* .site-footer { margin-top: 4em; } @@ -40,14 +118,15 @@ body { font-weight: 600; text-transform: uppercase; } +*/ /* Buttons */ -.btn { +/*.btn { border-radius: 0.15em; -} +}*/ /* Alert */ -.alert { +/*.alert { position: relative; margin-top: 2em; margin-bottom: 3em; @@ -69,15 +148,15 @@ body { height: 100%; width: 1px; background: #ce5f31; -} +}*/ /* Jumbotron */ -.jumbotron { +/*.jumbotron { border-radius: 0; -} +}*/ /* Headings */ -.heading-underline { +/*.heading-underline { position: relative; margin-bottom: 2em; padding-bottom: 0.5em; @@ -96,10 +175,10 @@ body { height: 1px; max-width: 100px; background: #ce5f31; -} +}*/ /* Article */ -.article { +/*.article { margin-bottom: 2em; } @@ -158,18 +237,10 @@ body { #greenBtn { background: #87ca8a; -} - -.bookRead { - background-color: red; -} +}*/ -.bookNotRead { - background-color: green; -} - -@media screen and (min-width: 992px) { +/*@media screen and (min-width: 992px) { .navbar-brand > img { max-height: 80px; } -} +}*/ From c136ba9cdac51d92158e7213dc3627fbaad4a529 Mon Sep 17 00:00:00 2001 From: Ben Solar Date: Sat, 25 Apr 2026 19:47:03 +0200 Subject: [PATCH 3/5] feat: add hover interactions to reading list cards --- Sprint-3/reading-list/style.css | 38 +++++++++++++++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css index 48755ce0c..8e9ba9993 100644 --- a/Sprint-3/reading-list/style.css +++ b/Sprint-3/reading-list/style.css @@ -40,11 +40,27 @@ body { 0 12px 22px rgba(15, 23, 42, 0.24), 0 5px 12px rgba(15, 23, 42, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); + transition: + transform 220ms cubic-bezier(0.22, 1, 0.36, 1), + box-shadow 220ms cubic-bezier(0.22, 1, 0.36, 1), + border-color 220ms ease; + will-change: transform; display: flex; flex-direction: column; align-items: center; gap: 0.55rem; + + transform-style: preserve-3d; + transform-origin: center center; +} + +.book-card:hover { + transform: perspective(1000px) translateY(-6px) rotateX(2deg) rotateY(-2deg); + box-shadow: + 0 18px 30px rgba(15, 23, 42, 0.28), + 0 8px 18px rgba(15, 23, 42, 0.18); + border-color: rgba(255, 255, 255, 0.5); } .book-card::before { @@ -60,6 +76,15 @@ body { z-index: 1; } +.book-card:hover::before { + background: linear-gradient( + to top, + rgba(255, 255, 255, 0.18) 0%, + rgba(255, 255, 255, 0.36) 45%, + rgba(255, 255, 255, 0.8) 100% + ); +} + .book-card > * { position: relative; z-index: 2; @@ -97,6 +122,19 @@ body { color: #4b5563; } +@media (prefers-reduced-motion: reduce) { + .book-card { + transition: none; + } + + .book-card:hover { + transform: none; + box-shadow: + 0 12px 22px rgba(15, 23, 42, 0.24), + 0 5px 12px rgba(15, 23, 42, 0.16); + } +} + /* .site-footer { margin-top: 4em; From b45dd8da5b6840a913549087cb94a90dd014a9d6 Mon Sep 17 00:00:00 2001 From: Ben Solar Date: Sun, 26 Apr 2026 18:30:06 +0200 Subject: [PATCH 4/5] Refactor cleanup of old unused style classes. --- Sprint-3/reading-list/style.css | 148 -------------------------------- 1 file changed, 148 deletions(-) diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css index 8e9ba9993..091a76b6a 100644 --- a/Sprint-3/reading-list/style.css +++ b/Sprint-3/reading-list/style.css @@ -134,151 +134,3 @@ body { 0 5px 12px rgba(15, 23, 42, 0.16); } } - -/* -.site-footer { - margin-top: 4em; -} - -.site-footer p { - border-top: 1px solid #dccdc6; - padding-top: 2em; - padding-bottom: 2em; -} - -.navbar-brand > img { - max-height: 40px; - width: auto; -} - -.navbar-light .navbar-nav .nav-link { - color: #292b2c; - font-weight: 600; - text-transform: uppercase; -} -*/ - -/* Buttons */ -/*.btn { - border-radius: 0.15em; -}*/ - -/* Alert */ -/*.alert { - position: relative; - margin-top: 2em; - margin-bottom: 3em; - padding-top: 1.5em; - padding-bottom: 1.5em; - border: 1px solid #dccdc6; - border-radius: 0; - font-size: 0.85rem; - line-height: 1.3em; - background: transparent; - color: #292b2c; -} - -.alert:before { - content: ""; - position: absolute; - left: -1px; - top: 0; - height: 100%; - width: 1px; - background: #ce5f31; -}*/ - -/* Jumbotron */ -/*.jumbotron { - border-radius: 0; -}*/ - -/* Headings */ -/*.heading-underline { - position: relative; - margin-bottom: 2em; - padding-bottom: 0.5em; - border-bottom: 1px solid #dccdc6; - font-size: 1rem; - font-weight: 600; - text-transform: uppercase; -} - -.heading-underline:before { - content: ""; - position: absolute; - bottom: -1px; - left: 0; - width: 25%; - height: 1px; - max-width: 100px; - background: #ce5f31; -}*/ - -/* Article */ -/*.article { - margin-bottom: 2em; -} - -.article-title { - margin-bottom: 0.5em; - font-weight: 700; -} - -.article-read-more a { - font-size: 0.85em; - font-weight: 700; - text-decoration: uppercase; -} - -.article-read-more a:hover, -.article-read-more a:focus { - text-decoration: none; -} - -.article-read-more .fa { - margin-right: 0.5em; - color: #ce5f31; -} - -.article-read-more:last-child { - margin-bottom: 0; -} - -.red { - background-color: red; -} - -.addArticle { - margin-bottom: 10px; -} - -#addArticleBtn { - margin-left: 20px; - height: 37px; -} - -.colorButton { - margin-bottom: 20px; - margin-right: 20px; - width: 100px; - height: 50px; -} - -#blueBtn { - background: #588fbd; -} - -#orangeBtn { - background: #f0ad4e; -} - -#greenBtn { - background: #87ca8a; -}*/ - -/*@media screen and (min-width: 992px) { - .navbar-brand > img { - max-height: 80px; - } -}*/ From a00bd2edbb3fd69004bd5a15a29fe8f319109fbf Mon Sep 17 00:00:00 2001 From: Ben Solar Date: Sun, 26 Apr 2026 19:08:15 +0200 Subject: [PATCH 5/5] Fix book status styling to match acceptance criteria --- Sprint-3/reading-list/script.js | 22 ++++------------------ 1 file changed, 4 insertions(+), 18 deletions(-) diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index c7bc9c913..1eed3c88b 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -21,19 +21,6 @@ const books = [ }, ]; -// Basic strategy - -/* -- Prepare your data: You’ll have an array of book objects, each with a title, author, alreadyRead, and bookCoverImage. - -- Select where to render: Find the right place in your HTML (like a div or ul) to display the list. - -- Loop through the books: For each book, create the necessary elements (title, author, image). - -- Set styles based on alreadyRead: Change the background color depending on whether the book is read. - -- Add everything to the page: Append your new elements to the DOM so they show up. -*/ document.title = "Reading list app"; const bookList = document.getElementById("readingList"); @@ -42,9 +29,9 @@ books.forEach((book) => { const list = document.createElement("li"); list.classList.add("book-card"); if (book.alreadyRead) { - list.classList.add("bookNotRead"); - } else { list.classList.add("bookRead"); + } else { + list.classList.add("bookNotRead"); } const bookTitle = document.createElement("h3"); @@ -52,11 +39,10 @@ books.forEach((book) => { const bookImage = document.createElement("img"); bookTitle.textContent = book.title; - author.textContent = book.author; - bookImage.src = book.bookCoverImage; - list.appendChild(bookTitle); + author.textContent = book.author; list.appendChild(author); + bookImage.src = book.bookCoverImage; list.appendChild(bookImage); bookList.appendChild(list);