33{
44 const bookTitles = [
55 // Replace with your own book titles
6- 'harry_potter_chamber_secrets'
6+ 'physics' ,
7+ 'chemistry' ,
8+ 'computer_science' ,
9+ 'OOP' ,
10+ 'math' ,
11+ 'java' ,
12+ 'visual_programming' ,
13+ 'computer_graphics' ,
14+ 'C language' ,
15+ 'compiler_construction'
716 ] ;
817
9- // Replace with your own code
10- console . log ( bookTitles ) ;
11- }
18+ const rootDiv = document . getElementById ( 'root' ) ;
19+
20+ function generateList ( arr ) {
21+ const list = document . createElement ( 'ul' ) ;
22+ rootDiv . appendChild ( list ) ;
23+
24+ for ( let i = 0 ; i < arr . length ; i ++ ) {
25+ const listItems = document . createElement ( 'li' ) ;
26+ listItems . setAttribute ( 'id' , arr [ i ] ) ;
27+ listItems . innerText = arr [ i ] ;
28+ list . appendChild ( listItems ) ;
29+ }
30+ }
31+
32+ const booksData = {
33+ physics : {
34+ title : 'physics' ,
35+ language : 'english'
36+ } ,
37+ chemistry : {
38+ title : 'chemistry' ,
39+ language : 'english'
40+ } ,
41+ computer_science : {
42+ title : 'computer science'
43+ } ,
44+ java : {
45+ title : 'java' ,
46+ language : 'english'
47+ } ,
48+ OOP : {
49+ title : 'Object Oriented programming' ,
50+ language : 'english'
51+ } ,
52+
53+ visual_programming : {
54+ title : 'visual programming' ,
55+ language : 'english'
56+ } ,
57+
58+ compiler_construction : {
59+ title : 'compiler-construction' ,
60+ language : 'english'
61+ } ,
62+
63+ c_language : {
64+ title : 'c_language' ,
65+ language : 'english'
66+ } ,
67+
68+ computer_graphics : {
69+ title : 'computer graphics' ,
70+ language : 'english'
71+ } ,
72+
73+ math : {
74+ title : 'Mathematics' ,
75+ language : 'english'
76+ }
77+ } ;
78+
79+ function generateListModification ( obj ) {
80+ const list = document . createElement ( 'ul' ) ;
81+ rootDiv . appendChild ( list ) ;
82+
83+ for ( let i = 0 ; i < Object . keys ( obj ) . length ; i ++ ) {
84+ const listItem = document . createElement ( 'li' ) ;
85+
86+ listItem . setAttribute ( 'id' , Object . keys ( obj ) [ i ] ) ;
87+ list . appendChild ( listItem ) ;
88+
89+ const listTitle = document . createElement ( 'h2' ) ;
90+ listTitle . innerText = 'Title: ' + obj [ Object . keys ( obj ) [ i ] ] . title ;
91+ list . appendChild ( listTitle ) ;
92+
93+ const listLanguage = document . createElement ( 'h3' ) ;
94+ listLanguage . innerText = 'Language: ' + obj [ Object . keys ( obj ) [ i ] ] . language ;
95+ list . appendChild ( listLanguage ) ;
96+ }
97+ }
98+ generateListModification ( booksData ) ;
99+
100+ const bookCovers = {
101+ physics : './img/physics.jpg' ,
102+ chemistry : './img/chemistry.jpg' ,
103+ math : './img/math.jpg' ,
104+ compiler_construction : './img/compiler construction.jpg' ,
105+ computer_graphics : './img/computer_graphics.jpg' ,
106+ computer_science : './img/computer_science.jpg' ,
107+ c_language : './img/c_language.jpg' ,
108+ visual_programming : './img/visual programming.jpg' ,
109+ OOP : './img/oop.jpg' ,
110+ java : './img/java.jpg'
111+ } ;
112+
113+ function viewImages ( obj ) {
114+ for ( let i = 0 ; i < Object . keys ( obj ) . length ; i ++ ) {
115+ const test = document . getElementById ( Object . keys ( obj ) [ i ] ) ;
116+ const picture = document . createElement ( 'img' ) ;
117+ picture . setAttribute ( 'src' , obj [ Object . keys ( obj ) [ i ] ] ) ;
118+ picture . setAttribute ( 'alt' , 'books cover' ) ;
119+ picture . setAttribute ( 'class' , 'bookCovers' ) ;
120+
121+ test . appendChild ( picture ) ;
122+ }
123+ }
124+ viewImages ( bookCovers ) ;
125+ // eslint-disable-next-line prettier/prettier
126+ }
0 commit comments