From dabd13d5ad2a150601ec632c114bbe3186f40b58 Mon Sep 17 00:00:00 2001 From: IngaSS Date: Wed, 10 Apr 2019 15:36:47 +0300 Subject: [PATCH 1/3] =?UTF-8?q?=D0=97=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8=D0=B5?= =?UTF-8?q?=20=D0=BA=D0=BE=202=20=D1=83=D1=80=D0=BE=D0=BA=D1=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js_2_hw2/code.js | 75 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 75 insertions(+) create mode 100644 js_2_hw2/code.js diff --git a/js_2_hw2/code.js b/js_2_hw2/code.js new file mode 100644 index 0000000..f794a7d --- /dev/null +++ b/js_2_hw2/code.js @@ -0,0 +1,75 @@ +'use strict'; + +class GoodsItem { + constructor(title, price) { + this.title = title; + this.price = price; + } + render() { + return `

${this.title}

${this.price}

`; + } +} + +class GoodsList { + constructor() { + this.goods = []; + } + + fetchGoods() { + this.goods = [ + { title: 'Shirt', price: "150$" }, + { title: 'Socks', price: "50$" }, + { title: 'Jacket', price: "350$" }, + { title: 'Shoes', price: "250$" }, + { title: 'Skirt', price: "120$" }, + { title: 'Tie', price: "25$" }, + { title: 'Coat', price: "330$" }, + { title: 'Jacket', price: "350$" }, + { title: 'Shoes', price: "250$" }, + { title: 'Skirt', price: "120$" }, + { title: 'Tie', price: "25$" }, + { title: 'Coat', price: "330$" } + ]; + } + render() { + let listHtml = ''; + this.goods.forEach(good => { + const goodItem = new GoodsItem(good.title, good.price); + listHtml += goodItem.render(); + }); + document.querySelector('.goods-list').innerHTML = listHtml; + } + + sumGoods() { + let sum = 0; + this.goods.forEach(item => { + sum += parseInt(item.price); + }) + return sum; + } +} + +class Basket { + constructor() { + this.desiredProducts = []; + } + + fetchDesiredProducts() { + // здесь будут генерироваться в новый массив (который в конструкторе) желаемые товары при нажатии кнопки "купить" (ну в идеале) + } + + renderDesiredProducts() { + //здесь они должны выводиться + } +} + +class BasketItem { + constructor() { + + } +} + +const list = new GoodsList(); +list.fetchGoods(); +list.render(); +console.log(list.sumGoods()); From cc70c321b67608ca7cb7267ea74f71e2f9562faf Mon Sep 17 00:00:00 2001 From: IngaSS Date: Wed, 10 Apr 2019 15:36:53 +0300 Subject: [PATCH 2/3] =?UTF-8?q?=D0=97=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8=D0=B5?= =?UTF-8?q?=20=D0=BA=D0=BE=202=20=D1=83=D1=80=D0=BE=D0=BA=D1=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js_2_hw2/index.html | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 js_2_hw2/index.html diff --git a/js_2_hw2/index.html b/js_2_hw2/index.html new file mode 100644 index 0000000..d41257a --- /dev/null +++ b/js_2_hw2/index.html @@ -0,0 +1,20 @@ + + + + + + + + e-Shop + + +
+ +
+
+
+
+ + + + From fbf967ad9868ee75d4474c6f7ace892bce69ed99 Mon Sep 17 00:00:00 2001 From: IngaSS Date: Wed, 10 Apr 2019 15:37:00 +0300 Subject: [PATCH 3/3] =?UTF-8?q?=D0=97=D0=B0=D0=B4=D0=B0=D0=BD=D0=B8=D0=B5?= =?UTF-8?q?=20=D0=BA=D0=BE=202=20=D1=83=D1=80=D0=BE=D0=BA=D1=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js_2_hw2/style.css | 54 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 js_2_hw2/style.css diff --git a/js_2_hw2/style.css b/js_2_hw2/style.css new file mode 100644 index 0000000..62d8fd1 --- /dev/null +++ b/js_2_hw2/style.css @@ -0,0 +1,54 @@ +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: 20%; + 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: 1px solid #FF4500; + border-radius: 10px; + margin-left: 30px; + margin-top: 30px; + min-width: 20%; + text-align: center; +}