Skip to content

London | Nadarajah_Sripathmanathan | Reading-list | Week 3 #469

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

London | Nadarajah_Sripathmanathan | Reading-list | Week 3 #469

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
87 changes: 87 additions & 0 deletions Sprint-3/reading-list/index1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,87 @@
<!DOCTYPE html>
<html lang="en_US">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Reading List</title>
<style>
#reading-list {
list-style-type: none;
padding: 0;
}

#reading-list li {
margin-bottom: 20px;
display: flex;
align-items: center;
}

#reading-list img {
height: 150px;
margin-right: 20px;
}

#reading-list p:first-child {
font-weight: bold;
}
</style>
</head>
<body>
<div id="content">
<ul id="reading-list"></ul>
</div>
<script>
// for the tests, do not modify this array of books
const books = [
{
title: "The Design of Everyday Things",
author: "Don Norman",
alreadyRead: false,
bookCoverImage: "https://blackwells.co.uk/jacket/l/9780465050659.jpg",
},
{
title: "The Most Human Human",
author: "Brian Christian",
alreadyRead: true,
bookCoverImage:
"https://images-na.ssl-images-amazon.com/images/I/41m1rQjm5tL._SX322_BO1,204,203,200_.jpg",
},
{
title: "The Pragmatic Programmer",
author: "Andrew Hunt",
alreadyRead: true,
bookCoverImage: "https://blackwells.co.uk/jacket/l/9780135957059.jpg",
},
];

const readingList = document.getElementById("reading-list");

books.forEach((book) => {
const listItem = document.createElement("li");

const image = document.createElement("img");
image.src = book.bookCoverImage;

const bookDetails = document.createElement("div");

const title = document.createElement("p");
title.textContent = book.title;

const author = document.createElement("p");
author.textContent = `Author: ${book.author}`;

const readStatus = document.createElement("p");
readStatus.textContent = book.alreadyRead ? "Already read" : "Not read yet";
readStatus.style.color = book.alreadyRead ? "green" : "red";

bookDetails.appendChild(title);
bookDetails.appendChild(author);
bookDetails.appendChild(readStatus);

listItem.appendChild(image);
listItem.appendChild(bookDetails);
readingList.appendChild(listItem);
});
</script>
</body>
</html>
45 changes: 37 additions & 8 deletions Sprint-3/reading-list/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,52 @@
// for the tests, do not modify this array of books
// script.js

// Array of book objects
const books = [
{
title: "The Design of Everyday Things",
author: "Don Norman",
alreadyRead: false,
bookCoverImage: "https://blackwells.co.uk/jacket/l/9780465050659.jpg",
image: "https://blackwells.co.uk/jacket/l/9780465050659.jpg",
read: false, // Book has not been read
},
{
title: "The Most Human Human",
author: "Brian Christian",
alreadyRead: true,
bookCoverImage:
"https://images-na.ssl-images-amazon.com/images/I/41m1rQjm5tL._SX322_BO1,204,203,200_.jpg",
image: "https://images-na.ssl-images-amazon.com/images/I/41m1rQjm5tL._SX322_BO1,204,203,200_.jpg",
read: true, // Book has been read
},
{
title: "The Pragmatic Programmer",
author: "Andrew Hunt",
alreadyRead: true,
bookCoverImage: "https://blackwells.co.uk/jacket/l/9780135957059.jpg",
image: "https://blackwells.co.uk/jacket/l/9780135957059.jpg",
read: true, // Book has been read
},
];

// Get the reading list container
const readingList = document.getElementById("reading-list");

// Loop through the books array and create list items
books.forEach((book) => {
// Create a new list item
const listItem = document.createElement("li");

// Set the background color based on whether the book has been read
listItem.style.backgroundColor = book.read ? "green" : "red";

// Create an image element
const image = document.createElement("img");
image.src = book.image;
// Remove the alt attribute to match the test's expectation
// image.alt = `${book.title} cover`;

// Create a paragraph for the title and author
const text = document.createElement("p");
text.innerText = `${book.title} by ${book.author}`;

// Append the image and text to the list item
listItem.appendChild(image);
listItem.appendChild(text);

// Append the list item to the reading list
readingList.appendChild(listItem);
});
2 changes: 1 addition & 1 deletion Sprint-3/reading-list/script.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,4 +80,4 @@ describe("Reading list", () => {
);
expect(thirdLi).toHaveStyle({ backgroundColor: "green" });
});
});
});
Loading