diff --git a/Lesson4/regExp.html b/Lesson4/regExp.html new file mode 100644 index 0000000..c7dd439 --- /dev/null +++ b/Lesson4/regExp.html @@ -0,0 +1,27 @@ + + + + + + + Document + + +
Original text
+

Lorem 'ipsum' dolor sit amet 'consectetur' adipisicing elit. Neque, aren't .Lorem 'ipsum' dolor sit amet 'consectetur' adipisicing elit. Neque, aren't .Lorem 'ipsum' dolor sit amet 'consectetur' adipisicing elit. Neque, aren't .Lorem 'ipsum' dolor sit amet 'consectetur' adipisicing elit. Neque, aren't .Lorem 'ipsum' dolor sit amet 'consectetur' adipisicing elit. Neque, aren't .Lorem 'ipsum' dolor sit amet 'consectetur' adipisicing elit. Neque, aren't .Lorem 'ipsum' dolor sit amet 'consectetur' adipisicing elit. Neque, aren't .Lorem 'ipsum' dolor sit amet 'consectetur' adipisicing elit. Neque, aren't .Lorem 'ipsum' dolor sit amet 'consectetur' adipisicing elit. Neque, aren't .Lorem 'ipsum' dolor sit amet 'consectetur' adipisicing elit. Neque, aren't .Lorem 'ipsum' dolor sit amet 'consectetur' adipisicing elit. Neque, aren't .Lorem 'ipsum' dolor sit amet 'consectetur' adipisicing elit. Neque, aren't .Lorem 'ipsum' dolor sit amet 'consectetur' adipisicing elit. Neque, aren't .Lorem 'ipsum' dolor sit amet 'consectetur' adipisicing elit. Neque, aren't .Lorem 'ipsum' dolor sit amet 'consectetur' adipisicing elit. Neque, aren't .Lorem 'ipsum' dolor sit amet 'consectetur' adipisicing elit. Neque, aren't .Lorem 'ipsum' dolor sit amet 'consectetur' adipisicing elit. Neque, aren't .Lorem 'ipsum' dolor sit amet 'consectetur' adipisicing elit. Neque, aren't.

+

Regexp text

+

+ + + \ No newline at end of file diff --git a/Lesson5/css/style.css b/Lesson5/css/style.css index 801db80..7b08a45 100644 --- a/Lesson5/css/style.css +++ b/Lesson5/css/style.css @@ -169,3 +169,18 @@ img { border: none; border-bottom: 2px solid #fafafa; } +.cart-block { + display: none; + position: absolute; + z-index: 1; + width: 65%; + height: auto; + + top: 50px; + background: #fff; + color: #000; + padding: 25px; + } + .active { + display: block !important; + } \ No newline at end of file diff --git a/Lesson5/index.html b/Lesson5/index.html index 0b1aeb9..09a2e06 100644 --- a/Lesson5/index.html +++ b/Lesson5/index.html @@ -12,16 +12,37 @@
- -
- + +
+

Корзина пуста

+
+ Some img +
+

{{cart.product_name}}

+

{{cart.price}}₽

+ +
+
+
-
+
+
+ Some img +
+

{{product.product_name}}

+

{{product.price}}₽

+ +
+
+
+
Some img
diff --git a/Lesson5/js/main.js b/Lesson5/js/main.js index b090695..5ef965f 100644 --- a/Lesson5/js/main.js +++ b/Lesson5/js/main.js @@ -5,7 +5,12 @@ const app = new Vue({ data: { catalogUrl: '/catalogData.json', products: [], - imgCatalog: 'https://via.placeholder.com/200x150' + imgCatalog: 'https://via.placeholder.com/200x150', + filtered:[], + cardProducts:[], + searchLine:'', + showCart:false + }, methods: { getJson(url) { @@ -16,8 +21,21 @@ const app = new Vue({ }) }, addProduct(product) { - console.log(product.id_product); - } + this.cardProducts.push(product); + + }, + removeProduct(product) { + + + this.cardProducts.splice(product, 1); + + }, + filterGoods(value){ + + const regexp = new RegExp(value, 'i'); + this.filtered = this.products.filter(product =>regexp.test(product.product_name)); + + } }, beforeCreate() { console.log('beforeCreate');