HackYourFuture · BassamHager · Jan 10, 2019
diff --git a/Week1/homework/app.js b/Week1/homework/app.js
@@ -2,10 +2,112 @@
 
 {
   const bookTitles = [
-    // Replace with your own book titles
-    'harry_potter_chamber_secrets'
+    'the_psychopath_test',
+    'against_happiness',
+    'the_bell_jar',
+    'american_psycho',
+    'amsterdam',
+    'the_brief_history_of_the_dead',
+    'a_clockwork_orange',
+    'columbine',
+    'on_seeing_and_noticing',
+    'the_craftsman'
   ];
 
-  // Replace with your own code
-  console.log(bookTitles);
+  // 1.3
+  function createList() {
+    const ol = document.createElement('ol');
+    bookTitles.forEach(title => {
+      const li = document.createElement('li');
+      li.textContent = title;
+      ol.appendChild(li);
+    });
+    document.body.appendChild(ol);
+  }
+  window.onload = createList;
+
+  // 1.4
+  const booksObj = {
+    the_psychopath_test: {
+      title: 'the psychopath test',
+      language: 'English',
+      author: 'Jon Ronson'
+    },
+    against_happiness: {
+      title: 'against happiness',
+      language: 'English',
+      author: 'Eric G. Wilson'
+    },
+    the_bell_jar: { title: 'the bell jar', language: 'English', author: 'Sylvia Plaith' },
+    american_psycho: { title: 'american psycho', language: 'English', author: 'Bret Easton Ellis' },
+    amsterdam: { title: 'amsterdam', language: 'English', author: 'Ian McEwan' },
+    the_brief_history_of_the_dead: {
+      title: 'the brief history of the dead',
+      language: 'English',
+      author: 'Kevin Brockmeier'
+    },
+    a_clockwork_orange: {
+      title: 'a clockwork orange',
+      language: 'English',
+      author: 'Anthony Burgess'
+    },
+    columbine: { title: 'columbine', language: 'English', author: 'Dave Cullen' },
+    on_seeing_and_noticing: {
+      title: 'on seeing and noticing',
+      language: 'English',
+      author: 'Alain de Botton'
+    },
+    the_craftsman: { title: 'the craftsman', language: 'English', author: 'Richard Sennett' }
+  };
+
+  const h2 = document.createElement('h2');
+  const p = document.createElement('p');
+  const h3 = document.createElement('h3');
+  const valuesBooksObj = Object.values(booksObj);
+  const body = document.body;
+  function displayBooksObjInfo() {
+    valuesBooksObj.forEach(obj => {
+      h2.textContent = obj.title;
+      p.textContent = obj.language;
+      h3.textContent = obj.author;
+      body.appendChild(h2);
+      body.appendChild(p);
+      body.appendChild(h3);
+      body.innerHTML += '<hr>';
+    });
+  }
+  window.onload = displayBooksObjInfo;
+
+  // 1.7
+  const booksCoversObj = {
+    the_psychopath_test: './imgs/the_psychopath_test.jpg',
+    against_happiness: './imgs/against_happiness.jpg',
+    the_bell_jar: './imgs/the_bell_jar.jpg',
+    american_psycho: './imgs/american_psycho.jpg',
+    amsterdam: './imgs/amsterdam.jpg',
+    the_brief_history_of_the_dead: './imgs/the_brief_history_of_the_dead.jpg',
+    a_clockwork_orange: './imgs/a_clockwork_orange.jpg',
+    columbine: './imgs/columbine.jpg',
+    on_seeing_and_noticing: './imgs/on_seeing_and_noticing.jpg',
+    the_craftsman: './imgs/the_craftsman.jpg'
+  };
+
+  // 1.8
+  const keysBooksCoversObj = Object.keys(booksCoversObj);
+  const valuesCovers = Object.values(booksCoversObj);
+  function displayBooksCovers() {
+    keysBooksCoversObj.forEach(book => {
+      const li = document.createElement('li');
+      li.textContent = book;
+      document.body.appendChild(li);
+      valuesCovers.forEach(cover => {
+        const img = document.createElement('img');
+        img.setAttribute('src', `${cover}`);
+        if (cover.includes(book)) {
+          document.body.appendChild(img);
+        }
+      });
+    });
+  }
+  window.onload = displayBooksCovers;
 }
