diff --git a/Week1/homework/app.js b/Week1/homework/app.js
index a9b5f75d8..b9836e281 100644
--- a/Week1/homework/app.js
+++ b/Week1/homework/app.js
@@ -1,11 +1,87 @@
-'use strict';
+const bookTitles = [
+  "Harry Potter and the Philosopher's stone",
+  "Harry Potter and the Chamber of secrets",
+  "Harry Potter and the Prisoner of Azkaban",
+  "Harry Potter and the Globlet of fire",
+  "Harry Potter and the Order of the Phoenix",
+  "Harry Potter and the Half blood prince",
+  "Harry Potter and the Deathly hallows"
+];
 
-{
-  const bookTitles = [
-    // Replace with your own book titles
-    'harry_potter_chamber_secrets',
-  ];
 
-  // Replace with your own code
-  console.log(bookTitles);
+const bookData = {
+  book_1: {
+    title: "Harry Potter and the Philosopher's stone",
+    language: "English",
+    author:  "J. K. Rowling"
+  },
+  book_2: {
+    title: "Harry Potter and the Chamber of secrets",
+    language: "English",
+    author:  "J. K. Rowling"
+  },
+  book_3: {
+    title: "Harry Potter and the Prisoner of Azkaban",
+    language: "English",
+    author:  "J. K. Rowling"
+  },
+  book_4: {
+    title: "Harry Potter and the Globlet of fire",
+    language: "English",
+    author:  "J. K. Rowling"
+  },
+  book_5: {
+    title: "Harry Potter and the Order of the Phoenix",
+    language: "English",
+    author:  "J. K. Rowling"
+  },
+  book_6: {
+    title: " Harry Potter and the Half blood prince",
+    language: "English",
+    author:  "J. K. Rowling"
+  },
+  
+  book_7 : {
+    title:"Harry Potter and the Deathly hallows",
+    language: "English",
+    author:  "J. K. Rowling"
+  }
+};
+
+const cover = {
+  book_1: "asset/1.jpg",
+  book_2: "asset/2.jpg",
+  book_3: "asset/3.jpg",
+  book_4: "asset/4.jpg",
+  book_5: "asset/5.jpg",
+  book_6: "asset/6.jpg",
+  book_7: "asset/7.jpg"
 }
+
+
+function generateBookList() {
+  const bookList = document.createElement('ul');
+  for (const bookId of Object.keys(bookData)) {
+    const bookInfo = bookData[bookId];
+    const bookItem = document.createElement('li');
+    bookItem.id = bookId;
+    const bookTitle = document.createElement('h2');
+    bookTitle.textContent = bookInfo.title;
+    bookItem.appendChild(bookTitle);
+    const bookAuthor = document.createElement('p');
+    bookAuthor.textContent = 'Author: ' + bookInfo.author;
+    bookItem.appendChild(bookAuthor);
+    const bookLanguage = document.createElement('p');
+    bookLanguage.textContent = 'Language: ' + bookInfo.language;
+    bookItem.appendChild(bookLanguage);
+    const bookCover = document.createElement('img');
+    bookCover.src = cover[bookId];
+    bookCover.alt = bookInfo.title + ' book cover';
+    bookItem.appendChild(bookCover);
+    bookList.appendChild(bookItem);
+  }
+  document.body.appendChild(bookList);
+  return bookList;
+}
+
+generateBookList();
\ No newline at end of file
diff --git a/Week1/homework/asset/1.jpg b/Week1/homework/asset/1.jpg
new file mode 100644
index 000000000..856ef78f2
Binary files /dev/null and b/Week1/homework/asset/1.jpg differ
diff --git a/Week1/homework/asset/2.jpg b/Week1/homework/asset/2.jpg
new file mode 100644
index 000000000..061f6d800
Binary files /dev/null and b/Week1/homework/asset/2.jpg differ
diff --git a/Week1/homework/asset/3.jpg b/Week1/homework/asset/3.jpg
new file mode 100644
index 000000000..3572d7b9c
Binary files /dev/null and b/Week1/homework/asset/3.jpg differ
diff --git a/Week1/homework/asset/4.jpg b/Week1/homework/asset/4.jpg
new file mode 100644
index 000000000..5f6db5a89
Binary files /dev/null and b/Week1/homework/asset/4.jpg differ
diff --git a/Week1/homework/asset/5.jpg b/Week1/homework/asset/5.jpg
new file mode 100644
index 000000000..e0fb2713b
Binary files /dev/null and b/Week1/homework/asset/5.jpg differ
diff --git a/Week1/homework/asset/6.jpg b/Week1/homework/asset/6.jpg
new file mode 100644
index 000000000..1c3dadce1
Binary files /dev/null and b/Week1/homework/asset/6.jpg differ
diff --git a/Week1/homework/asset/7.jpg b/Week1/homework/asset/7.jpg
new file mode 100644
index 000000000..4c437d6d7
Binary files /dev/null and b/Week1/homework/asset/7.jpg differ
diff --git a/Week1/homework/index.html b/Week1/homework/index.html
index b22147cd1..e84e35b20 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
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;1,100;1,200;1,300&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="./style.css">
+  <title>Harry Potter</title>
+</head>
+<body>
+  <h1 id="title">Harry Potter Series</h1>
+  <script src="app.js"></script>
+</body>
+</html>
diff --git a/Week1/homework/style.css b/Week1/homework/style.css
index bab13ec23..d8f53eb78 100644
--- a/Week1/homework/style.css
+++ b/Week1/homework/style.css
@@ -1 +1,39 @@
-/* add your styling here */
\ No newline at end of file
+/* add your styling here */* {
+  margin: 0;
+  padding: 0;
+}
+
+body{
+  font-family:'Times New Roman', Times, serif;
+}
+
+ul{
+  padding: 1rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap:1rem;
+  list-style-type: none;
+}
+
+li{
+  text-align: center;
+}
+
+h2{
+  line-height: 2rem;
+  font-size: 1rem;
+  color: rgb(69, 30, 159);
+}
+
+img{
+  height: 300px;
+  width: 200px;
+  margin-top: 1rem;
+}
+
+#title{
+    text-align: center;
+    padding-top: 2rem;
+    font-size: 3rem; 
+    color: midnightblue;
+  }
\ No newline at end of file
diff --git a/Week1/js-exercises/assets/cover.png b/Week1/js-exercises/assets/cover.png
new file mode 100644
index 000000000..dd2d0b4a3
Binary files /dev/null and b/Week1/js-exercises/assets/cover.png differ
diff --git a/Week1/js-exercises/assets/little-book-of-confidence.jpg b/Week1/js-exercises/assets/little-book-of-confidence.jpg
new file mode 100644
index 000000000..1a021dc1a
Binary files /dev/null and b/Week1/js-exercises/assets/little-book-of-confidence.jpg differ
diff --git a/Week1/js-exercises/assets/wireframe.png b/Week1/js-exercises/assets/wireframe.png
new file mode 100644
index 000000000..a4b2fb2f5
Binary files /dev/null and b/Week1/js-exercises/assets/wireframe.png differ
diff --git a/Week1/js-exercises/ex1-bookList.html b/Week1/js-exercises/ex1-bookList.html
index b3864ac18..8394f11bf 100644
--- a/Week1/js-exercises/ex1-bookList.html
+++ b/Week1/js-exercises/ex1-bookList.html
@@ -5,12 +5,25 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Book List</title>
+  <script src="./ex1-bookList.js"></script>
 </head>
 
 <body>
   <h1> My Book List</h1>
   <div id="bookList">
     <!-- put the ul element here -->
