JavaScript2/Week1/homework/app.js at 7ed7ae72ad9f7a60c9e521a139eab1b09549a20e · foocoding/JavaScript2 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
'use strict';

{
  // const bookTitles = [
  //   // Replace with your own book titles
  //   'bro_code',
  //   'the_secret',
  //   'eat_pray_love',
  //   'azazil',
  //   'the_miserables',
  //   'cockroach_man',
  //   'the_black_suits_you',
  //   'the_broken_wings',
  //   'the_alchemist',
  //   'aleph',
  // ];

  const books = {
    bro_code: {
      title: 'Bro Code',
      language: 'English',
      author: 'Barney Stinson',
    },
    the_secret: {
      title: 'The Secret',
      language: 'English',
      author: 'Rhonda Byrne',
    },
    eat_pray_love: {
      title: 'Eat Pray Love',
      language: 'English',
      author: 'Elizabeth Gilbert',
    },
    azazil: {
      title: 'Azazil',
      language: 'Arabic',
      author: 'Yusef Zaidan',
    },
    the_miserables: {
      title: 'The Miserables',
      language: 'Arabic',
      author: 'Victor Hugo',
    },
    alnabati: {
      title: 'Al-Nabati',
      language: 'Arabic',
      author: 'Yusef Zaidan',
    },
    the_black_suits_you: {
      title: 'The Black Suits You',
      language: 'Arabic',
      author: 'Ahlam Mustaghanmi',
    },
    the_broken_wings: {
      title: 'The Broken Wings',
      language: 'Arabic',
      author: 'Jubran Khalil Jubran',
    },
    the_alchemist: {
      title: 'The Alchemist',
      language: 'Arabic',
      author: 'Paulo Coelho',
    },
    aleph: {
      title: 'Aleph',
      language: 'Arabic',
      author: 'Paulo Coelho',
    },
  };

  const booksImages = {
    bro_code: './images/bro_code.jpg',
    the_secret: './images/the_secret.jpg',
    eat_pray_love: './images/eat_pray_love.jpg',
    azazil: './images/azazil.jpg',
    the_miserables: './images/the_miserables.jpg',
    alnabati: './images/alnabati.jpg',
    the_black_suits_you: './images/the_black_suits_you.jpg',
    the_broken_wings: './images/the_broken_wings.jpg',
    the_alchemist: './images/the_alchemist.jpg',
    aleph: './images/aleph.jpg',
  };

  function listMaker() {
    const list = document.createElement('ul');
    list.className = 'container';
    document.body.appendChild(list);
    for (const key of Object.keys(books)) {
      const item = document.createElement('li');
      item.className = 'list-item';
      const heading = document.createElement('h2');
      heading.className = 'item-heading';
      heading.innerText = books[key].title;
      item.appendChild(heading);
      const contentContainer = document.createElement('div');
      contentContainer.setAttribute('id', key);
      contentContainer.className = 'content-container';
      item.appendChild(contentContainer);
      const content = document.createElement('div');
      content.className = 'item-content';
      content.innerHTML = `<p>Language: ${books[key].language}</p><p>Author: ${
        books[key].author
      }</p>`;
      contentContainer.appendChild(content);
      list.appendChild(item);
    }
    for (const key of Object.keys(booksImages)) {
      const contentContainer = document.getElementById(key);
      const imageContainer = document.createElement('div');
      imageContainer.className = 'item-image';
      contentContainer.appendChild(imageContainer);
      const bookImage = document.createElement('img');
      bookImage.setAttribute('src', booksImages[key]);
      bookImage.setAttribute('alt', `book ${booksImages[key].replace('_', ' ')} cover`);
      imageContainer.appendChild(bookImage);
    }
  }
  listMaker();

}