From b5ff4be3c629e48cd39e089e780022a9d94cb681 Mon Sep 17 00:00:00 2001
From: zagidulin <54302637+zagidulin@users.noreply.github.com>
Date: Tue, 8 Sep 2020 14:33:31 +0300
Subject: [PATCH 1/2] Add files via upload

---
 basket_script.js  | 129 ++++++++++++
 catalog.html      |  76 +++++++
 catalog_script.js |  75 +++++++
 main.js           |  52 +++++
 style.css         | 511 ++++++++++++++++++++++++++++++++++++++++++++++
 5 files changed, 843 insertions(+)
 create mode 100644 basket_script.js
 create mode 100644 catalog.html
 create mode 100644 catalog_script.js
 create mode 100644 main.js
 create mode 100644 style.css

diff --git a/basket_script.js b/basket_script.js
new file mode 100644
index 0000000..84a31a5
--- /dev/null
+++ 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
new file mode 100644
index 0000000..ca54611
--- /dev/null
+++ b/catalog.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>Rollerskates</title>
+		<link rel="stylesheet" href="style.css">
+		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+	</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="catalog.html" 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="search clearfix">
+				Поиск по каталогу:
+				<input
+					type="text" size="20" class="products_filter"
+					v-bind:value="productName"
+					v-on:input="filter($event)"
+				>
+				<!-- <input type="submit" id="find" value="искать"> -->
+			</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>
\ No newline at end of file
diff --git a/catalog_script.js b/catalog_script.js
new file mode 100644
index 0000000..84c7b9b
--- /dev/null
+++ b/catalog_script.js
@@ -0,0 +1,75 @@
+'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 = [];
+		this.filteredProducts = [];
+	}
+
+	#getProducts() {
+		this.products = products;
+		this.filteredProducts = this.products;
+	}
+
+	render(list) {
+		if (list && list.length > 0) {
+		} else {
+			this.#getProducts();
+		}
+				
+		let html = '';
+		this.filteredProducts.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);
+	}
+
+	filterProducts(value) {
+		const regexp = new RegExp(value, 'i');
+		this.filteredProducts = this.products.filter(product => regexp.test(product.title));
+		this.render(this.filteredProducts);
+	}
+}
diff --git a/main.js b/main.js
new file mode 100644
index 0000000..411d315
--- /dev/null
+++ b/main.js
@@ -0,0 +1,52 @@
+'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');
+    let findValue = document.querySelector('.products_filter');
+    let findButton = document.getElementById('find');
+    
+
+    catalog.addEventListener('click', (event) => {
+        console.log(event.target.innerText);
+        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();
+    });
+
+    new Vue({
+        el: '.search',
+        data: {
+            productName: '',
+        },
+
+        methods: {
+            filter(event) {
+                this.productName = event.target.value;
+                catalogList.filterProducts(this.productName);
+            }
+        }
+    });
+
+});
\ No newline at end of file
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..e8779d1
--- /dev/null
+++ b/style.css
@@ -0,0 +1,511 @@
+body {
+	background: #f8f8f8;
+}
+
+p {
+	color: #484343;
+	font-size: 16px;
+	font-weight: 400;
+	text-align: left;
+	line-height: 24px;
+	font-family: Tahoma, Geneva, sans-serif;
+}
+
+h1 {
+	font-family: Tahoma, Geneva, sans-serif;
+	font-style: italic;
+}
+
+h3 {
+	font-family: ‘Times New Roman’, Times, serif;
+}
+
+a {
+	font-family: Tahoma, Geneva, sans-serif;
+}
+
+hr {
+	clear: both;
+}
+
+button {
+	background: darkorange;
+	border-radius: 10px;
+	min-width: 80px;
+	min-height: 40px;
+	font-family: Tahoma, Geneva, sans-serif;
+	font-size: 16px;
+	border: none;
+	color: #fff;
+	margin-bottom: 3px;
+	padding-left: 10px;
+	padding-right: 10px;
+}
+
+button:hover {
+	background: orange;
+}
+
+button:focus {
+	box-shadow: 0 0 0 1px gray;
+	outline: none;
+	
+}
+
+iframe {
+	height: 374px;
+	width: 100%;
+}
+
+.wraper {
+	min-height: 100%;
+	max-width: 1200px;
+	position: relative;
+	margin: 0 auto;
+}
+
+.main-wall {
+	background-image: url(image/s1200.jfif);
+	background-repeat: no-repeat;
+	min-height: 801px;
+	position: relative;
+}
+
+.hidden {
+	display: none;
+}
+
+.picture {
+	outline: 1px solid #52dbd3;
+	float: left;
+}
+
+.short {
+	overflow: hidden;
+	padding-left: 10px;
+}
+
+.description {
+	clear: both;
+	padding-top: 1px;
+}
+
+.picture:hover {
+	outline: none;
+}
+
+.container {
+	width: 100%;
+	margin: 0 auto;
+	position: relative;
+}
+
+.main-page {
+	float: right;
+	margin-right: 20px;
+}
+
+.main-page-text {
+	color: #fff;
+}
+
+.header {
+	position: relative;
+	height: 100px;
+	margin: 0 auto;
+	background-image: url(image/heder.jpg);
+	min-width: 600px;
+}
+
+#logo {
+	margin: 11px 0 0 30px;
+	width: 156px;
+	height: 78px;
+	display: inline-block;
+	vertical-align: bottom;
+	position: absolute;
+}
+
+.main_menu {
+	text-align: right;
+	position: absolute;
+	min-width: 414px;
+	min-height: 90px;
+	right: 0;
+}
+
+.menulist {
+	font-family: Tahoma, Geneva, sans-serif;
+	font-weight: 900;
+	font-size: 1.3em;
+	display: inline-block;
+	margin-top: 35px;
+}
+
+.menulist li {
+	margin-right: 25px;
+	display: inline;
+}
+
+.menulist li:last-child {
+	margin-right: 125px;
+}
+
+.menulist li a {
+	color: silver;
+	text-decoration: none;
+}
+
+.menulist li a:hover {
+	color: #52dbd3;
+	text-decoration: overline;
+	background: inherit;
+}
+
+.cart {
+	position: absolute;
+	display: inline-block;
+	right: 5px;
+	bottom: 0;
+}
+
+.cart-button {
+	display: inline-block;
+	float: right;
+	color: #fff;
+	font-size: 10px;
+	font-weight: 700;
+	line-height: 20px;
+	text-transform: uppercase;
+	letter-spacing: 2px;
+	width: 92px;
+	height: 20px;
+	box-shadow: 0 2px 5px 1px rgba(109, 109, 109, 0.35);
+	border-radius: 23px;
+	text-align: center;
+	text-decoration: none;
+	position: relative;
+	border: 1px solid #ffffff;
+}
+
+.cart-button:hover {
+	background-color: #ffffff;
+	color: #212121;
+}
+
+.cart-button:active {
+	box-shadow: none;
+	border: none;
+}
+
+.catalog a:hover {
+	background: #eaeaea;
+}
+
+.features {
+	color: #484343;
+	font-size: 16px;
+	font-weight: 400;
+	font-family: Tahoma, Geneva, sans-serif;
+	line-height: 20px;
+}
+
+.heading {
+	color: #000;
+	font-size: 18px;
+	font-weight: 400;
+	background: #eaeaea;
+}
+
+#short {
+	color: #707070;
+	font-size: 14px;
+	font-style: italic;
+	line-height: 16px;
+}
+
+.user {
+	color: blue;
+	font-size: 14px;
+	font-family: ‘Courier New’, Courier, monospace;
+	text-transform: capitalize;
+}
+
+#email:focus {
+	color: yellow;
+	background: gray;
+}
+
+.product:first-letter {
+	font-family: ‘Courier New’, Courier, monospace; /* Шрифт первой буквы */
+    font-size: 200%; /* Размер шрифта первого символа */
+    color: orange;
+}
+
+.catalog {
+	text-align: center;
+}
+
+.product_preview {
+	display: inline-block;
+	width: 200px;
+	text-align: center;
+	vertical-align: top;
+	margin-left: 20px;
+}
+
+.preview_image {
+	display: inline-block;
+	width: 120px;
+	height: 120px;
+}
+
+.product_preview p {
+	text-align: center;
+}
+
+.catalog div:first-child {
+	margin-left: 0;
+}
+
+.catalog img {
+	outline: 1px solid silver;
+}
+
+.prod a {
+	height: 280px;
+	width: 200px;
+}
+
+.catalog-menu {
+	text-align: center;
+	font-family: Tahoma, Geneva, sans-serif;
+	margin-bottom: 40px;
+}
+
+.clearfix {
+	clear: both;
+}
+
+.search {
+	text-align: right;
+	color: #484343;
+	font-size: 12px;
+	font-weight: 400;
+	font-family: Tahoma, Geneva, sans-serif;
+}
+
+.search input {
+	/*float: right;*/
+	margin-bottom: 20px;
+}
+
+.catalog-menu-list {
+	display: inline;
+	margin-right: 25px;
+	font-family: Tahoma, Geneva, sans-serif;
+	padding: 5px;
+}
+
+.catalog-active {
+	/*border-top: 2px solid #000;*/
+	border-bottom: 2px solid #52dbd3;
+}
+
+.catalog-active a {
+	color: #000;
+}
+
+.catalog-link {
+	font-family: ‘Times New Roman’, sans-serif;
+	text-decoration: none;
+	color: grey;
+	font-weight: 700;
+}
+
+
+.catalog-menu-list a:hover {
+	color: #000;
+}
+
+/* корзина */
+
+.basket_container {
+	position: absolute;
+	top: 105px;
+	right: 0;
+	width: 100%;
+	height: 100%;
+	background-color: #f8f8f8;
+}
+
+.close {
+	position: absolute;
+	right: 25px;
+	color: darkblue;
+	border: 2px solid darkblue;
+	border-radius: 20%;
+	padding: 1px 5px;
+}
+
+.close:hover {
+	color: red;
+	border: 2px solid red;
+}
+
+.basket_container .head {
+    margin: 25px auto;
+}
+
+.h2 {
+    margin-top: 10px;
+}
+
+.basket_list {
+    position: relative;
+}
+
+.basket_record {
+    width: 60%;
+    min-width: 670px;
+    display: block;
+    margin: 10px auto;
+    border-bottom: 1px solid grey;
+    position: relative;
+}
+
+.basket_list .basket_record {
+    position: relative;
+    display: block;
+    height: 170px;
+    float: none;
+}
+
+.basket_list span.product_name {
+    margin-left: 1em;
+    width: 8em;
+    position: relative;
+    display: block;
+    float: left;
+}
+
+.basket_list span.product_price {
+    margin-left: 1em;
+    width: 7em;
+    position: relative;
+    display: block;
+    float: left;
+}
+
+.basket_list span.product_cost {
+    margin-left: 1em;
+    width: 7em;
+    position: relative;
+    display: block;
+    float: left;
+}
+
+.basket_delete {
+	display: inline-block;
+    /*padding: 10px 0;*/
+}
+
+.basket_delete a {
+	text-decoration: none;
+	color: #000;
+}
+
+.basket_delete a:hover {
+	text-decoration: none;
+	color: red;
+}
+
+.basket_summary p {
+    color: #484343;
+	font-size: 20px;
+	font-weight: 900;
+	text-align: left;
+	line-height: 24px;
+	font-family: Tahoma, Geneva, sans-serif;
+	margin-top: 20px;
+	margin-left: 20px;
+}
+
+.basket_list input[type="number"] {
+    width: 3em;
+    position: relative;
+    display: block;
+    float: left;
+}
+
+.basket_list .basket_record button {
+    margin-top: 50px;
+    margin-left: 390px;
+    width: 150px;
+    position: absolute;
+    display: block;
+    float: left;
+}
+
+.basket_list button {
+    margin-left: 45px;
+    width: 150px;
+    display: block;
+    float: left;
+}
+
+.basket_container button a {
+    text-decoration: none;
+    color: #555;
+}
+
+.basket_container img {
+    display: block;
+    float: left;
+    width: 150px;
+    border-radius: 25px;
+}
+
+.basket_container input[type="submit"] {
+    width: 150px;
+    display: block;
+    float: left;
+    margin-bottom: 25px;
+}
+
+.basket_container .basket_summary {
+    display: block;
+    margin-left: 50px;
+    margin-bottom: 15px;
+    color: #555;
+}
+
+.make_order {
+	margin-left: 50px;
+}
+
+
+/*Далее код для прижатия "подвала" к нижней части страницы*/
+html, body {
+	height: 100%
+}
+
+.forfooter {
+	height: 60px;
+	max-width: 1200px;
+}
+
+.footer {
+	height: 60px;
+	background-color: #eaeaea;
+	margin-top: -60px;
+	max-width: 1200px;
+	margin: -60px auto 0 auto;
+}
+
+.footer p {
+	text-align: right;
+	margin-right: 90px;
+	margin-top: 10px;
+}
+

From f73b0e5acc629439ebb13192376295a7ab2dcd00 Mon Sep 17 00:00:00 2001
From: zagidulin <54302637+zagidulin@users.noreply.github.com>
Date: Tue, 8 Sep 2020 14:33:57 +0300
Subject: [PATCH 2/2] Delete catalog.json

---
 responses/catalog.json | 22 ----------------------
 1 file changed, 22 deletions(-)
 delete mode 100644 responses/catalog.json

diff --git a/responses/catalog.json b/responses/catalog.json
deleted file mode 100644
index dd829ef..0000000
--- a/responses/catalog.json
+++ /dev/null
@@ -1,22 +0,0 @@
-[
-  {
-    "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"
-  }  
-]
\ No newline at end of file