+    <ul>
+      <li>
+        <a href="#"> <img src="assets/little-book-of-confidence.jpg"> </a>
+        <p> <h1>'The Design of Everyday Things'</h1> Don Norman </p>
+      </li>
+      <li>
+        <p> 'The Design of Everyday Things' Don Norman </p>
+      </li>
+      <li>
+        <p> 'The Design of Everyday Things' Don Norman </p>
+      </li>
+    </ul>
   </div>
 </body>
 
diff --git a/Week1/js-exercises/ex1-bookList.js b/Week1/js-exercises/ex1-bookList.js
index 2db54ba5e..ae14eb0aa 100644
--- a/Week1/js-exercises/ex1-bookList.js
+++ b/Week1/js-exercises/ex1-bookList.js
@@ -18,6 +18,12 @@
 
 function createBookList(books) {
   // your code goes in here, return the ul element
+  data = ""
+  console.log("books-",books)
+  for(i=0; i<books.length; i++){
+    console.log(i, books[i])
+  }
+  
 }
 
 const books = [{
@@ -39,4 +45,4 @@ const books = [{
 
 let ulElement = createBookList(books);
 
-document.querySelector("#bookList").appendChild(ulElement);
\ No newline at end of file
+//document.querySelector("#bookList").appendChild(ulElement);
\ No newline at end of file