diff --git a/Week1/homework/app.js b/Week1/homework/app.js
index ffef836dc..2430f6ed9 100644
--- a/Week1/homework/app.js
+++ b/Week1/homework/app.js
@@ -1,11 +1,156 @@
 'use strict';
-{
-  const bookTitles = [
+
+/*   const bookTitles = [
     // Replace with your own book titles
-    'harry_potter_chamber_secrets'
+    'i_am_number_four',
+    'the_power_of_six',
+    'the_rise_of_nine',
+    'the_fall_of_five',
+    'the_revenge_of_seven',
+    'the_fate_of_ten',
+    'united_as_one',
+    'twee_verhalen_van_sherlock_holmes',
+    'the_analyst',
+    'in_the_heat_of_summer' 
   ];
+ 
+  function generatingBookList () { 
+
+    // Creating the DOM element. 
+
+    let generatingP = document.createElement('p');
+    let generatingUl = document.createElement('ul');
+    generatingP.appendChild(generatingUl);
+
+    // Creating the function
+
+    for (let i = 0; i<bookTitles.length; i++) {
+        let list = document.createElement('li');
+        generatingUl.appendChild(list);
+        list.innerHTML = bookTitles[i];
+        
+    }
+    console.log(generatingP);
+    }
+    generatingBookList();
+    
+     */
+
+const infoBook = {
+  i_am_number_four: {
+    title: "I am the number four",
+    author: "Pittacus Lore",
+    language: "English"
+  },
+
+  the_power_of_six: {
+    title: "The power of six",
+    author: "Pittacus Lore",
+    language: "English"
+  },
+
+  the_rise_of_nine: {
+    title: "The Rise of nine",
+    author: "Pittacus Lore",
+    language: "English"
+  },
+
+  the_fall_of_five: {
+    title: "The fall of five",
+    author: "Pittacus Lore",
+    language: "English"
+  },
+
+  the_revenge_of_seven: {
+    title: "The revenge of seven",
+    author: "Pittacus Lore",
+    language: "English"
+  }, 
+  
+  the_fate_of_ten: {
+    title: "The fate of ten",
+    author: "Pittacus Lore",
+    language: "English"
+  },
+
+  united_as_one:{
+    title: "United as one",
+    author: "Pittacus Lore",
+    language: "English"
+  },
+
+  twee_verhalen_van_sherlock_holmes: {
+    title: "Twee verhalen van Sherlock Holmes",
+    author: "A.C. Doyle",
+    language: "Dutch"
+  },
+
+  the_analyst: {
+    title: "The Analyst",
+    author: "John Katzenbach",
+    language: "English" 
+  },
 
+  in_the_heat_of_summer: {
+    title: "In the Heat of Summer",
+    author: "John Katzenbach",
+    language: "English"
+  }
+};
 
-  // Replace with your own code
-  console.log(bookTitles);
+let bookCovers = {
+
+  i_am_number_four: "image/imnumber4.jpg",
+  the_power_of_six: "image/thepowerof6.jpg",
+  the_rise_of_nine: "image/theriseofnine.jpg",
+  the_fall_of_five: "image/fallof5.jpg",
+  the_revenge_of_seven: "image/revengeof7.jpg",
+  the_fate_of_ten: "image/fateof10.jpg",
+  united_as_one: "image/unitedasone.jpg",
+  twee_verhalen_van_sherlock_holmes: "image/tweeverhalen.jpg",
+  the_analyst: "image/theanalyst.jpg",
+  in_the_heat_of_summer: "image/summer.jpg"
+};
+
+
+function generateListOfBooks() {
+  console.log(bookCovers);
+  let ul = createBookList(infoBook, bookCovers);
+  document.body.appendChild(ul);
 }
+
+function createBookList(bookTitles, bookCovers) {
+  let div = document.getElementById("root");
+  let ul = document.createElement("ul");
+  div.appendChild(ul);
+
+  for (let i in bookTitles) {
+    let books = bookTitles[i];
+
+    let li = document.createElement("li");
+    ul.appendChild(li);
+    let header = document.createElement("h2");
+    header.innerHTML = books.title;
+    li.appendChild(header);
+
+    let author = document.createElement("p");
+    author.innerHTML = books.author;
+    li.appendChild(author);
+
+    let language = document.createElement("p");
+    language.innerHTML = books.language;
+    li.appendChild(language);
+
+    let image = document.createElement("img");
+    li.appendChild(image);
+    image.src = getBookDetails(i, bookCovers);
+    image.setAttribute("width", 150);
+  }
+  return ul;
+}
+
+function getBookDetails(src, bookCovers) {
+  return bookCovers[src];
+}
+
+window.addEventListener("load", generateListOfBooks);
\ No newline at end of file
diff --git a/Week1/homework/image/fallof5.jpg b/Week1/homework/image/fallof5.jpg
new file mode 100644
index 000000000..7b003a67f
Binary files /dev/null and b/Week1/homework/image/fallof5.jpg differ
diff --git a/Week1/homework/image/fateof10.jpg b/Week1/homework/image/fateof10.jpg
new file mode 100644
index 000000000..527413443
Binary files /dev/null and b/Week1/homework/image/fateof10.jpg differ
diff --git a/Week1/homework/image/imnumber4.jpg b/Week1/homework/image/imnumber4.jpg
new file mode 100644
index 000000000..766be5b0a
Binary files /dev/null and b/Week1/homework/image/imnumber4.jpg differ
diff --git a/Week1/homework/image/revengeof7.jpg b/Week1/homework/image/revengeof7.jpg
new file mode 100644
index 000000000..3bd84dc47
Binary files /dev/null and b/Week1/homework/image/revengeof7.jpg differ
diff --git a/Week1/homework/image/summer.jpg b/Week1/homework/image/summer.jpg
new file mode 100644
index 000000000..a018b4cdb
Binary files /dev/null and b/Week1/homework/image/summer.jpg differ
diff --git a/Week1/homework/image/theanalyst.jpg b/Week1/homework/image/theanalyst.jpg
new file mode 100644
index 000000000..8859d3de6
Binary files /dev/null and b/Week1/homework/image/theanalyst.jpg differ
diff --git a/Week1/homework/image/thepowerof6.jpg b/Week1/homework/image/thepowerof6.jpg
new file mode 100644
index 000000000..41a7fd553
Binary files /dev/null and b/Week1/homework/image/thepowerof6.jpg differ
diff --git a/Week1/homework/image/theriseofnine.jpg b/Week1/homework/image/theriseofnine.jpg
new file mode 100644
index 000000000..2746ed614
Binary files /dev/null and b/Week1/homework/image/theriseofnine.jpg differ
diff --git a/Week1/homework/image/tweeverhalen.jpg b/Week1/homework/image/tweeverhalen.jpg
new file mode 100644
index 000000000..6a404040d
Binary files /dev/null and b/Week1/homework/image/tweeverhalen.jpg differ
diff --git a/Week1/homework/image/unitedasone.jpg b/Week1/homework/image/unitedasone.jpg
new file mode 100644
index 000000000..4c9e901af
Binary files /dev/null and b/Week1/homework/image/unitedasone.jpg differ
diff --git a/Week1/homework/index.html b/Week1/homework/index.html
index b22147cd1..32195687f 100644
--- a/Week1/homework/index.html
+++ b/Week1/homework/index.html
@@ -1 +1,17 @@
-<!-- replace this with your HTML content -->
\ No newline at end of file
+<!-- 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>JavaScript2 - Yaacob!</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+
+    <div id="root"></div>
+    
+    <script type="text/javascript" src="app.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/Week1/homework/style.css b/Week1/homework/style.css
index bab13ec23..ea804cab2 100644
--- a/Week1/homework/style.css
+++ b/Week1/homework/style.css
@@ -1 +1,49 @@
-/* add your styling here */
\ No newline at end of file
+body {
+    background-color: rgb(4, 37, 65);
+    font-family: Arial, Helvetica, sans-serif;
+    text-align: center;
+    box-sizing: border-box;
+    text-align: center;
+    display: flex;
+    flex-wrap: wrap; 
+  }
+
+  div {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  h2 {
+    background-color: #fff;
+    border-radius: 15px;
+    padding: 0 15px; 
+    cursor: pointer;
+  }
+
+  h2:hover {
+    transform: translateX(2px);
+  }
+
+  img {
+    width:200px;
+    height:300px;
+    border-radius: 12px;
+    transition-duration: 3ms;
+  }
+
+  img:hover {
+    transform: translateX(3px);
+  }
+
+  ul li  {
+    list-style: none;
+  }
+
+  p {
+    color: rgb(252, 252, 252);
+    font-size: 1.2em;
+  }
+
+  :hover {
+      transition: all 0.3s;
+  }
\ No newline at end of file