KurskiySergey · KurskiySergey · Aug 27, 2020
diff --git a/Shop/img/default.jpg b/Shop/img/default.jpg
diff --git a/Shop/index.html b/Shop/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Интернет-магазин</title>
+    <link rel="stylesheet" href="styles/main.css">
+</head>
+<body>
+<header>
+    <button class="btn-cart" type="button">Корзина</button>
+</header>
+<main>
+    <div class="products"></div>
+</main>
+<script src="./js/main.js"></script>
+<script src="./js/event-listeners.js"></script>
+</body>
+</html>
+
diff --git a/Shop/js/Hamburger.js b/Shop/js/Hamburger.js
@@ -0,0 +1,69 @@
+const data = {
+    size : [{size: 'big' , price: 100 , cal: 40 },
+           {size: 'small' , price: 50, cal: 20}],
+    top : [{top : 'cheese' , price : 10, cal:20},
+           {top : 'potatos' , price : 15, cal:10},
+            {top : 'vegetables' , price : 20, cal:5}],
+
+    addition : [{addition : 'spices' , price : 15, cal:10},
+               {addition : 'mayonaise' , price : 20, cal:5}] 
+};
+
+class Hamburger {
+    constructor(size, stuffing) {
+        this.calories = 0;
+        this.price = 0;
+        this.#addSize(size);
+        this.#addTop(stuffing);
+    }
+
+    #addSize(size) {
+        data.size.forEach(element => {
+            if (element.size == size) {
+                this.addToPrice(element.price);
+                this.addToCalories(element.cal);
+            }
+        });
+    }
+
+    #addTop(top) {
+        data.top.forEach(element => {
+            if (element.top == top) {
+                this.addToPrice(element.price);
+                this.addToCalories(element.cal);
+            }
+        });
+    }
+
+    addAddition(addition) {
+        data.addition.forEach(element => {
+            if( element.addition == addition) {
+                this.addToPrice(element.price);
+                this.addToCalories(element.cal);
+            }
+        })
+    }
+
+    addToCalories(calories) {
+        this.calories += calories;
+    }
+
+    addToPrice(price) {
+        this.price += price;
+    }
+
+    getTotalPrice() {
+        console.log(this.price);
+        return this.price;
+    }
+
+    getCal() {
+        console.log(this.calories);
+        return this.calories;
+    }
+}
+
+let BigMac = new Hamburger('big', 'cheese');
+BigMac.addAddition('spices');
+BigMac.getTotalPrice();
+BigMac.getCal();
diff --git a/Shop/js/event-listeners.js b/Shop/js/event-listeners.js
@@ -0,0 +1,23 @@
+window.addEventListener('load', ()=> {
+
+
+    document.querySelector('.products').addEventListener('click', (event) => {
+        if (event.target.classList.contains('by-btn')) {
+            basket.addToBasket(event.target.id);
+        }
+        if (event.target.classList.contains('main-btn')) {
+            items.fetchGoods();
+        }
+        if (event.target.classList.contains('del-btn')) {
+            basket.removeFromBasket(event.target.id);
+        }
+        if (event.target.classList.contains('basket_by')) {
+            basket.buyItem(event.target.id);
+        }
+    });
+
+    document.querySelector('.btn-cart').addEventListener('click', () => {
+            basket.getBasketList();
+    })
+
+})
diff --git a/Shop/js/main.js b/Shop/js/main.js
@@ -0,0 +1,169 @@
+const API = 'https://raw.githubusercontent.com/GeekBrainsTutorial/online-store-api/master/responses/'
+
+let getRequest = (jsonFile) => {
+
+    return new Promise((resolve, reject) => {
+
+        var xhr = new XMLHttpRequest();
+        xhr.open('GET', `${API}${jsonFile}`, true);
+
+        xhr.onreadystatechange = () => {
+            if (xhr.readyState === 4) {
+                if (xhr.status === 200) {
+                    let response = JSON.parse(xhr.responseText);
+                    resolve(response);
+                } else {
+                    reject('Error');
+                }
+            }
+        }
+
+        xhr.send();
+
+    });
+}
+
+
+class Product {
+    constructor({ product_name,price,id_product}, img = 'img/default.jpg') {
+        this.name = product_name;
+        this.price = price;
+        this.id = id_product;
+        this.img = img;
+    }
+
+    renderProduct() {
+        return `<div class="product-item">
+            <img src="${this.img}" alt="${this.name}">
+            <h3>${this.name}</h3>
+            <p>price - ${this.price}P</p>
+            <button class="by-btn" id = "${this.id}">Добавить в корзину</button>
+          </div>`;
+    }
+}
+
+class ProductList {
+    constructor(products = [], container = '.products') {
+        this.products = products;
+        this.container = container;
+    }
+
+    fetchGoods() {
+
+        getRequest('catalogData.json')
+            .then(data => {
+                this.products = data;
+                this.render();
+            })
+            .catch(error => console.log(error));
+    }
+
+    render() {
+
+        let htmlProductList = document.querySelector(this.container);
+        htmlProductList.innerHTML = '';
+
+        this.products.forEach(product => {
+            htmlProductList.insertAdjacentHTML('afterbegin', new Product(product).renderProduct());
+        })
+
+    }
+}
+
+class Basket {
+
+    constructor(basketList = [], container = '.products') {
+        this.basketList = basketList;
+        this.container = container;
+    }
+
+    getBasketList() {
+        getRequest('getBasket.json')
+            .then(data => {
+                this.basketList = data;
+                this.renderBasket();
+            })
+            .catch(error => console.log(error));
+    }
+
+    getTotalPrice() {
+
+    }
+
+    renderBasket() {
+
+        let htmlProductList = document.querySelector(this.container);
+        htmlProductList.innerHTML = '';
+        htmlProductList.insertAdjacentHTML('afterbegin' , '<button class = "main-btn">К списку товаров</button>');
+
+        this.basketList.contents.forEach(item => {
+            htmlProductList.insertAdjacentHTML('afterbegin' , new BasketItem(item).renderBasketItem());
+        })
+
+        htmlProductList.insertAdjacentHTML('afterbegin' , `<p class = "basket_total">Всего в корзине <b>${this.basketList.countGoods} товара(ов)</b></p>`);
+        htmlProductList.insertAdjacentHTML('afterbegin' , `<p class = "basket_total">Полная цена - <b>${this.basketList.amount}P</b></p>`);
+    }
+
+    addToBasket(id) {
+
+        getRequest('addToBasket.json')
+            .then(data => {
+                if (data.result === 1) {
+                    alert( 'Продукт успешно добавлен');
+                } else {
+                    alert('error');
+                }
+            })
+            .catch( error => console.log(error));
+    }
+
+    removeFromBasket(id) {
+        getRequest('deleteFromBasket.json')
+            .then(data => {
+                if (data.result === 1) {
+                    alert( 'Продукт успешно удален');
+                } else {
+                    alert('error');
+                }
+            })
+            .catch( error => console.log(error));
+    }
+
+    buyItem(id) {
+        alert('Продукт куплен');
+    }
+
+}
+
+class BasketItem {
+
+    constructor({ product_name,price,id_product, quantity}, img = 'img/default.jpg') {
+        this.name = product_name;
+        this.price = price;
+        this.id = id_product;
+        this.quantity = quantity;
+        this.img = img;
+    }
+
+    getBasketItemPrice() {
+
+    }
+
+    renderBasketItem() {
+        return `<div class="product-item">
+            <img src="${this.img}" alt="${this.name}">
+            <h3>${this.name}</h3>
+            <p>price - ${this.price}P</p>
+            <button class="basket_by" id = "${this.id}">Купить (x ${this.quantity})</button>
+            <button class="del-btn" id = "${this.id}"> Удалить</button>
+          </div>`;
+    }
+
+    buyBasketItem() {
+
+    }
+}
+
+let items = new ProductList();
+let basket = new Basket();
+items.fetchGoods();
diff --git a/Shop/styles/main.css b/Shop/styles/main.css
@@ -0,0 +1,92 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+header {
+    min-height: 60px;
+    background-color: aqua;
+    position: relative;
+}
+
+.btn-cart {
+    position: absolute;
+    display: block;
+    right: 12px;
+    top: 10px;
+    width: 90px;
+    height: 40px;
+
+}
+
+.main-btn {
+    text-align: center;
+    display: block;
+    width: 150px;
+    height: 50px;
+    margin: 0 auto;
+}
+
+.products {
+    min-height: 100px;
+    border: 1px solid black;
+}
+
+.product-item {
+    margin: 15px 15px;
+    background-color: azure;
+    border: 1px solid black;
+    box-shadow: 0 0 10px rgba(0,0,0,0.5);
+}
+
+.product-item img {
+    display: block;
+    max-height: 100px;
+    margin: 10px 10px;
+    float: left;
+    border-radius: 10%;
+}
+
+.product-item h3 {
+    text-align: center;
+    margin-top: 10px;
+    font-style: oblique;
+}
+
+.product-item p {
+    text-align: center;
+    margin-top: 10px;
+    color: royalblue;
+    font-style: italic;
+}
+
+.product-item .by-btn {
+    display: block;
+    text-align: center;
+    height: 40px;
+    width: 150px;
+    margin: 10px auto;
+}
+
+.basket_total {
+    display: block;
+    text-align: center;
+    margin: 10px auto;
+    height: 50px;
+    width: 500px;
+}
+
+.del-btn {
+    margin-left: 10px;
+    text-align: center;
+    height: 50px;
+    width: 100px;
+}
+
+.basket_by {
+    display: block;
+    text-align: center;
+    height: 40px;
+    width: 150px;
+    margin: 10px auto;
+}