From 62ff0748824c4889f2448f99540a05010bedbda9 Mon Sep 17 00:00:00 2001 From: IngaSS Date: Thu, 4 Apr 2019 20:19:32 +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=201=D0=BC=D1=83=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 hw1/code.js | 57 ++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 JS_2 hw1/code.js diff --git a/JS_2 hw1/code.js b/JS_2 hw1/code.js new file mode 100644 index 0000000..cce96bb --- /dev/null +++ b/JS_2 hw1/code.js @@ -0,0 +1,57 @@ +// 'use strict'; + +// const 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$" } + +// ]; + +// const renderGoodsItem = (title = 'Umbrella', price = '300$') => `

${title}

${price}

`; + + +// const renderGoodsList = (list) => { +// const goodsList = list.map(item => renderGoodsItem(item.title, item.price)).join(''); // возникновение запятой происходит из-за шаблонов литералов, тк они по умолчанию используют метод toString и присоединяют возвращенный массив с запятыми +// document.querySelector('.goods-list').innerHTML = goodsList; +// }; + +// renderGoodsList(GOODS); + + +var 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$" } +]; + +var renderGoodsItem = function(title = 'Umbrella', price = '300$') { + return `

` + title + `

` + price + `

`; +} + +var renderGoodsList = function(list) { + var goodsList = list.map(function(item) { + return renderGoodsItem(item.title, item.price); + }) + document.querySelector('.goods-list').innerHTML = goodsList.join(''); +}; + +renderGoodsList(goods); + From b52f9c938a3e37c3af3f0af32943b7dc8f1bde42 Mon Sep 17 00:00:00 2001 From: IngaSS Date: Thu, 4 Apr 2019 20:19:41 +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=201=D0=BC=D1=83=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 hw1/index.html | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 JS_2 hw1/index.html diff --git a/JS_2 hw1/index.html b/JS_2 hw1/index.html new file mode 100644 index 0000000..d41257a --- /dev/null +++ b/JS_2 hw1/index.html @@ -0,0 +1,20 @@ + + + + + + + + e-Shop + + +
+ +
+
+
+
+ + + + From a1d88477c18a6b583ef10f8c22f7df7be6bc54be Mon Sep 17 00:00:00 2001 From: IngaSS Date: Thu, 4 Apr 2019 20:19:46 +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=201=D0=BC=D1=83=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 hw1/style.css | 54 ++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 54 insertions(+) create mode 100644 JS_2 hw1/style.css diff --git a/JS_2 hw1/style.css b/JS_2 hw1/style.css new file mode 100644 index 0000000..62d8fd1 --- /dev/null +++ b/JS_2 hw1/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; +}