diff --git a/Week1/homework/imgs/a_clockwork_orange.jpg b/Week1/homework/imgs/a_clockwork_orange.jpg
diff --git a/Week1/homework/imgs/against_happiness.jpg b/Week1/homework/imgs/against_happiness.jpg
diff --git a/Week1/homework/imgs/american_psycho.jpg b/Week1/homework/imgs/american_psycho.jpg
diff --git a/Week1/homework/imgs/amsterdam.jpg b/Week1/homework/imgs/amsterdam.jpg
diff --git a/Week1/homework/imgs/columbine.jpg b/Week1/homework/imgs/columbine.jpg
diff --git a/Week1/homework/imgs/on_seeing_and_noticing.jpg b/Week1/homework/imgs/on_seeing_and_noticing.jpg
diff --git a/Week1/homework/imgs/the_bell_jar.jpg b/Week1/homework/imgs/the_bell_jar.jpg
diff --git a/Week1/homework/imgs/the_brief_history_of_the_dead.jpg b/Week1/homework/imgs/the_brief_history_of_the_dead.jpg
diff --git a/Week1/homework/imgs/the_craftsman.jpg b/Week1/homework/imgs/the_craftsman.jpg
diff --git a/Week1/homework/imgs/the_psychopath_test.jpg b/Week1/homework/imgs/the_psychopath_test.jpg
diff --git a/Week1/homework/index.html b/Week1/homework/index.html
@@ -1 +1,15 @@
-<!-- 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" />
+  <title>JS: Week 1 Homework</title>
+  <link rel="stylesheet" href="style.css" />
+  <script src="app.js"></script>
+</head>
+
+<body></body>
+
+</html>
diff --git a/Week1/homework/style.css b/Week1/homework/style.css
@@ -1 +1,41 @@
-/* add your styling here */
+body {
+  margin: auto;
+  padding: 5%;
+  background-color: #333;
+  color: gray;
+  text-align: center;
+}
+
+h2 {
+  width: 40%;
+  margin: auto;
+  color: blue;
+  text-shadow: 1px 1px yellow;
+  background: lightgray;
+  line-height: 2em;
+  border: 1px inset maroon;
+}
+
+h3 {
+  color: mediumvioletred;
+  text-decoration: underline;
+}
+
+hr {
+  width: 40%;
+  margin: 12% auto 0;
+}
+
+img {
+  width: 30%;
+  border: 1px ridge maroon;
+  margin: auto auto 10%;
+}
+
+li {
+  list-style-type: none;
+  font-size: 300%;
+  font-weight: bold;
+  margin: 3%;
+  color: beige;
+}
diff --git a/Week3/homework/index.html b/Week3/homework/index.html
@@ -0,0 +1,13 @@
+<!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">
+  <title>3wk homework js2</title>
+</head>
+<body>
+  <h1>:)</h1>
+</body>
+<script src="step2-1.js"></script>
+</html>
diff --git a/Week3/homework/step2-1.js b/Week3/homework/step2-1.js
@@ -1,9 +1,10 @@
 'use strict';
-
+// document.body.style.backgroundColor = "sky blue";
 function foo(func) {
   // What to do here?
+  func();
   // Replace this comment and the next line with your code
-  console.log(func);
+  console.log('thank you');
 }
 
 function bar() {
@@ -13,4 +14,4 @@ function bar() {
 foo(bar);
 
 // Do not change or remove anything below this line
-module.exports = foo;
+module.exports = foo;