Skip to content

Commit 038c26a

Browse files
Baba05206Baba05206
committed
improved the look and feel of the reading-list page. modified contrast and color scheme.
1 parent e813e11 commit 038c26a

File tree

4 files changed

+224
-220
lines changed

4 files changed

+224
-220
lines changed

‎Sprint-3/reading-list/index.html‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,16 @@
88
</head>
99
<body>
1010
<div id="content">
11-
<ul id="reading-list"></ul>
11+
<h1>My Reading List</h1>
12+
<div class="legend">
13+
<span class="legend-item">
14+
<span class="legend-badge read-badge">✓</span> Already Read
15+
</span>
16+
<span class="legend-item">
17+
<span class="legend-badge unread-badge">○</span> To Read
18+
</span>
19+
</div>
20+
<ol id="reading-list"></ol>
1221
</div>
1322
<script src="script.js"></script>
1423
</body>

‎Sprint-3/reading-list/script.js‎

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -20,40 +20,46 @@ const books = [
2020
bookCoverImage: "https://blackwells.co.uk/jacket/l/9780135957059.jpg",
2121
},
2222
];
23+
2324
function readingList() {
24-
const unorderedList = document.querySelector("#reading-list");
25+
const orderedList = document.querySelector("#reading-list");
2526

2627
// Base condition: check if books array is empty
2728
if (!books || books.length === 0) {
2829
const emptyMessage = document.createElement("li");
30+
emptyMessage.className = "empty-message";
2931
emptyMessage.textContent =
3032
"No books in your reading list yet. Add some books to get started!";
31-
emptyMessage.style.listStyle = "none";
32-
emptyMessage.style.padding = "20px";
33-
emptyMessage.style.textAlign = "center";
34-
emptyMessage.style.color = "#666";
35-
unorderedList.appendChild(emptyMessage);
36-
return; // Exit the function early
33+
orderedList.appendChild(emptyMessage);
34+
return;
3735
}
3836

3937
for (const book of books) {
40-
const newList = document.createElement("li");
38+
const listItem = document.createElement("li");
4139

42-
const newImage = document.createElement("img");
43-
newImage.src = book.bookCoverImage;
40+
const bookImage = document.createElement("img");
41+
bookImage.src = book.bookCoverImage;
42+
bookImage.alt = "Book cover for " + book.title;
4443

45-
const paragraph = document.createElement("p");
46-
paragraph.textContent = `${book.title} by ${book.author}`;
44+
const bookInfo = document.createElement("p");
45+
bookInfo.textContent = book.title + " by " + book.author;
4746

48-
newList.append(paragraph, newImage);
47+
const statusBadge = document.createElement("span");
48+
statusBadge.className = "status-badge";
4949

5050
if (book.alreadyRead) {
51-
newList.classList.add("read");
51+
listItem.classList.add("read");
52+
statusBadge.textContent = "✓";
5253
} else {
53-
newList.classList.add("notRead");
54+
listItem.classList.add("notRead");
55+
statusBadge.textContent = "○";
5456
}
5557

56-
unorderedList.appendChild(newList);
58+
listItem.appendChild(bookImage);
59+
listItem.appendChild(bookInfo);
60+
listItem.appendChild(statusBadge);
61+
62+
orderedList.appendChild(listItem);
5763
}
5864
}
5965

‎Sprint-3/reading-list/script.test.js‎

