diff --git a/hw3/code.js b/hw3/code.js new file mode 100644 index 0000000..b1fe459 --- /dev/null +++ b/hw3/code.js @@ -0,0 +1,122 @@ +'use strict'; + +const API_URL = 'https://raw.githubusercontent.com/GeekBrainsTutorial/online-store-api/master/responses/catalogData.json'; + +function makeGETRequest(url) { + return new Promise(function (resolve, reject) { + let xhr; + if (window.XMLHttpRequest) { + xhr = new XMLHttpRequest(); + } else if (window.ActiveXObject) { + xhr = new ActiveXObject("Microsoft.XMLHTTP"); + } + xhr.open('GET', url, true); + + xhr.onreadystatechange = function () { + if (xhr.readyState === 4) { + xhr.status >= 200 && xhr.status < 300 ? resolve(xhr.responseText) : reject(`${xhr.statusText}, ${xhr.responseText}`); + } + }; + xhr.send(); + }) +} + +class GoodsItem { + constructor(product_name, price) { + this.product_name = product_name; + this.price = price; + } + render() { + return `
${this.product_name}

${this.price} руб.

`; + } +} + +class BasketItem { + constructor(product_name, price) { + this.product_name = product_name; + this.price = price; + } + + renderBasket() { + return `
${this.product_name}

${this.price} руб.

`; + } +} + +class GoodsList { + constructor() { + this.goods = []; + this.basket = []; + } + fetchGoods() { + makeGETRequest(API_URL) + .then(response => { + this.goods = JSON.parse(response) + return this.goods; + }) + .then(() => this.render()) + .then(() => this.renderBasketList()) + .then(() => this.addButtonsClick()) + .then(() => this.removeButtonClick()) + .catch(error => { throw new Error(error) }) + } + + render() { + let listHtml = ''; + this.goods.forEach(good => { + const goodItem = new GoodsItem(good.product_name, good.price); + listHtml += goodItem.render(); + }); + document.querySelector('.goods-list').innerHTML = listHtml; + } + + renderBasketList() { + let basketHTML = ''; + this.basket.forEach(item => { + const basketItem = new BasketItem(item.product_name, item.price); + basketHTML += basketItem.renderBasket(); + }); + document.querySelector('.basket').innerHTML = basketHTML; + } + + addButtonsClick() { + let addButtons = document.querySelectorAll('.addButton'); + addButtons.forEach(item => { + item.addEventListener('click', (event) => this.addItem(event, this.goods)); + }) + } + + removeButtonClick() { + let removeButtons = document.querySelectorAll('.removeButton'); + removeButtons.forEach(item => { + item.addEventListener('click', (event) => this.removeItem(event, this.basket)) + }) + } + + addItem(event, goods) { + let targetItem = goods.find(item => { + return item.product_name === event.target.dataset.name; + }) + this.basket.push(targetItem); + this.renderBasketList(); + } + + removeItem(event, basket) { + let targetItem = basket.find(item => { + return item.product_name === event.target.dataset.name; + }) + let i = this.basket.indexOf(targetItem); + this.basket.splice(i, 1); + this.renderBasketList(); + } + + // sumGoods() { + // let sum = 0; + // this.goods.forEach(item => { + // sum += parseInt(item.price); + // }) + // return sum; + // } +} + +const list = new GoodsList(); +list.fetchGoods() diff --git a/hw3/index.html b/hw3/index.html new file mode 100644 index 0000000..42429e1 --- /dev/null +++ b/hw3/index.html @@ -0,0 +1,42 @@ + + + + + + + + + + e-Shop + + + +
+
+ +
+ Ваша корзина +
+
+
+
+
+
+
+ + + + + + + + + diff --git a/hw3/style.css b/hw3/style.css new file mode 100644 index 0000000..3e55b5c --- /dev/null +++ b/hw3/style.css @@ -0,0 +1,96 @@ +body { + margin: auto; + width: 80%; +} + +header { + background: lightgrey; + max-width: 100%; + min-height: 80px; + border-radius: 5px; + box-shadow: 0 0 10px rgba(0, 0, 0, 1); + position: relative; +} + +.cart-button { + position: absolute; + right: 35px; + top: 18px; + width: 140px; + height: 40px; + border: 0.1px solid grey; + border-radius: 10px; + box-shadow: 0 0 40px 40px #FF8C00 inset, 0 0 0 0 #FF4500; + font-weight: bold; + letter-spacing: 2px; + color: white; + transition: .15s ease-in-out; +} + +.cart-button:hover { + box-shadow: 0 0 10px 0 #FF4500 inset, 0 0 10px 4px #FF4500; + color: #FF4500; + cursor: pointer; + } + +.goods-list { + margin-top: 20px; + margin: 20px auto auto; + max-width: 80%; + box-shadow: 0 0 10px 5px grey inset, 0 0 0 0 grey; + min-height: 400px; + border-radius: 15px; +} + +.goods-item { + float: left; + display: inline-block; + border-radius: 10px; + margin-left: 30px; + margin-top: 30px; + min-width: 27%; + height: 130px; + text-align: center; +} + +.goods-item h5 { + margin-top: 10px; +} + +.basket { + width: 100%; +} + +.addButton, +.removeButton { + border-radius: 3px; + background-color: transparent; + letter-spacing: 2px; + transition: .15s ease-in-out; +} + +.addButton { + border: 0px solid green; + color: green; +} + +.removeButton { + border: 0px solid darkred; + color: red; +} + +.addButton:hover { + box-shadow: 0 0 5px 0 lightgreen inset, 0 0 5px darkgreen; + color: darkgreen; + cursor: pointer; + } + +.removeButton:hover { + box-shadow: 0 0 5px 0 #DB5E5E inset, 0 0 5px #970000; + color: darkred; + cursor: pointer; +} + +.basket-item { + text-align: center; +}