diff --git a/index.html b/index.html
new file mode 100644
index 0000000..dd40b1b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>eShop</title>
+</head>
+<body>
+  <header>
+    <button class="cart-button" type="button">Корзина</button>
+  </header>
+  <main>
+    <div class="goods-list"></div>
+  </main>
+  
+  <script src="script.js"></script>
+</body>
+</html>
\ No newline at end of file
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..678fa9c
--- /dev/null
+++ b/script.js
@@ -0,0 +1,75 @@
+class ApiMock {
+  constructor() {
+
+  }
+
+  fetch() {
+    return [{
+        title: 'Shirt',
+        price: 150
+      },
+      {
+        title: 'Socks',
+        price: 50
+      },
+      {
+        title: 'Jacket',
+        price: 350
+      },
+      {
+        title: 'Shoes',
+        price: 250
+      },
+    ];
+  }
+}
+
+class GoodsItem {
+  constructor(title, price) {
+    this.title = title;
+    this.price = price;
+  }
+
+  getHtml() {
+    return `<div class="goods-item"><h3>${this.title}</h3><p>${this.price}</p></div>`;
+  }
+}
+
+class GoodsList {
+  constructor() {
+    this.api = new ApiMock();
+    this.$goodsList = document.querySelector('.goods-list');
+    this.goods = [];
+  }
+
+  fetchGoods() {
+    this.goods = this.api.fetch().map(({
+      title,
+      price
+    }) => new GoodsItem(title, price));
+  }
+
+  render() {
+    this.$goodsList.textContent = '';
+    this.goods.forEach((good) => {
+      this.$goodsList.insertAdjacentHTML('beforeend', good.getHtml());
+    })
+  }
+
+  goodsPrice() {
+    return this.goods.reduce((sum, {
+      price
+    }) => sum + price, 0);
+  }
+
+}
+
+class Basket {}
+
+class ProductsInBasket {}
+
+const goodsList = new GoodsList();
+
+goodsList.fetchGoods();
+goodsList.render();
+goodsList.goodsPrice();
\ No newline at end of file