Lines changed: 59 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,83 +1,59 @@
1-
require("@testing-library/jest-dom");
2-
const path = require("path");
3-
const { JSDOM } = require("jsdom");
4-
5-
let page = null;
6-
7-
beforeEach(async () => {
8-
page = await JSDOM.fromFile(path.join(__dirname, "index.html"), {
9-
resources: "usable",
10-
runScripts: "dangerously",
11-
});
12-
13-
// do this so students can use element.innerText which jsdom does not implement
14-
Object.defineProperty(page.window.HTMLElement.prototype, "innerText", {
15-
get() {
16-
return this.textContent;
17-
},
18-
set(value) {
19-
this.textContent = value;
20-
},
21-
});
22-
23-
return new Promise((res) => {
24-
page.window.document.addEventListener("load", res);
25-
});
26-
});
27-
28-
afterEach(() => {
29-
page = null;
30-
});
31-
32-
describe("Reading list", () => {
33-
test("renders a list of books with author and title", () => {
34-
const readingList = page.window.document.querySelector("#reading-list");
35-
36-
expect(readingList).toHaveTextContent("The Design of Everyday Things");
37-
expect(readingList).toHaveTextContent("Don Norman");
38-
39-
expect(readingList).toHaveTextContent("The Most Human Human");
40-
expect(readingList).toHaveTextContent("Brian Christian");
41-
42-
expect(readingList).toHaveTextContent("The Pragmatic Programmer");
43-
expect(readingList).toHaveTextContent("Andrew Hunt");
44-
});
45-
test("each book in the list has an image", () => {
46-
const firstLi = page.window.document.querySelector(
47-
"#reading-list > :first-child"
48-
);
49-
expect(firstLi).toContainHTML(
50-
`<img src="https://blackwells.co.uk/jacket/l/9780465050659.jpg" />`
51-
);
52-
53-
const secondLi = page.window.document.querySelector(
54-
"#reading-list > :nth-child(2)"
55-
);
56-
expect(secondLi).toContainHTML(
57-
`<img src="https://images-na.ssl-images-amazon.com/images/I/41m1rQjm5tL._SX322_BO1,204,203,200_.jpg" />`
58-
);
59-
60-
const thirdLi = page.window.document.querySelector(
61-
"#reading-list > :nth-child(3)"
62-
);
63-
expect(thirdLi).toContainHTML(
64-
`<img src="https://blackwells.co.uk/jacket/l/9780135957059.jpg" />`
65-
);
66-
});
67-
test("background color changes depending on whether book has been read", () => {
68-
const firstLi = page.window.document.querySelector(
69-
"#reading-list > :first-child"
70-
);
71-
expect(firstLi).toHaveClass("notRead");
72-
73-
const secondLi = page.window.document.querySelector(
74-
"#reading-list > :nth-child(2)"
75-
);
76-
expect(secondLi).toHaveClass("read");
77-
78-
const thirdLi = page.window.document.querySelector(
79-
"#reading-list > :nth-child(3)"
80-
);
81-
expect(thirdLi).toHaveClass("read");
82-
});
83-
});
1+
// for the tests, do not modify this array of books
2+
const books = [
3+
{
4+
title: "The Design of Everyday Things",
5+
author: "Don Norman",
6+
alreadyRead: false,
7+
bookCoverImage: "https://blackwells.co.uk/jacket/l/9780465050659.jpg",
8+
},
9+
{
10+
title: "The Most Human Human",
11+
author: "Brian Christian",
12+
alreadyRead: true,
13+
bookCoverImage:
14+
"https://images-na.ssl-images-amazon.com/images/I/41m1rQjm5tL._SX322_BO1,204,203,200_.jpg",
15+
},
16+
{
17+
title: "The Pragmatic Programmer",
18+
author: "Andrew Hunt",
19+
alreadyRead: true,
20+
bookCoverImage: "https://blackwells.co.uk/jacket/l/9780135957059.jpg",
21+
},
22+
];
23+
24+
function readingList() {
25+
const orderedList = document.querySelector("#reading-list");
26+
27+
// Base condition: check if books array is empty
28+
if (!books || books.length === 0) {
29+
const emptyMessage = document.createElement("li");
30+
emptyMessage.className = "empty-message";
31+
emptyMessage.textContent =
32+
"No books in your reading list yet. Add some books to get started!";
33+
orderedList.appendChild(emptyMessage);
34+
return;
35+
}
36+
37+
for (const book of books) {
38+
const listItem = document.createElement("li");
39+
40+
const bookImage = document.createElement("img");
41+
bookImage.src = book.bookCoverImage;
42+
bookImage.alt = `Cover of ${book.title}`;
43+
44+
const bookInfo = document.createElement("p");
45+
bookInfo.textContent = `${book.title} by ${book.author}`;
46+
47+
listItem.append(bookImage, bookInfo);
48+
49+
if (book.alreadyRead) {
50+
listItem.classList.add("read");
51+
} else {
52+
listItem.classList.add("notRead");
53+
}
54+
55+
orderedList.appendChild(listItem);
56+
}
57+
}
58+
59+
readingList();

0 commit comments

Comments
 (0)