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