diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html
index dbdb0f471..9fb4759a7 100644
--- a/Sprint-3/reading-list/index.html
+++ b/Sprint-3/reading-list/index.html
@@ -4,11 +4,12 @@
- Title here
+ Reading list app
diff --git a/Sprint-3/reading-list/package.json b/Sprint-3/reading-list/package.json
index 96f540518..c0f8c2b28 100644
--- a/Sprint-3/reading-list/package.json
+++ b/Sprint-3/reading-list/package.json
@@ -13,5 +13,8 @@
"bugs": {
"url": "https://github.com/CodeYourFuture/CYF-Coursework-Template/issues"
},
- "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme"
+ "homepage": "https://github.com/CodeYourFuture/CYF-Coursework-Template#readme",
+ "devDependencies": {
+ "jest": "^30.2.0"
+ }
}
diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js
index 6024d73a0..3a58e92e4 100644
--- a/Sprint-3/reading-list/script.js
+++ b/Sprint-3/reading-list/script.js
@@ -21,3 +21,23 @@ const books = [
},
];
+function readingList() {
+ const unorderedList = document.querySelector("#reading-list");
+ for (const book of books) {
+ const newList = document.createElement("li");
+ const newImage = document.createElement("img");
+ const { title, author, bookCoverImage } = book;
+ newImage.src = bookCoverImage;
+ const paragraph = document.createElement("p");
+ paragraph.textContent = `${title} by ${author}`;
+ newList.append(paragraph, newImage);
+ if (book.alreadyRead) {
+ newList.classList.add("read");
+ } else {
+ newList.classList.add("notRead");
+ }
+
+ unorderedList.appendChild(newList);
+ }
+}
+readingList();
diff --git a/Sprint-3/reading-list/script.test.js b/Sprint-3/reading-list/script.test.js
index 4e3d7367d..fc65e4397 100644
--- a/Sprint-3/reading-list/script.test.js
+++ b/Sprint-3/reading-list/script.test.js
@@ -68,16 +68,16 @@ describe("Reading list", () => {
const firstLi = page.window.document.querySelector(
"#reading-list > :first-child"
);
- expect(firstLi).toHaveStyle({ backgroundColor: "red" });
+ expect(firstLi).toHaveClass("notRead");
const secondLi = page.window.document.querySelector(
"#reading-list > :nth-child(2)"
);
- expect(secondLi).toHaveStyle({ backgroundColor: "green" });
+ expect(secondLi).toHaveClass("read");
const thirdLi = page.window.document.querySelector(
"#reading-list > :nth-child(3)"
);
- expect(thirdLi).toHaveStyle({ backgroundColor: "green" });
+ expect(thirdLi).toHaveClass("read");
});
});
diff --git a/Sprint-3/reading-list/style.css b/Sprint-3/reading-list/style.css
index 74406e64f..5579c80df 100644
--- a/Sprint-3/reading-list/style.css
+++ b/Sprint-3/reading-list/style.css
@@ -152,6 +152,27 @@ body {
background: #87ca8a;
}
+#reading-list li {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ padding: 10px;
+ margin-bottom: 10px;
+}
+
+.read {
+ background-color: #87ca8a;
+}
+
+.notRead {
+ background-color: red;
+}
+
+#reading-list img {
+ max-width: 100%;
+ height: auto;
+ display: block;
+}
@media screen and (min-width: 992px) {
.navbar-brand > img {
max-height: 80px;