From a0389f53cac74d8d66f69c32ee9ca0a8dd3bd17b Mon Sep 17 00:00:00 2001 From: sripathman Date: Sun, 30 Mar 2025 22:52:32 +0100 Subject: [PATCH] first commit --- Sprint-3/reading-list/index1.html | 87 ++++++++ Sprint-3/reading-list/script.js | 45 +++- Sprint-3/reading-list/script.test.js | 2 +- Sprint-3/reading-list/style.css | 302 +++++++++++++-------------- 4 files changed, 276 insertions(+), 160 deletions(-) create mode 100644 Sprint-3/reading-list/index1.html diff --git a/Sprint-3/reading-list/index1.html b/Sprint-3/reading-list/index1.html new file mode 100644 index 000000000..a7e8368fa --- /dev/null +++ b/Sprint-3/reading-list/index1.html @@ -0,0 +1,87 @@ + + + + + + Reading List + + + +
+ +
+ + + \ No newline at end of file diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js index 6024d73a0..8d76b28af 100644 --- a/Sprint-3/reading-list/script.js +++ b/Sprint-3/reading-list/script.js @@ -1,23 +1,52 @@ -// for the tests, do not modify this array of books +// script.js + +// Array of book objects const books = [ { title: "The Design of Everyday Things", author: "Don Norman", - alreadyRead: false, - bookCoverImage: "https://blackwells.co.uk/jacket/l/9780465050659.jpg", + image: "https://blackwells.co.uk/jacket/l/9780465050659.jpg", + read: false, // Book has not been read }, { title: "The Most Human Human", author: "Brian Christian", - alreadyRead: true, - bookCoverImage: - "https://images-na.ssl-images-amazon.com/images/I/41m1rQjm5tL._SX322_BO1,204,203,200_.jpg", + image: "https://images-na.ssl-images-amazon.com/images/I/41m1rQjm5tL._SX322_BO1,204,203,200_.jpg", + read: true, // Book has been read }, { title: "The Pragmatic Programmer", author: "Andrew Hunt", - alreadyRead: true, - bookCoverImage: "https://blackwells.co.uk/jacket/l/9780135957059.jpg", + image: "https://blackwells.co.uk/jacket/l/9780135957059.jpg", + read: true, // Book has been read }, ]; +// Get the reading list container +const readingList = document.getElementById("reading-list"); + +// Loop through the books array and create list items +books.forEach((book) => { + // Create a new list item + const listItem = document.createElement("li"); + + // Set the background color based on whether the book has been read + listItem.style.backgroundColor = book.read ? "green" : "red"; + + // Create an image element + const image = document.createElement("img"); + image.src = book.image; + // Remove the alt attribute to match the test's expectation + // image.alt = `${book.title} cover`; + + // Create a paragraph for the title and author + const text = document.createElement("p"); + text.innerText = `${book.title} by ${book.author}`; + + // Append the image and text to the list item + listItem.appendChild(image); + listItem.appendChild(text); + + // Append the list item to the reading list + readingList.appendChild(listItem); +}); \ No newline at end of file diff --git a/Sprint-3/reading-list/script.test.js b/Sprint-3/reading-list/script.test.js index 4e3d7367d..27af97086 100644 --- a/Sprint-3/reading-list/script.test.js +++ b/Sprint-3/reading-list/script.test.js @@ -80,4 +80,4 @@ describe("Reading list", () => { ); expect(thirdLi).toHaveStyle({ backgroundColor: "green" }); }); -}); +}); \ No newline at end of file diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css index 74406e64f..468a66869 100644 --- a/Sprint-3/reading-list/style.css +++ b/Sprint-3/reading-list/style.css @@ -6,154 +6,154 @@ * 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; -} - -.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; - } -} + 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; + } + + .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; + } + } \ No newline at end of file