foocoding · mahertawila · May 12, 2019 · May 12, 2019 · May 12, 2019
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -7,13 +7,29 @@
   "cSpell.words": [
     "Debouncing",
     "Maartje",
+    "ahlam",
+    "alnabati",
+    "alsamman",
+    "azazil",
     "blabla",
+    "byrne",
     "codewars",
+    "coelho",
+    "ghadah",
+    "jubran",
     "keyup",
+    "khalil",
     "maartje's",
     "maartjes",
+    "miserables",
+    "mustaghanmi",
+    "nabati",
     "roverjs",
+    "samman",
+    "stinson",
     "taalmap",
-    "trollface"
+    "trollface",
+    "yusef",
+    "zaidan"
   ]
 }
diff --git a/README.md b/README.md
@@ -1,32 +1,36 @@
 > Please help us improve and share your feedback! If you find better tutorials
-or links, please share them by [opening a pull request](https://github.com/FooCoding/JavaScript2/pulls).
+> or links, please share them by [opening a pull request](https://github.com/FooCoding/JavaScript2/pulls).
 
 # JavaScript 2
 
+- link to homework week1 : https://mahertawila.github.io/JavaScript2/Week1/homework/
+
 Here you can find course content and homework for the JavaScript2 module
 
-|Week|Topic|Read|Homework|
-|----|-----|----|--------|
-|1.|• Capturing user input through forms <br>• [Events](http://javascript.info/introduction-browser-events)<br>• [Basic DOM manipulations](../../../fundamentals/blob/master/fundamentals/DOM_manipulation.md)<br>• [Code debugging using the browser](http://javascript.info/debugging-chrome) <br>• [Code commenting](../../../fundamentals/blob/master/fundamentals/code_commenting.md)<br>• Structuring code files<br>• [Code formatting](../../../fundamentals/blob/master/fundamentals/code_formatting.md)<br>• [Handing in homework via PR](../../..//fundamentals/blob/master/fundamentals/homework_pr.md) |[Reading Week 1](/Week1/README.md)|[Homework Week 1](/Week1/MAKEME.md)|
-|2.|• Functions + JSON/Arrays<br>• [Array Manipulations](../../../fundamentals/blob/master/fundamentals/array_manipulation.md)<br>• JSON<br>• [Map and filter](../../../fundamentals/blob/master/fundamentals/map_filter.md)<br>• Arrow functions |[Reading Week 2](/Week2/README.md)|[Homework Week 2](/Week2/MAKEME.md)|
-|3.|• [Closures](../../../fundamentals/blob/master/fundamentals/scope_closures_this.md) <br>• Callbacks|[Reading Week 3](/Week3/README.md)|[Homework Week 3](/Week3/MAKEME.md)|
+| Week | Topic                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Read                               | Homework                            |
+| ---- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------- |
+| 1.   | • Capturing user input through forms <br>• [Events](http://javascript.info/introduction-browser-events)<br>• [Basic DOM manipulations](../../../fundamentals/blob/master/fundamentals/DOM_manipulation.md)<br>• [Code debugging using the browser](http://javascript.info/debugging-chrome) <br>• [Code commenting](../../../fundamentals/blob/master/fundamentals/code_commenting.md)<br>• Structuring code files<br>• [Code formatting](../../../fundamentals/blob/master/fundamentals/code_formatting.md)<br>• [Handing in homework via PR](../../..//fundamentals/blob/master/fundamentals/homework_pr.md) | [Reading Week 1](/Week1/README.md) | [Homework Week 1](/Week1/MAKEME.md) |
+| 2.   | • Functions + JSON/Arrays<br>• [Array Manipulations](../../../fundamentals/blob/master/fundamentals/array_manipulation.md)<br>• JSON<br>• [Map and filter](../../../fundamentals/blob/master/fundamentals/map_filter.md)<br>• Arrow functions                                                                                                                                                                                                                                                                                                                                                                  | [Reading Week 2](/Week2/README.md) | [Homework Week 2](/Week2/MAKEME.md) |
+| 3.   | • [Closures](../../../fundamentals/blob/master/fundamentals/scope_closures_this.md) <br>• Callbacks                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | [Reading Week 3](/Week3/README.md) | [Homework Week 3](/Week3/MAKEME.md) |
 
 ## Test
-At the end of this module you'll be doing a formative test. It will be done on **paper** and will consist of **4 exercises** that will test your JavaScript1 and JavaScript2 knowledge. 
+
+At the end of this module you'll be doing a formative test. It will be done on **paper** and will consist of **4 exercises** that will test your JavaScript1 and JavaScript2 knowledge.
 
 Why on paper, you might ask? Fundamental understanding should become intuitive. Only after having learned and mastered a concept deeply will you be able to use it creatively. If you rely too much on others, or Google, you'll make it very hard to cultivate the habit to think for yourself.
 
 Also important to note: this test is done for 2 reasons only.
 
-(1) **We want to know** what skill level you are at. 
+(1) **We want to know** what skill level you are at.
 
 (2) The test will **give you an indication** of what skill level you are at.
 
-
 ### Overall
+
 A good understanding of all the above mentioned topics. Want to check your Knowledge? Go through the [JavaScript Fundamentals README](../../../fundamentals/blob/master/fundamentals/README.md) and research/ ask for help (Slack!) with the concepts that are not entirely clear.
 
 ---
+
 Credit goes to [HackYourFuture](https://github.com/HackYourFuture) which this is based upon.
 
 <a rel="license" href="http://creativecommons.org/licenses/by/4.0/"><img alt="Creative Commons License" style="border-width:0" src="https://i.creativecommons.org/l/by/4.0/88x31.png" /></a><br />This work is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/4.0/">Creative Commons Attribution 4.0 International License</a>.
diff --git a/Week1/MAKEME.md b/Week1/MAKEME.md
@@ -52,6 +52,8 @@ If the answer is 'yes' to all preceding questions you are ready to follow these
 
 - [Handing in homework](https://github.com/HackYourFuture/fundamentals/blob/master/fundamentals/homework_pr.md)
 
+- homework week1 : https://mahertawila.github.io/JavaScript2/Week1/homework/
+
 ## Step 2: **FreeCodeCamp challenges:**
 
 _Deadline Sunday morning_

diff --git a/Week1/homework/app.js b/Week1/homework/app.js
@@ -1,11 +1,120 @@
 'use strict';
 
 {
-  const bookTitles = [
-    // Replace with your own book titles
-    'harry_potter_chamber_secrets',
-  ];
-
-  // Replace with your own code
-  console.log(bookTitles);
-}
+  // const bookTitles = [
+  //   // Replace with your own book titles
+  //   'bro_code',
+  //   'the_secret',
+  //   'eat_pray_love',
+  //   'azazil',
+  //   'the_miserables',
+  //   'cockroach_man',
+  //   'the_black_suits_you',
+  //   'the_broken_wings',
+  //   'the_alchemist',
+  //   'aleph',
+  // ];
+
+  const books = {
+    bro_code: {
+      title: 'Bro Code',
+      language: 'English',
+      author: 'Barney Stinson',
+    },
+    the_secret: {
+      title: 'The Secret',
+      language: 'English',
+      author: 'Rhonda Byrne',
+    },
+    eat_pray_love: {
+      title: 'Eat Pray Love',
+      language: 'English',
+      author: 'Elizabeth Gilbert',
+    },
+    azazil: {
+      title: 'Azazil',
+      language: 'Arabic',
+      author: 'Yusef Zaidan',
+    },
+    the_miserables: {
+      title: 'The Miserables',
+      language: 'Arabic',
+      author: 'Victor Hugo',
+    },
+    alnabati: {
+      title: 'Al-Nabati',
+      language: 'Arabic',
+      author: 'Yusef Zaidan',
+    },
+    the_black_suits_you: {
+      title: 'The Black Suits You',
+      language: 'Arabic',
+      author: 'Ahlam Mustaghanmi',
+    },
+    the_broken_wings: {
+      title: 'The Broken Wings',
+      language: 'Arabic',
+      author: 'Jubran Khalil Jubran',
+    },
+    the_alchemist: {
+      title: 'The Alchemist',
+      language: 'Arabic',
+      author: 'Paulo Coelho',
+    },
+    aleph: {
+      title: 'Aleph',
+      language: 'Arabic',
+      author: 'Paulo Coelho',
+    },
+  };
+
+  const booksImages = {
+    bro_code: './images/bro_code.jpg',
+    the_secret: './images/the_secret.jpg',
+    eat_pray_love: './images/eat_pray_love.jpg',
+    azazil: './images/azazil.jpg',
+    the_miserables: './images/the_miserables.jpg',
+    alnabati: './images/alnabati.jpg',
+    the_black_suits_you: './images/the_black_suits_you.jpg',
+    the_broken_wings: './images/the_broken_wings.jpg',
+    the_alchemist: './images/the_alchemist.jpg',
+    aleph: './images/aleph.jpg',
+  };
+
+  function listMaker() {
+    const list = document.createElement('ul');
+    list.className = 'container';
+    document.body.appendChild(list);
+    for (const key of Object.keys(books)) {
+      const item = document.createElement('li');
+      item.className = 'list-item';
+      const heading = document.createElement('h2');
+      heading.className = 'item-heading';
+      heading.innerText = books[key].title;
+      item.appendChild(heading);
+      const contentContainer = document.createElement('div');
+      contentContainer.setAttribute('id', key);
+      contentContainer.className = 'content-container';
+      item.appendChild(contentContainer);
+      const content = document.createElement('div');
+      content.className = 'item-content';
+      content.innerHTML = `<p>Language: ${books[key].language}</p><p>Author: ${
+        books[key].author
+      }</p>`;
+      contentContainer.appendChild(content);
+      list.appendChild(item);
+    }
+    for (const key of Object.keys(booksImages)) {
+      const contentContainer = document.getElementById(key);
+      const imageContainer = document.createElement('div');
+      imageContainer.className = 'item-image';
+      contentContainer.appendChild(imageContainer);
+      const bookImage = document.createElement('img');
+      bookImage.setAttribute('src', booksImages[key]);
+      bookImage.setAttribute('alt', `book ${booksImages[key].replace('_', ' ')} cover`);
+      imageContainer.appendChild(bookImage);
+    }
+  }
+  listMaker();
+
+}
diff --git a/Week1/homework/images/aleph.jpg b/Week1/homework/images/aleph.jpg
diff --git a/Week1/homework/images/alnabati.jpg b/Week1/homework/images/alnabati.jpg
diff --git a/Week1/homework/images/azazil.jpg b/Week1/homework/images/azazil.jpg
diff --git a/Week1/homework/images/bro_code.jpg b/Week1/homework/images/bro_code.jpg
diff --git a/Week1/homework/images/eat_pray_love.jpg b/Week1/homework/images/eat_pray_love.jpg
diff --git a/Week1/homework/images/the_alchemist.jpg b/Week1/homework/images/the_alchemist.jpg
diff --git a/Week1/homework/images/the_black_suits_you.jpg b/Week1/homework/images/the_black_suits_you.jpg
diff --git a/Week1/homework/images/the_broken_wings.jpg b/Week1/homework/images/the_broken_wings.jpg
diff --git a/Week1/homework/images/the_miserables.jpg b/Week1/homework/images/the_miserables.jpg
diff --git a/Week1/homework/images/the_secret.jpg b/Week1/homework/images/the_secret.jpg
diff --git a/Week1/homework/index.html b/Week1/homework/index.html
@@ -1 +1,16 @@
-<!-- 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>JavaScript 2</title>
+  <link rel="styleSheet" type="text/css" href="./style.css" />
+</head>
+
+<body>
+  <script src="./app.js"></script>
+</body>
+
+</html>
diff --git a/Week1/homework/style.css b/Week1/homework/style.css
@@ -1 +1,45 @@
-/* add your styling here */
+/* add your styling here */
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+.container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  list-style: none;
+  padding: 5px;
+}
+
+.list-item {
+  width: calc(100% / 3 - 10px);
+  padding: 10px;
+  margin: 5px;
+  border: 1px solid rgba(0, 0, 0, 0.3);
+  border-radius: 3px;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
+}
+
+.item-heading {
+  padding-bottom: 5px;
+  margin-bottom: 10px;
+  border-bottom: 2px solid saddlebrown;
+}
+
+.content-container {
+  display: flex;
+  flex-direction: row-reverse;
+  justify-content: flex-end;
+}
+
+.item-image {
+  width: 30%;
+  margin-right: 10px;
+}
+
+.item-image img {
+  width: 100%;
+  object-fit: cover;
+}