From bb3a8e605f9754880b697f9497a9b566ab611726 Mon Sep 17 00:00:00 2001 From: zagidulin <54302637+zagidulin@users.noreply.github.com> Date: Wed, 2 Sep 2020 14:40:32 +0300 Subject: [PATCH 1/2] Add files via upload --- catalog_script.js | 89 +++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) create mode 100644 catalog_script.js diff --git a/catalog_script.js b/catalog_script.js new file mode 100644 index 0000000..0fdead4 --- /dev/null +++ b/catalog_script.js @@ -0,0 +1,89 @@ +'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 `
`; + } +} + + +class ProductsList { + constructor() { + this.products = []; + this.filteredProducts = []; + } + + _getProducts() { + this.products = products; + this.filteredProducts = this.products; + console.log('this.filteredProducts', this.filteredProducts) + } + + render(list) { + /* В разборе д/з предложили убрать блок if ниже и всегда рендерить + this.filteredProducts. Но в этом блоке, если не было фильтрации и методу render() + не передан отфильтрованный список, выполняется получение списка товаров (this._getProducts()). + И render() без аргумента вызывается при загрузке/перезагрузке страницы. Таким образом, если + убрать блок условия, то вообще не будет получен список товаров и фильтровать тоже будет нечего. + Можно, кончено, в main.js вызывать _getProducts() отдельно при загрузке странице, но предполагается, + что это приватный метод (передалаю в #). + При фильтрации в render() можно было бы передавать true, например, тогда при отсутствии соответствия + поиску выводилась бы пустая страница, но в момент выполнения задания решил, что если нет удовлетворяющих + условиям поиска товаров, то будет выводиться весь каталог. + */ + if (list && list.length > 0) { + console.log(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'); + this.filteredProducts = this.products.filter(product => regexp.test(product.title)); + this.render(this.filteredProducts); + } +} From bbcf5d8370a2e956c6971c126bcd01527f31c197 Mon Sep 17 00:00:00 2001 From: zagidulin <54302637+zagidulin@users.noreply.github.com> Date: Wed, 2 Sep 2020 14:40:51 +0300 Subject: [PATCH 2/2] Add files via upload --- main.js | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 main.js 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