diff --git a/.DS_Store b/.DS_Store
new file mode 100644
index 00000000..9f1695e3
Binary files /dev/null and b/.DS_Store differ
diff --git a/public/index.html b/public/index.html
index 138da963..15526236 100644
--- a/public/index.html
+++ b/public/index.html
@@ -5,10 +5,13 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>My Store</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-   
 </head>
 <body>
-     <script src="products.js"></script>    
-    <script src="index.js"></script>   
+    <input type="text" id="search" value="">
+    <button onclick='search()'>Search</button>
+    <button onclick='hideProducts()'>Hide Products</button>
+    <div id='hi'></div>
+    <script src="products.js"></script>
+    <script src="index.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/public/index.js b/public/index.js
index e69de29b..89c22544 100644
--- a/public/index.js
+++ b/public/index.js
@@ -0,0 +1,44 @@
+
+let data = {
+  products,
+  search: document.getElementById('search').value,
+};
+
+function hideProducts() {
+    let products = document.getElementById('products');
+    products.style = 'display: none;';
+}
+
+function getProductsList() {
+    let data = '<div id="products">';
+    products.forEach(p => {
+        data += `name: ${p.name}<br>${p.description}<br>
+        rating: ${p.rating}<br>
+        <img src="${p.imgUrl}"/><br>
+        price: ${p.price}<br>
+        category: ${p.category}<br>
+        ${getReviews(p.reviews)}`;
+    });
+    data += '</div>';
+    return data;
+}
+
+function getReviews(review) {
+    let reviews = '';
+    review.forEach(r => {
+        reviews += `<br>${r.description}<br>${r.rating}`;
+    });
+    return reviews;
+}
+
+function search() {
+  console.log(data.search);
+}
+
+function main() {
+    let showProducts = true;
+    let x = document.getElementById('hi');
+    document.write(getProductsList());
+}
+
+main()
