1
- 'use strict' ;
2
- {
3
- const bookTitles = [
4
- // Replace with your own book titles
5
- 'harry_potter_chamber_secrets'
6
- ] ;
1
+ "use strict" ;
7
2
3
+ //2.1 - Declaring an array that contains 10 strings with book titles:
8
4
9
- // Replace with your own code
10
- console . log ( bookTitles ) ;
5
+ const myBookArray = [ "the_hobbit" , "the_fellowship_of_the_ring" , "the_two_towers" , "the_return_of_the_king" , "the_silmarillion" , "the_book_of_lost_tales" , "tree_and_leaf" , "the_lays_of_beleriand" , "the_return_of_the_shadow" , "the_peoples_of_middle_earth" ] ;
6
+
7
+ //Checking the array with console.log, to see if everything is in order:
8
+
9
+ //console.log(myBookArray);
10
+
11
+ /* Result:
12
+
13
+ [ 'the_hobbit',
14
+ 'the_fellowship_of_the_ring',
15
+ 'the_two_towers',
16
+ 'the_return_of_the_king',
17
+ 'the_silmarillion',
18
+ 'the_book_of_lost_tales',
19
+ 'tree_and_leaf',
20
+ 'the_lays_of_beleriand',
21
+ 'the_return_of_the_shadow',
22
+ 'the_peoples_of_middle_earth' ]
23
+
24
+ */
25
+
26
+ //2.3 - Creating a function that generates a ul with li elements for each book ID in the array using a for loop:
27
+
28
+ /* Here is the function before changing it at the step 2.5:
29
+
30
+ function createListWithBooks() {
31
+
32
+ const genUlElement = document.createElement('ul');
33
+ document.body.appendChild(genUlElement);
34
+
35
+ for (i = 0; i < myBookArray.length; i++) {
36
+ const genLiElement = document.createElement('li');
37
+ genUlElement.appendChild(genLiElement);
38
+ }
39
+ }*/
40
+
41
+ //2.4 - Creating an object containing information for each book:
42
+
43
+
44
+ const myBookCollection = {
45
+ the_hobbit : {
46
+ Title : "The Hobbit" ,
47
+ Language : "English" ,
48
+ Author : "J.R.R. Tolkien" ,
49
+ bookImg : "bookPics/the_hobbit.JPG" ,
50
+ } ,
51
+ the_fellowship_of_the_ring : {
52
+ Title : "The Fellowship Of The Ring" ,
53
+ Language : "English" ,
54
+ Author : "J.R.R. Tolkien" ,
55
+ bookImg : "bookPics/the_fellowship_of_the_ring.JPG" ,
56
+ } ,
57
+ the_two_towers : {
58
+ Title : "The Two Towers" ,
59
+ Language : "English" ,
60
+ Author : "J.R.R. Tolkien" ,
61
+ bookImg : "bookPics/the_two_towers.JPG" ,
62
+ } ,
63
+ the_return_of_the_king : {
64
+ Title : "The Return Of The King" ,
65
+ Language : "English" ,
66
+ Author : "J.R.R. Tolkien" ,
67
+ bookImg : "bookPics/the_return_of_the_king.JPG" ,
68
+ } ,
69
+ the_silmarillion : {
70
+ Title : "The Silmarillion" ,
71
+ Language : "English" ,
72
+ Author : "J.R.R. Tolkien" ,
73
+ bookImg : "bookPics/the_silmarillion.JPG" ,
74
+ } ,
75
+ the_book_of_lost_tales : {
76
+ Title : "The Book Of Lost Tales" ,
77
+ Language : "English" ,
78
+ Author : "J.R.R. Tolkien" ,
79
+ bookImg : "bookPics/the_book_of_lost_tales.JPG" ,
80
+ } ,
81
+ tree_and_leaf : {
82
+ Title : "Tree and Leaf" ,
83
+ Language : "English" ,
84
+ Author : "J.R.R. Tolkien" ,
85
+ bookImg : "bookPics/tree_and_leaf.JPG" ,
86
+ } ,
87
+ the_lays_of_beleriand : {
88
+ Title : "The Lays Of Beleriand" ,
89
+ Language : "English" ,
90
+ Author : "J.R.R. Tolkien" ,
91
+ bookImg : "bookPics/the_lays_of_beleriand.JPG" ,
92
+ } ,
93
+ the_return_of_the_shadow : {
94
+ Title : "The Return Of The Shadow" ,
95
+ Language : "English" ,
96
+ Author : "J.R.R. Tolkien" ,
97
+ bookImg : "bookPics/the_return_of_the_shadow.JPG" ,
98
+ } ,
99
+ the_peoples_of_middle_earth : {
100
+ Title : "The Peoples Of Middle-Earth" ,
101
+ Language : "English" ,
102
+ Author : "J.R.R. Tolkien" ,
103
+ bookImg : "bookPics/the_peoples_of_middle_earth.JPG" ,
104
+ }
11
105
}
106
+
107
+
108
+ //2.5 - A function that takes the actual information about the book from the object and displays that:
109
+
110
+ function createListWithBooks ( ) {
111
+
112
+ let genUlElement = document . createElement ( 'ul' ) ;
113
+ document . body . appendChild ( genUlElement ) ;
114
+
115
+
116
+ for ( let i in myBookCollection ) {
117
+
118
+ let liChild = genUlElement . appendChild ( document . createElement ( 'li' ) ) ;
119
+ let imgChild = liChild . appendChild ( document . createElement ( 'img' ) ) ;
120
+ imgChild . src = myBookCollection [ i ] . bookImg ;
121
+ let h2Child = liChild . appendChild ( document . createElement ( 'h2' ) ) ;
122
+ let h2Text = h2Child . appendChild ( document . createTextNode ( myBookCollection [ i ] . Title ) ) ;
123
+ let h3Child = liChild . appendChild ( document . createElement ( 'h3' ) ) ;
124
+ let h3Text = h3Child . appendChild ( document . createTextNode ( 'Author : ' + myBookCollection [ i ] . Author ) ) ;
125
+ let h4Child = liChild . appendChild ( document . createElement ( 'h4' ) ) ;
126
+ let h4Text = h4Child . appendChild ( document . createTextNode ( 'Language : ' + myBookCollection [ i ] . Language ) ) ;
127
+
128
+ liChild , h2Child , h2Text , h3Child , h3Text , h4Child , h4Text , imgChild = myBookCollection [ i ] ;
129
+
130
+ }
131
+
132
+ } ;
0 commit comments