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); + 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 + + +
+ +
+
+
+
+ + + + 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; +}