zagidulin · zagidulin · Aug 28, 2020 · Tardigrada777 · Sep 1, 2020 · Tardigrada777
diff --git a/basket_script.js b/basket_script.js
@@ -0,0 +1,129 @@
+'use strict';
+
+
+// класс товара в корзине
+class BasketItem {
+	constructor(title, price, quantity, picture) {
+		this.title = title;
+		this.price = price;
+		this.picture = picture;
+		this.quantity = quantity;
+	}
+
+	render() {
+		return `<div class="basket_record">
+					${this.picture}
+					<span class="product_name">${this.title}</span>
+					<span class="product_price">${this.price}&nbspруб</span>
+					<input type="number" name="quantity" min="0" value="${this.quantity}" class="change_quantity">
+					<span class="product_cost">${this.quantity*this.price}&nbspруб</span>
+					<div class="basket_delete">
+					    <a href="#" class="product_delete">удалить</a>
+					</div>
+		        </div>`;
+	}
+}
+
+// класс Корзины товаров
+class BasketList {
+	constructor() {
+		this.shopCartList = [];
+	}
+
+	_getShopCartList() {
+		this.shopCartList = shopCart;
+	}
+
+	toggle() {
+		document.querySelector('.basket_container').classList.toggle('hidden');
+	}
+
+	showSummary() {
+		let totalPrice = 0;
+		let totalQuantity = 0;
+
+		this.shopCartList.forEach(({ price, quantity }) => {
+			totalPrice += price*quantity;
+			totalQuantity += quantity;
+		});
+
+		document.querySelector('.total_quantity').innerHTML = `<i>${totalQuantity}</i>`;
+		document.querySelector('.total_price').innerHTML = `<i>${totalPrice}</i>`;
+	}
+
+	render() {
+		this._getShopCartList(this.shopCartList);
+		let html = '';
+
+		this.shopCartList.forEach(({ title, price, quantity, picture }) => {
+			const basketItem = new BasketItem(title, price, quantity, picture);
+			html += basketItem.render();
+		});
+
+		document.querySelector('.basket_list').innerHTML = html;
+
+		this.showSummary();
+
+		// для инициализации возможности удаления изменения количесвта товара при "раскрытии" корзины
+		if (this.shopCartList.length > 0) {
+			let changeShopCart = document.querySelector('.basket_container');
+			changeShopCart.addEventListener('click', (event) => {
+
+				if (event.target.className == 'product_delete') {
+					let name = event.target.parentNode.parentNode.childNodes[3].innerText;
+					this.delete(name, this.shopCartList);
+				} else if (event.target.className == 'change_quantity') {
+					let newQuantity = +event.target.value;
+					let name = event.target.parentNode.childNodes[3].innerText;
+					this.change(name, newQuantity, this.shopCartList);
+				}
+			});
+		}
+	}
+
+	// добавление товара
+	add(name, price, image) {
+		this._getShopCartList();
+		let productsToBuy = [];
+		this.shopCartList.forEach(({ title }) => productsToBuy.push(title));
+
+		if (productsToBuy.includes(name)) {
+			for (let i = 0; i < this.shopCartList.length; i++) {
+            	if (this.shopCartList[i].title == name) {
+            		this.shopCartList[i].quantity += 1;
+            		break;
+            	}
+        	}
+		} else {
+			let productToBuy = { title: name, price: price,	quantity: 1, picture: image };
+			this.shopCartList.push(productToBuy);
+		}
+	}
+
+	// удаление товара
+	delete(name, shopCartList) {
+		for (let i = 0; i < shopCartList.length; i++) {
+            if (shopCartList[i].title == name) {
+            	this.shopCartList.splice(i, 1);
+            	// вывести корзину без удаленного товара
+            	this.render();
+            	break;
+            }
+        }        
+	}
+
+	// изменение количества товара внутри корзины
+	change(name, newQuantity, shopCartList) {
+			if (newQuantity == 0) {
+				this.delete(name, shopCartList);
+			}
+
+		for (let i = 0; i < this.shopCartList.length; i++) {
+            if (shopCartList[i].title == name) {
+            	this.shopCartList[i].quantity = newQuantity;
+            	this.render();
+            	break;
+            }
+        }
+	}
+}
diff --git a/catalog.html b/catalog.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>Rollerskates</title>
+		<link rel="stylesheet" href="style.css">
+	</head>
+	<body>
+		<div class="wraper">
+			<div class="header">
+				<div id="logo">
+					<img src="image/logo_2.png" alt="logo">
+				</div>
+				<div class="main_menu">
+					<ul class="menulist">
+						<li><a href="index.html">Главная</a></li>
+						<li><a href="#">Каталог</a></li>
+						<li><a href="contacts.html">Контакты</a></li>
+					</ul>
+					<div class="cart">
+						<a href="#" class = "cart-button" >Корзина</a>
+					</div>
+				</div>
+			</div>
+			<hr>
+			<h1>Роликовые коньки</h1>
+			<div class="catalog-menu">
+				<ul>
+					<li class="catalog-menu-list catalog-active"><a href="#" class="catalog-link">ВСЕ</a></li>
+					<li class="catalog-menu-list"><a href="#" class="catalog-link">ФИТНЕС</a></li>
+					<li class="catalog-menu-list"><a href="#" class="catalog-link">ФРИСКЕЙТ</a></li>
+					<li class="catalog-menu-list"><a href="#" class="catalog-link">АГРЕССИВ</a></li>
+					<li class="catalog-menu-list"><a href="#" class="catalog-link">ДЕТСКИЕ</a></li>
+				</ul>
+			</div>
+			<div class="catalog">
+
+			</div>
+			<div class="basket_container hidden">
+				<div class="basket_summary">
+					<div class="close">
+						<span style="vertical-align: middle">X</span>
+					</div>
+					<h2>Корзина</h2>
+					<p>
+						Всего товаров: <span class="total_quantity"></span><br>
+						Общая стоимость: <span class="total_price"></span> руб.
+					</p>
+				</div>
+			    <div class="basket_list">
+
+    			</div>
+    			<a href="#" class="make_order">Перейти к оформлению</a>
+			</div>
+			<div class="forfooter"></div>
+		</div>
+		<div class="footer">
+			<hr>
+			<p><i>Все права защищены &copy;</i></p>
+		</div>
+		<script src="catalog_script.js" type="text/javascript"></script>
+		<script src="basket_script.js" type="text/javascript"></script>
+		<script src="main.js" type="text/javascript"></script>
+	</body>
+</html>
diff --git a/catalog_script.js b/catalog_script.js
@@ -0,0 +1,64 @@
+'use strict';
+
+
+const products = [
+	{ title: 'Rollerblade Twister Edge', price: 150, link: 'twister_edge' },
+	{ title: 'K2 Alexis 80 PRO', price: 50, link: 'k2_alexis_80_pro' },
+	{ title: 'FRX 80', price: 350, link: 'seba_frx_80' },
+	{ title: 'Rollerblade Macroblade', price: 250, link: 'rollerblade_macroblade_84W' },
+];
+
+const shopCart = [];
+
+class ProductItem {
+	constructor(title, price, link) {
+		this.title = title;
+		this.price = price;
+		this.link = link;
+	}
+
+	render() {
+		return `<div class="product_preview">
+					<div class="preview_image">
+						<a href="catalog/${this.link}.html">
+							<img src="image/${this.link}.jpg" alt="" width="120" height="120">
+						</a>
+					</div><br>
+					<a href="catalog/${this.link}.html">${this.title}</a>
+					<p><span class="price">${this.price}</span> руб.</p>
+					<button>buy</button>
+				</div>`;
+	}
+}
+
+
+class ProductsList {
+	constructor() {
+		this.products = [];
+	}
+
+	_getProducts() {
+		this.products = products;
+	}
+
+	render() {
+		this._getProducts();		
+		let html = '';
+
+		this.products.forEach(({ title, price, link }) => {
+			const productItem = new ProductItem(title, price, link);
+			html += productItem.render();
+		});
+
+		document.querySelector('.catalog').innerHTML = html;
+	}
+
+	total() {
+		let total = 0;
+		this.products.forEach(({ price }) => {
+			total += price;
+		});
+
+		console.log('Сумма всех цен: ', total);
+	}
+}
diff --git a/image/heder.jpg b/image/heder.jpg
diff --git a/image/k2_alexis_80_pro.jpg b/image/k2_alexis_80_pro.jpg
diff --git a/image/logo_2.png b/image/logo_2.png
diff --git a/image/rollerblade_macroblade_84W.jpg b/image/rollerblade_macroblade_84W.jpg
diff --git a/image/seba_frx_80.jpg b/image/seba_frx_80.jpg
diff --git a/image/twister_edge.jpg b/image/twister_edge.jpg
diff --git a/main.js b/main.js
@@ -0,0 +1,32 @@
+'use strict';
+
+window.addEventListener('load', () => {
+    const catalogList = new ProductsList();
+    const shopingCart = new BasketList();
+
+    catalogList.render();
+
+    let catalog = document.querySelector('.catalog');
+    let basket = document.querySelector('.cart-button');
+    let closeBasket = document.querySelector('.close');
+
+
+    catalog.addEventListener('click', (event) => {
+        if (event.target.innerText == 'buy') {
+            let name = event.target.parentNode.childNodes[4].innerText;
+            let price = +event.target.parentNode.childNodes[6].childNodes[0].innerText;
+            let image = event.target.parentNode.childNodes[1].childNodes[1].childNodes[1].outerHTML;
+            shopingCart.add(name, price, image);
+        }
+    });
+
+    basket.addEventListener('click', (event) => {
+        shopingCart.render();
+        shopingCart.toggle();
+    });
+
+    closeBasket.addEventListener('click', (event) => {
+        shopingCart.toggle();
+    });
+
+});