diff --git a/app.component.js b/app.component.js
new file mode 100644
index 000000000..6019a0067
--- /dev/null
+++ b/app.component.js
@@ -0,0 +1,137 @@
+'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);