diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html index dbdb0f471..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 6024d73a0..1eed3c88b 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -21,3 +21,29 @@ const books = [ }, ]; +document.title = "Reading list app"; + +const bookList = document.getElementById("readingList"); + +books.forEach((book) => { + const list = document.createElement("li"); + list.classList.add("book-card"); + if (book.alreadyRead) { + list.classList.add("bookRead"); + } else { + list.classList.add("bookNotRead"); + } + + const bookTitle = document.createElement("h3"); + const author = document.createElement("p"); + const bookImage = document.createElement("img"); + + bookTitle.textContent = book.title; + list.appendChild(bookTitle); + author.textContent = book.author; + list.appendChild(author); + bookImage.src = book.bookCoverImage; + list.appendChild(bookImage); + + bookList.appendChild(list); +}); diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css index 74406e64f..091a76b6a 100644 --- a/Sprint-3/reading-list/style.css +++ b/Sprint-3/reading-list/style.css @@ -1,159 +1,136 @@ -/** - * Base styles to use at the start of the class - * - * Module: HTML/CSS - * Lesson: 1,2 - * Class: Scotland 2017 - */ - html, body { - font-family: "Source Sans Pro", -apple-system, system-ui, BlinkMacSystemFont, - "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; -} - -.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; + font-family: + "Source Sans Pro", + -apple-system, + system-ui, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + "Helvetica Neue", + Arial, + sans-serif; +} + +.bookRead { + background-color: red; } -.navbar-light .navbar-nav .nav-link { - color: #292b2c; - font-weight: 600; - text-transform: uppercase; +.bookNotRead { + background-color: green; } -/* Buttons */ -.btn { - border-radius: 0.15em; +.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; } -/* Alert */ -.alert { +.book-card { 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 { + 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); + 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 { content: ""; position: absolute; - left: -1px; - top: 0; - height: 100%; - width: 1px; - background: #ce5f31; -} - -/* Jumbotron */ -.jumbotron { - border-radius: 0; -} - -/* Headings */ -.heading-underline { + 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: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; - margin-bottom: 2em; - padding-bottom: 0.5em; - border-bottom: 1px solid #dccdc6; - font-size: 1rem; - font-weight: 600; - text-transform: uppercase; + z-index: 2; } -.heading-underline:before { - content: ""; - position: absolute; - bottom: -1px; - left: 0; - width: 25%; - height: 1px; - max-width: 100px; - background: #ce5f31; -} - -/* Article */ -.article { - margin-bottom: 2em; +.book-card img { + width: 200px; + height: 280px; + object-fit: cover; + display: block; + border-radius: 0.4rem; } -.article-title { - margin-bottom: 0.5em; - font-weight: 700; +.book-card h3, +.book-card p { + width: 200px; + text-align: left; } -.article-read-more a { - font-size: 0.85em; +.book-card h3 { + margin: 0.15rem 0 0; + min-height: calc(1.28em * 2); + font-size: 1.12rem; font-weight: 700; - text-decoration: uppercase; + line-height: 1.28; + letter-spacing: -0.02em; + color: #1f2937; } -.article-read-more a:hover, -.article-read-more a:focus { - text-decoration: none; +.book-card p { + margin: 0; + font-size: 0.95rem; + font-weight: 500; + line-height: 1.35; + color: #4b5563; } -.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 (prefers-reduced-motion: reduce) { + .book-card { + transition: none; + } -@media screen and (min-width: 992px) { - .navbar-brand > img { - max-height: 80px; + .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); } }