diff --git a/Sprint-3/package.json b/Sprint-3/package.json
index 711a5390f..722b1d55d 100644
--- a/Sprint-3/package.json
+++ b/Sprint-3/package.json
@@ -4,7 +4,7 @@
"license": "CC-BY-SA-4.0",
"description": "",
"scripts": {
- "test": "jest",
+ "test": "jest --config=../jest.config.js reading-list",
"format": "prettier --write ."
},
"workspaces": [
@@ -26,7 +26,7 @@
"@testing-library/dom": "^10.4.0",
"@testing-library/jest-dom": "^6.6.3",
"@testing-library/user-event": "^14.6.1",
- "jest": "^30.0.4",
+ "jest": "^30.2.0",
"jest-environment-jsdom": "^30.0.4"
}
}
diff --git a/Sprint-3/reading-list/index.html b/Sprint-3/reading-list/index.html
index dbdb0f471..dc501edef 100644
--- a/Sprint-3/reading-list/index.html
+++ b/Sprint-3/reading-list/index.html
@@ -1,10 +1,10 @@
-
+
- Title here
+ Reading list app
diff --git a/Sprint-3/reading-list/package.json b/Sprint-3/reading-list/package.json
index 96f540518..827682171 100644
--- a/Sprint-3/reading-list/package.json
+++ b/Sprint-3/reading-list/package.json
@@ -4,7 +4,7 @@
"license": "CC-BY-SA-4.0",
"description": "You must update this package",
"scripts": {
- "test": "jest --config=../jest.config.js reading-list"
+ "test": "jest"
},
"repository": {
"type": "git",
@@ -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": {
+ "@testing-library/jest-dom": "^6.9.1"
+ }
}
diff --git a/Sprint-3/reading-list/script.js b/Sprint-3/reading-list/script.js
index 6024d73a0..eb5c0fa48 100644
--- a/Sprint-3/reading-list/script.js
+++ b/Sprint-3/reading-list/script.js
@@ -20,4 +20,28 @@ const books = [
bookCoverImage: "https://blackwells.co.uk/jacket/l/9780135957059.jpg",
},
];
+function readingList() {
+ const unorderedList = document.querySelector("#reading-list");
+ for (const book of books) {
+ const newList = document.createElement("li");
+
+ const newImage = document.createElement("img");
+ newImage.src = book.bookCoverImage;
+
+ const paragraph = document.createElement("p");
+ paragraph.textContent = `${book.title} by ${book.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 39bdd921d..11e4d0503 100644
--- a/Sprint-3/reading-list/script.test.js
+++ b/Sprint-3/reading-list/script.test.js
@@ -1,3 +1,4 @@
+require("@testing-library/jest-dom");
const path = require("path");
const { JSDOM } = require("jsdom");
@@ -67,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..0aa4fc0d1 100644
--- a/Sprint-3/reading-list/style.css
+++ b/Sprint-3/reading-list/style.css
@@ -157,3 +157,12 @@ body {
max-height: 80px;
}
}
+.red {
+ background-color: red;
+}
+.read {
+ background-color: green;
+}
+.notRead {
+ background-color: red;
+}