1- 'use strict' ;
2- {
3- const bookTitles = [
4- // Replace with your own book titles
5- 'harry_potter_chamber_secrets'
6- ] ;
1+ "use strict" ;
72
3+ //2.1 - Declaring an array that contains 10 strings with book titles:
84
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+ }
11105}
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