Skip to content

Commit 4c816dc

Browse files
Shvan1Shvan1
authored
Update app.component.js
1 parent 4cd9f1b commit 4c816dc

1 file changed

Lines changed: 74 additions & 41 deletions

File tree

‎app.component.js‎

Lines changed: 74 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
'use strict';
2-
//1.git
2+
//1.
33

44
const bookIds = [
55
'oliver_twist',
@@ -8,7 +8,7 @@ const bookIds = [
88
'macbeth',
99
'waiting_for_godot',
1010
'arms_and_the_man',
11-
'the-merchant_of_venice',
11+
'merchant_of_venice',
1212
'crime_and_punishment',
1313
'romeo_and_juliet',
1414
'a_tale_of_two_cities',
@@ -17,88 +17,121 @@ const bookIds = [
1717

1818
//3.
1919
function books(bookIds) {
20+
const container1 = document.getElementById('container');
2021
const ul = document.createElement('ul');
21-
document.items.appendChild(ul);
22+
container1.appendChild('ul');
2223
for (let index = 0; index < bookIds.length; index++) {
2324
const li = document.createElement('li');
24-
li.textContent = bookIds[index];
25+
(li.textContent = 'List of Books:'), bookIds[index];
2526
ul.appendChild(li);
2627
}
2728
}
29+
window.addEventListener('load', books);
2830

2931
//4.
30-
const DifferentBooks = [
31-
{
32-
title: 'Oliver Twist',
32+
const DifferentBooks = {
33+
oliver_twist: {
34+
name: 'Oliver Twist',
3335
language: 'English',
3436
author: 'Charles-Dickens',
3537
},
36-
{
37-
title: 'Hamlet',
38+
hamlet: {
39+
name: 'Hamlet',
3840
language: 'English',
3941
author: 'Shakespeare',
4042
},
41-
{
42-
title: 'Antony and Cleopatra',
43+
antony_and_cleopatra: {
44+
name: 'Antony and Cleopatra',
4345
language: 'English',
4446
author: 'Shakespeare',
4547
},
46-
{
47-
title: 'Macbeth',
48+
macbeth: {
49+
name: 'Macbeth',
4850
language: 'English',
4951
author: 'Shakespeare',
5052
},
51-
{
52-
title: 'Waiting for Godot',
53+
waiting_for_godot: {
54+
name: 'Waiting for Godot',
5355
language: 'English',
5456
author: 'Samuel Becket',
5557
},
56-
{
57-
title: 'Arms and the Man',
58+
arms_and_the_man: {
59+
name: 'Arms and the Man',
5860
language: 'English',
5961
author: 'George Bernard Show',
6062
},
61-
{
62-
title: 'The Merchant of Venice',
63+
merchant_of_venice: {
64+
name: 'The Merchant of Venice',
6365
language: 'English',
6466
author: 'Shakespeare',
6567
},
66-
{
67-
title: 'Crime and Punishment',
68+
crime_and_punishment: {
69+
name: 'Crime and Punishment',
6870
language: 'Russian',
6971
author: 'Fyodor Dostoevsky',
7072
},
71-
{
72-
title: 'Romeo and Juliet',
73+
romeo_and_juliet: {
74+
name: 'Romeo and Juliet',
7375
language: 'English',
7476
author: 'Shakespeare',
7577
},
76-
{
77-
title: 'A Tale of Two Cities',
78+
a_tale_of_two_cities: {
79+
name: 'A Tale of Two Cities',
7880
language: 'English',
7981
author: 'Charles Dickens',
8082
},
81-
];
83+
};
8284

83-
//5.
84-
//Can NOT answer it.
85+
//5. Working on it.
86+
// const images = document.createElement('img');
87+
// images.src =
88+
// 'https://static01.nyt.com/images/2018/11/05/arts/05godot/05godot-articleLarge.jpg?quality=75&auto=webp&disable=upscale';
89+
// document.body.appendChild(images);
90+
// document.write('<br/>This is a great pic of Godot Cover');
8591

8692
//7.
8793
const newBookIds = {
88-
oliver_twist: './img/oliver_twist.jpg',
89-
hamlet: './img/hamlet.jpg',
90-
antony_and_cleopatra: './img/antony_and_cleopatra.jpg',
91-
macbeth: './img/macbeth.jpg',
92-
waiting_for_godot: './img/waiting_for-godot.jpg',
93-
arms_and_the_man: './img/arms_and_the_man.jpg',
94-
the_merchant_of_venice: './img/the_merchant_of_venice.jpg',
95-
crime_and_punishment: './img/crime_and_punishment.jpg',
96-
romeo_and_juliet: './img/romeo_and_juliet.jpg',
97-
a_tale_of_two_cities: './img/a_tale_of_two_cities.jpg',
94+
oliver_twist: './img/OLIVER_TWIST-2.jpg',
95+
hamlet: './img/Hamlet.jpg',
96+
antony_and_cleopatra: './img/AntonyAndCleopatra.jpg',
97+
macbeth: './img/Macbeth.jpg',
98+
waiting_for_godot: './img/Godot.jpg',
99+
arms_and_the_man: './img/ArmsAndTheMan.jpg',
100+
the_merchant_of_venice: './img/MerchantOfVenice.jpg',
101+
crime_and_punishment: './img/CrimeAndPunishment.jpg',
102+
romeo_and_juliet: './img/RomeoAndJuliet.jpg',
103+
a_tale_of_two_cities: './img/a-tale-of-two-cities.jpg',
98104
};
99105

100106
//8.
101-
const entries = DifferentBooks.length;
102-
for (let index = 0; index < entries; index++) {
103-
console.log(entries.author);
107+
function covers() {
108+
const div = document.getElementById('items');
109+
const div2 = document.createElement('h1');
110+
div2.innerHTML = 'My Favorite Books';
111+
div.appendChild(div2);
112+
div2.className = 'moreItems';
113+
114+
const divTag = document.createElement('div');
115+
divTag.className = 'my-books';
116+
const ul = document.createElement('ul');
117+
ul.className = 'books';
118+
bookIds.forEach(function(index) {
119+
const img = document.createElement('img');
120+
img.src = newBookIds[index];
121+
img.style.width = '200px';
122+
//img.style.cssFloat = 'left';
123+
img.className = 'cover';
124+
const title = document.createElement('h2');
125+
title.innerHTML = DifferentBooks[index].name;
126+
title.className = 'title';
127+
const liTag = document.createElement('li');
128+
liTag.innerHTML = DifferentBooks[index].author;
129+
liTag.className = 'book';
130+
liTag.appendChild(title);
131+
liTag.appendChild(img);
132+
ul.appendChild(liTag);
133+
div.appendChild(divTag);
134+
divTag.appendChild(ul);
135+
});
104136
}
137+
window.addEventListener('load', covers);

0 commit comments

Comments
 (0)