foocoding · Abdull-Rauf · Aug 22, 2019 · Aug 22, 2019 · Aug 22, 2019 · Aug 23, 2019
diff --git a/Week1/homework/app.js b/Week1/homework/app.js
@@ -1,11 +1,97 @@
 'use strict';
 
-{
-  const bookTitles = [
-    // Replace with your own book titles
-    'harry_potter_chamber_secrets',
-  ];
-
-  // Replace with your own code
-  console.log(bookTitles);
+let bookTitles = [
+  'Harry_Potter',
+  'The Great_Gatsby',
+  'To_Kill_a _Mockingbird',
+  'The_Hobbit',
+  'Fahrenheit_451',
+  'The Catcher_in_the_Rye',
+  'Pride_and_Prejudice',
+];
+
+function booksList() {
+  let bookList = document.createElement('div');
+  let ul = document.createElement('ul');
+  bookTitles.map(book => {
+    let li = document.createElement('li');
+    let bookNames = book.replace(/_/g, ' ');
+    li.appendChild(document.createTextNode(bookNames));
+    ul.appendChild(li);
+    return document.body.appendChild(bookList.appendChild(ul));
+  });
+}
+booksList();
+
+let books = {
+  book1: {
+    book_title: 'Harry Potter',
+    author: 'J.K Rowling',
+    language: 'English',
+    cover_image: 'harrypotter.jpg',
+  },
+  book2: {
+    book_title: 'The Great Gatsby',
+    author: 'F. Scott Fitzgerald',
+    language: 'English',
+    cover_image: 'thegreat.jpg',
+  },
+  book3: {
+    book_title: 'To Kill a Mockingbird',
+    author: 'Harper Lee',
+    language: 'English',
+    cover_image: 'tokill.jpg',
+  },
+  book4: {
+    book_title: 'The Hobbit',
+    author: 'J.R.R. Tolkien',
+    language: 'English',
+    cover_image: 'thehobbit.jpg',
+  },
+  book5: {
+    book_title: 'Fahrenheit 451',
+    author: 'Ray Bradbury',
+    language: 'English',
+    cover_image: 'fahrenheit.jpg',
+  },
+  book6: {
+    book_title: 'The Catcher in the Rye',
+    author: 'J.D. Salinger',
+    language: 'English',
+    cover_image: 'thecatcher.jpg',
+  },
+
+  book7: {
+    book_title: 'Pride and Prejudice',
+    author: 'Jane Austen',
+    language: 'English',
+    cover_image: 'pap.jpg',
+  },
+};
+
+function booksDetails() {
+  let ul = document.createElement('ul');
+
+  for (let book in books) {
+    let li = document.createElement('li');
+    let img = document.createElement('IMG');
+    let p = document.createElement('p');
+    img.src = './img/' + books[book]['cover_image'];
+
+    li.appendChild(img);
+    p.innerHTML =
+      'Title: ' +
+      books[book]['book_title'] +
+      '</br>' +
+      'Author: ' +
+      books[book]['author'] +
+      '</br>' +
+      'Language: ' +
+      books[book]['language'];
+
+    li.appendChild(p);
+    ul.appendChild(li);
+  }
+  document.body.appendChild(ul);
 }
+booksDetails();
diff --git a/Week1/homework/img/fahrenheit.jpg b/Week1/homework/img/fahrenheit.jpg
diff --git a/Week1/homework/img/harrypotter.jpg b/Week1/homework/img/harrypotter.jpg
diff --git a/Week1/homework/img/pap.jpg b/Week1/homework/img/pap.jpg
diff --git a/Week1/homework/img/thecatcher.jpg b/Week1/homework/img/thecatcher.jpg
diff --git a/Week1/homework/img/thegreat.jpg b/Week1/homework/img/thegreat.jpg
diff --git a/Week1/homework/img/thehobbit.jpg b/Week1/homework/img/thehobbit.jpg
diff --git a/Week1/homework/img/tokill.jpg b/Week1/homework/img/tokill.jpg
diff --git a/Week1/homework/index.html b/Week1/homework/index.html
@@ -1 +1,21 @@
-<!-- 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" href="./style.css">
+    <title>Books</title>
+  </head>
+
+
+  <body>
+    <div id="main">
+
+    </div>
+    <script src="./app.js" type="text/javascript"></script>
+  </body>
+
+
+</html>
diff --git a/Week1/homework/style.css b/Week1/homework/style.css
@@ -1 +1,33 @@
-/* add your styling here */
+body {
+  background-color: rgba(91, 107, 84, 0.438);
+  color: rgb(3, 3, 3);
+  width: 50%;
+  margin: auto;
+}
+
+li {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto;
+  grid-gap: 3em;
+  float: left;
+  border-bottom: 1px solid;
+  text-align: center;
+  text-decoration: none;
+  padding: 1em;
+  width: 500px;
+}
+
+li>p {
+  font-size: 24px;
+  margin: auto 6em auto auto;
+  padding: 1em;
+  width: 300px;
+  text-align: left;
+
+}
+
+img {
+  width: 150px;
+  height: 200px;
+}