Js2w1 Homework

Week1/homework/app.js

@@ -1,11 +1,161 @@
 'use strict';
 
-{
-  const bookTitles = [
-    // Replace with your own book titles
-    'harry_potter_chamber_secrets',
-  ];
-
-  // Replace with your own code
-  console.log(bookTitles);
+// *** 1.1
+const bookTitles = [
+  'the_brothers_karamazov',
+  'jane_eyre',
+  'to_kill_a_mockingbird',
+  'war_and_peace',
+  'don_quixote',
+  'animal_farm',
+  '1984',
+  'the_little_prince',
+  'frankenstein',
+  'crime_and_punishment',
+];
+// *** 1.2
+// console.log(bookTitles);
+
+// *** 1.3
+// const listItem = document.createElement('div');
+// document.body.appendChild(listItem);
+const createUlList = document.createElement('ul');
+document.body.appendChild(createUlList);
+
+function list() {
+  for (let i = 0; i < bookTitles.length; i++) {
+    const listItem = document.createElement('li');
+    createUlList.appendChild(listItem);
+    listItem.innerHTML = bookTitles[i];
+  }
 }
+
+// *** 1.4
+const booksInfo = {
+  the_brothers_karamazov: {
+    title: 'The Brothers Karamazov',
+    author: 'Fyodor Dostoyevsky',
+    language: 'English',
+    year: 1879,
+    link: 'https://www.goodreads.com/book/show/4934.The_Brothers_Karamazov',
+  },
+  jane_eyre: {
+    title: 'Jane Eyre',
+    author: 'Charlotte Brontë',
+    language: 'English',
+    year: 1847,
+    link: 'https://www.goodreads.com/book/show/10210.Jane_Eyre',
+  },
+  to_kill_a_mockingbird: {
+    title: 'To Kill A Mockingbird',
+    author: 'Harper Lee',
+    language: 'English',
+    year: 1960,
+    link: 'https://www.goodreads.com/book/show/2657.To_Kill_a_Mockingbird',
+  },
+  war_and_peace: {
+    title: 'War And Peace',
+    author: 'Leo Tolstoy',
+    language: 'English',
+    year: 1867,
+    link: 'https://www.goodreads.com/book/show/656.War_and_Peace',
+  },
+  don_quixote: {
+    title: 'Don Quixote',
+    author: 'Miguel de Cervantes Saavedra',
+    language: 'English',
+    year: 1605,
+    link: 'https://www.goodreads.com/book/show/3836.Don_Quixote',
+  },
+  animal_farm: {
+    title: 'Animal Farm',
+    author: 'George Orwell',
+    language: 'English',
+    year: 1945,
+    link: 'https://www.goodreads.com/book/show/170448.Animal_Farm',
+  },
+  1984: {
+    title: '1984',
+    author: 'George Orwell',
+    language: 'English',
+    year: 1949,
+    link: 'https://www.goodreads.com/book/show/40961427-1984',
+  },
+  the_little_prince: {
+    title: 'The Little Prince',
+    author: 'Antoine de Saint-Exupéry',
+    language: 'English',
+    year: 1943,
+    link: 'https://www.goodreads.com/book/show/157993.The_Little_Prince',
+  },
+  frankenstein: {
+    title: 'Frankenstein',
+    author: 'Mary Wollstonecraft Shelley',
+    language: 'English',
+    year: 1818,
+    link: 'https://www.goodreads.com/book/show/35031085-frankenstein',
+  },
+  crime_and_punishment: {
+    title: 'Crime And Punishment',
+    author: 'Fyodor Dostoyevsky',
+    language: 'English',
+    year: 1866,
+    link: 'https://www.goodreads.com/book/show/7144.Crime_and_Punishment',
+  },
+};
+
+// *** 1.5, 1.7 and 1.8
+const bookCovers = {
+  the_brothers_karamazov:
+    'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1427728126l/4934.jpg',
+  jane_eyre:
+    'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1557343311l/10210._SY475_.jpg',
+  to_kill_a_mockingbird:
+    'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1553383690l/2657.jpg',
+  war_and_peace:
+    'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1413215930l/656.jpg',
+  don_quixote:
+    'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1546112331l/3836._SY475_.jpg',
+  animal_farm:
+    'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1325861570l/170448.jpg',
+  1984: 'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1532714506l/40961427._SX318_.jpg',
+  the_little_prince:
+    'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1367545443l/157993.jpg',
+  frankenstein:
+    'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1498841231l/35031085.jpg',
+  crime_and_punishment:
+    'https://i.gr-assets.com/images/S/compressed.photo.goodreads.com/books/1382846449l/7144.jpg',
+};
+
+function getInfo() {
+  for (const key of bookTitles) {
+    const listItem = document.createElement('li');
+    createUlList.appendChild(listItem);
+    const cover = document.createElement('img');
+    listItem.appendChild(cover);
+    cover.setAttribute('src', bookCovers[key]);
+    cover.setAttribute('alt', bookTitles[key]);
+    const heading = document.createElement('h1');
+    listItem.appendChild(heading);
+    heading.innerHTML = booksInfo[key].title;
+    const authorName = document.createElement('h2');
+    listItem.appendChild(authorName);
+    authorName.innerHTML = booksInfo[key].author;
+    const bookLanguage = document.createElement('h3');
+    listItem.appendChild(bookLanguage);
+    bookLanguage.innerHTML = booksInfo[key].language;
+    const publishDate = document.createElement('h4');
+    listItem.appendChild(publishDate);
+    publishDate.innerHTML = booksInfo[key].year;
+    const linkTo = document.createElement('h5');
+    listItem.appendChild(linkTo);
+    linkTo.innerHTML = booksInfo[key].link;
+  }
+}
+getInfo();
+
+// *** 1.6
+
+//  css file created and attached to index.html
+
+//  since reaching bookCovers from here for setting src and alt attribute throws "lexical declaration `bookCovers' before initialization", it has moved below 1.7

Week1/homework/index.html

@@ -1 +1,13 @@
-<!-- replace this with your HTML content -->
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="stylesheet" type="text/css" href="style.css" />
+    <title>Js2 Practice</title>
+  </head>
+  <body>
+    <script src="app.js" type="text/javascript"></script>
+  </body>
+</html>

Week1/homework/style.css

@@ -1 +1,28 @@
-/* add your styling here */
+img {
+  width: 60vw;
+  border: 1px solid black;
+}
+li {
+  list-style: none;
+  text-align: center;
+  padding: 20px;
+  margin: 10px;
+  border: 3px solid rgba(226, 130, 130, 0.5);
+}
+
+h1 {
+  font-family: monospace;
+  font-weight: bold;
+  font-size: 3em;
+}
+h2 {
+  font-family: monospace;
+  font-size: 2em;
+}
+h3,
+h4,
+h5 {
+  font-family: Arial, Helvetica, sans-serif;
+  font-size: 1em;
+  font-style: italic;
+}