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('
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);
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy