Skip to content

London|25-ITP-September|Alexandru Pocovnicu|Sprint 3|Reading list #852

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
alexandru-pocovnicu wants to merge 14 commits into from
Closed

London|25-ITP-September|Alexandru Pocovnicu|Sprint 3|Reading list #852

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
71fa218
Add initial test file for mean calculations
alexandru-pocovnicu Oct 24, 2025
927769b
Add mean.js file for mean calculations
alexandru-pocovnicu Oct 24, 2025
a393af9
Remove mean.js and mean.test.js files
alexandru-pocovnicu Oct 26, 2025
c26934b
Update title in index.html to reflect the app name
alexandru-pocovnicu Nov 13, 2025
43d53c5
Implement renderBooks function to display reading list with styling b…
alexandru-pocovnicu Nov 15, 2025
744f0a7
Add styles for reading list items and images
alexandru-pocovnicu Nov 15, 2025
03d9f08
Fix formatting of reading list in index.html for better readability
alexandru-pocovnicu Nov 15, 2025
7c2dfb3
Rename renderBooks function to readingList for consistency and clarity
alexandru-pocovnicu Nov 15, 2025
3cac639
added classes instead of in-line style
alexandru-pocovnicu Nov 23, 2025
74ccd13
added backgroud colors to the elements
alexandru-pocovnicu Nov 23, 2025
0ecd3e0
refactored function to use object destructuring in order to get field…
alexandru-pocovnicu Nov 23, 2025
8dc9906
changed test to check for class instead of baxckground color
alexandru-pocovnicu Nov 23, 2025
ff160fc
changed code to append two nodes in one line
alexandru-pocovnicu Nov 23, 2025
24465d2
added style to the images
alexandru-pocovnicu Nov 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions Sprint-3/reading-list/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@
<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">
<ul id="reading-list"></ul>
<ul id="reading-list">
</ul>
</div>
<script src="script.js"></script>
</body>
Expand Down
5 changes: 4 additions & 1 deletion Sprint-3/reading-list/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
20 changes: 20 additions & 0 deletions Sprint-3/reading-list/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,23 @@ const books = [
},
];

function readingList() {
const unorderedList = document.querySelector("#reading-list");
Copy link
Contributor

@jennethydyrova jennethydyrova Nov 22, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this a good name for the variable? Another thing, what if you code cannot find this dom element? How can you guard your function against it?

for (const book of books) {
const newList = document.createElement("li");
const newImage = document.createElement("img");
const { title, author, bookCoverImage } = book;
Copy link
Contributor

@jennethydyrova jennethydyrova Nov 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You could do something more interesting. Just fyi

  for (const {title, author, bookCoverImage, alreadyRead} of books) {}

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();
6 changes: 3 additions & 3 deletions Sprint-3/reading-list/script.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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");
});
});
21 changes: 21 additions & 0 deletions Sprint-3/reading-list/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down