Refactor reading list functionality and update styles for read/unread books

Baba05206 · Baba05206 · commit d71a8424a685 · 2025-11-30T21:10:52.000Z
diff --git 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
@@ -1,10 +1,10 @@
-<!DOCTYPE >
+<!DOCTYPE html>
 <html lang="en_US">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link rel="stylesheet" href="style.css" />
-    <title>Title here</title>
+    <title>Reading list app</title>
   </head>
   <body>
     <div id="content">
diff --git 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
@@ -20,4 +20,29 @@ 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);
+
+    // Apply classes expected by the test
+    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
@@ -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
@@ -157,3 +157,12 @@ body {
     max-height: 80px;
   }
 }
+.red {
+  background-color: red;
+}
+.read {
+  background-color: green;
+}
+.notRead {
+  background-color: red;
+}

Original file line number	Diff line number	Diff line change
`@@ -157,3 +157,12 @@ body {`
`157`	`157`	`max-height: 80px;`
`158`	`158`	`}`
`159`	`159`	`}`
	`160`	`+.red {`
	`161`	`+ background-color: red;`
	`162`	`+}`
	`163`	`+.read {`
	`164`	`+ background-color: green;`
	`165`	`+}`
	`166`	`+.notRead {`
	`167`	`+ background-color: red;`
	`168`	`+}`