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 `
+ ${this.picture} + ${this.title} + ${this.price} руб + + ${this.quantity*this.price} руб +
+ удалить +
+
`; + } +} + +// класс Корзины товаров +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 = `${totalQuantity}`; + document.querySelector('.total_price').innerHTML = `${totalPrice}`; + } + + 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..61fa68c --- /dev/null +++ b/catalog.html @@ -0,0 +1,69 @@ + + + + + Rollerskates + + + +
+
+ +
+ +
+ Корзина +
+
+
+
+

Роликовые коньки

+
+ +
+
+ +
+
+ +
+ + +
+
+
+
+

Все права защищены ©

+
+ + + + + \ No newline at end of file diff --git a/catalog_script.js b/catalog_script.js new file mode 100644 index 0000000..4c22571 --- /dev/null +++ b/catalog_script.js @@ -0,0 +1,77 @@ +'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 `
+
+ + + +

+ ${this.title} +

${this.price} руб.

+ +
`; + } +} + + +class ProductsList { + constructor() { + this.products = []; + this.filteredProducts = []; + } + + _getProducts() { + this.products = products; + this.filteredProducts = this.products; + } + + render(list) { + if (list && list.length > 0) { + this.filteredProducts = list; + } 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'); + const filteredProducts = this.products.filter(product => regexp.test(product.title)); + this.render(filteredProducts); + } +} diff --git a/main.js b/main.js new file mode 100644 index 0000000..867df22 --- /dev/null +++ b/main.js @@ -0,0 +1,39 @@ +'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(); + }); + + findButton.addEventListener('click', () => { + catalogList.filterProducts(findValue.value); + }); + +}); \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..1cae37f --- /dev/null +++ b/style.css @@ -0,0 +1,507 @@ +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; +} + +.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; +} + diff --git a/task_2.html b/task_2.html new file mode 100644 index 0000000..8e897fd --- /dev/null +++ b/task_2.html @@ -0,0 +1,11 @@ + + + + + eShop + + +
+ + + \ No newline at end of file diff --git a/task_2.js b/task_2.js new file mode 100644 index 0000000..46ce99c --- /dev/null +++ b/task_2.js @@ -0,0 +1,41 @@ +'use strict'; + + +function makeGETRequest(url) { + const promise = new Promise((resolve, reject) => { + let xhr; + if (window.XMLHttpRequest) { + xhr = new XMLHttpRequest(); + } else if (window .ActiveXObject) { + xhr = new ActiveXObject("Microsoft.XMLHTTP"); + } + + xhr.onreadystatechange = function () { + if (xhr.readyState === 4) { + if (xhr.status === 200) { + resolve(xhr); + } else { + reject(); + } + } + } + + xhr.open( 'GET' , url, true ); + xhr.send(); + }); + + promise + .then((data) => { + data = JSON.parse(data.responseText); + console.log(data); + // return data.responseText; + }) + .catch(() => { + console.log('Error: data not found'); + }) +} + +const API_URL = 'https://raw.githubusercontent.com/GeekBrainsTutorial/online-store-api/master/responses'; + +makeGETRequest(`${API_URL}/catalogData.json`); +makeGETRequest(`${API_URL}/`);