app.component.js

'use strict';
//1.

const bookIds = [
  'oliver_twist',
  'hamlet',
  'antony_and_cleopatra',
  'macbeth',
  'waiting_for_godot',
  'arms_and_the_man',
  'merchant_of_venice',
  'crime_and_punishment',
  'romeo_and_juliet',
  'a_tale_of_two_cities',
];
//console.log(bookIds);

//3.
function books(bookIds) {
  const container1 = document.getElementById('container');
  const ul = document.createElement('ul');
  container1.appendChild('ul');
  for (let index = 0; index < bookIds.length; index++) {
    const li = document.createElement('li');
    (li.textContent = 'List of Books:'), bookIds[index];
    ul.appendChild(li);
  }
}
window.addEventListener('load', books);

//4.
const DifferentBooks = {
  oliver_twist: {
    name: 'Oliver Twist',
    language: 'English',
    author: 'Charles-Dickens',
  },
  hamlet: {
    name: 'Hamlet',
    language: 'English',
    author: 'Shakespeare',
  },
  antony_and_cleopatra: {
    name: 'Antony and Cleopatra',
    language: 'English',
    author: 'Shakespeare',
  },
  macbeth: {
    name: 'Macbeth',
    language: 'English',
    author: 'Shakespeare',
  },
  waiting_for_godot: {
    name: 'Waiting for Godot',
    language: 'English',
    author: 'Samuel Becket',
  },
  arms_and_the_man: {
    name: 'Arms and the Man',
    language: 'English',
    author: 'George Bernard Show',
  },
  merchant_of_venice: {
    name: 'The Merchant of Venice',
    language: 'English',
    author: 'Shakespeare',
  },
  crime_and_punishment: {
    name: 'Crime and Punishment',
    language: 'Russian',
    author: 'Fyodor Dostoevsky',
  },
  romeo_and_juliet: {
    name: 'Romeo and Juliet',
    language: 'English',
    author: 'Shakespeare',
  },
  a_tale_of_two_cities: {
    name: 'A Tale of Two Cities',
    language: 'English',
    author: 'Charles Dickens',
  },
};

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

//7.
const newBookIds = {
  oliver_twist: './img/OLIVER_TWIST-2.jpg',
  hamlet: './img/Hamlet.jpg',
  antony_and_cleopatra: './img/AntonyAndCleopatra.jpg',
  macbeth: './img/Macbeth.jpg',
  waiting_for_godot: './img/Godot.jpg',
  arms_and_the_man: './img/ArmsAndTheMan.jpg',
  the_merchant_of_venice: './img/MerchantOfVenice.jpg',
  crime_and_punishment: './img/CrimeAndPunishment.jpg',
  romeo_and_juliet: './img/RomeoAndJuliet.jpg',
  a_tale_of_two_cities: './img/a-tale-of-two-cities.jpg',
};

//8.
function covers() {
  const div = document.getElementById('items');
  const div2 = document.createElement('h1');
  div2.innerHTML = 'My Favorite Books';
  div.appendChild(div2);
  div2.className = 'moreItems';

  const divTag = document.createElement('div');
  divTag.className = 'my-books';
  const ul = document.createElement('ul');
  ul.className = 'books';
  bookIds.forEach(function(index) {
    const img = document.createElement('img');
    img.src = newBookIds[index];
    img.style.width = '200px';
    //img.style.cssFloat = 'left';
    img.className = 'cover';
    const title = document.createElement('h2');
    title.innerHTML = DifferentBooks[index].name;
    title.className = 'title';
    const liTag = document.createElement('li');
    liTag.innerHTML = DifferentBooks[index].author;
    liTag.className = 'book';
    liTag.appendChild(title);
    liTag.appendChild(img);
    ul.appendChild(liTag);
    div.appendChild(divTag);
    divTag.appendChild(ul);
  });
}
window.addEventListener('load', covers);