Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

NW6 | Hadika Malik | Module JS2 | Week 3 | Reading list #216

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
32 changes: 18 additions & 14 deletions week-3/reading-list/index.html
Original file line number Diff line number Diff line change
@@ -1,15 +1,19 @@
<!DOCTYPE >
<!DOCTYPE>
<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>
</head>
<body>
<div id="content">
<ul id="reading-list"></ul>
</div>
<script src="script.js"></script>
</body>
</html>

<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />

<title>Reading list app</title>
</head>

<body>
<div id="content">
<ul id="reading-list"></ul>
</div>
<script src="script.js"></script>
</body>

</html>
26 changes: 26 additions & 0 deletions week-3/reading-list/script.js
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@

// for the tests, do not modify this array of books
const books = [
{
Expand All @@ -21,3 +22,28 @@ const books = [
},
];


const getReadingList = document.getElementById("content");
const listOfBooks = document.getElementById("reading-list");

for (const item of books) {
const li = document.createElement("li");


const p = document.createElement("p");
p.textContent = `${item.title} by ${item.author}`;

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

if (item.alreadyRead === true) {
li.setAttribute("class", "green")
} else {
li.setAttribute("class", "red")
}


listOfBooks.appendChild(li);
li.appendChild(p);
li.appendChild(image);
}
4 changes: 4 additions & 0 deletions week-3/reading-list/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,10 @@ body {
background-color: red;
}

.green{
background-color: green;
}

.addArticle {
margin-bottom: 10px;
}
Expand Down