alexcoach030 · alexcoach030 · Mar 10, 2021 · Mar 11, 2021 · Mar 11, 2021 · Mar 18, 2021
diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml
diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml
diff --git a/basket.js b/basket.js
@@ -0,0 +1,96 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+    function filter(event){
+        let action = event.target.dataset.filter;
+        if (!action) return;
+        let catalog = document.getElementById('catalog');
+        if (action === 'all'){//если "Показать все товары"
+            catalog.innerHTML = '';
+            getCatalog();
+            return;
+        }
+        let products = catalog.querySelectorAll('.prod');//получаем все prod в каталоге
+        products.forEach(element => {//перебираем проды и удаляем лишние
+            if (element.dataset.type !== action) element.remove();
+        })
+    }
+
+    function getCatalog(){
+        for (let [key, value] of Object.entries(products)) {//Перебираю объект массивов с каталогом для вывода в DOM
+            let product = document.createElement('div');
+            product.className = 'prod';
+            product.dataset.id = key;
+            product.dataset.type = value.type;
+            let name = value.name;
+            let price = value.price;
+            product.innerHTML = `<p>Название:</p> <p>${name}</p><p>Цена: ${price}</p><button data-name="add" data-id="${key}">Добавить в корзину</button>`
+            catalog.append(product);
+        }
+    }
+
+    function price() {
+        sum = 0;
+        function getPrice (){
+            for (let i = 0; i < basket.length; i++) {
+                let a = basket[i].id;
+                sum += products[a].price * basket[i].amount;
+            } return sum
+        }getPrice();
+    }
+
+    function getBasket() {
+        let prodId = basket[basket.length - 1].id;
+        let cargo = document.createElement('p');
+        cargo.innerHTML = `<p>Название товара: <span>${products[prodId].name}</span>, цена: <span>${products[prodId].price}</span></p>`
+        cart.append(cargo);
+    }
+
+    function addToCart(event) {
+        let action = event.target.dataset.name;
+        if (!action) return;
+        let id = event.target.dataset.id;
+        let amount = 1;
+        basket.push({id, amount});
+        price();
+        cartText.innerHTML = `<p>Общая стоимость товаров составляет <span>${sum}</span></p>`;
+        getBasket();
+    }
+
+    let sum = 0;
+
+    let products = {
+        1: {
+            name: 'bike',
+            price: 300,
+            type: 'movable',
+        },
+        2: {
+            name: 'car',
+            price: 500,
+            type: 'movable',
+        },
+        3: {
+            name: 'ship',
+            price: 1000,
+            type: 'movable',
+        },
+        4: {
+            name: 'something',
+            price: 100,
+            type: 'immovables',
+        }
+    }
+
+    let basket = [];
+    let container = document.querySelector('#shop');
+    let cart = document.createElement('div');
+    cart.className = 'basket';
+    let cartText = document.createElement('p');
+    cartText.innerText = 'Корзина пуста';
+    container.append(cart);
+    cart.append(cartText);
+
+    getCatalog();
+    document.addEventListener('click', addToCart);
+    document.addEventListener('click', filter);
+})
diff --git a/index.html b/index.html
@@ -4,8 +4,21 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Title</title>
+    <link rel="stylesheet" href="style.css">
 </head>
 <body>
-<script src="main.js"></script>
+<section class="content">
+    <h2>Корзина</h2>
+    <div id="shop" class="shop"></div>
+</section>
+<section class="container"><!--для каталога-->
+    <div id="catalog" class="catalog"></div>
+</section>
+<section class="filters">
+    <button class="filter" data-filter="movable">Движимое имущество</button>
+    <button class="filter" data-filter="immovables">Недвижимое имущество</button>
+    <button class="filter" data-filter="all">Показать все товары</button>
+</section>
+<script src="basket.js"></script>
 </body>
 </html>
diff --git a/style.css b/style.css
diff --git a/style.css.map b/style.css.map
diff --git a/style.less b/style.less
@@ -0,0 +1,67 @@
+button{
+  background-color: gray;
+  outline: 2px solid black;
+}
+
+.content{
+  display: flex;
+  margin-bottom: 20px;
+  h2{
+    text-align: center;
+  }
+}
+
+.container{
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+}
+
+.prod{
+  width: 150px;
+  height: 200px;
+  font-size: 22px;
+  text-align: center;
+  background-color: aqua;
+  outline: 1px solid black;
+}
+
+.catalog{
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.basket{
+  background-color: aquamarine;
+  outline: 2px solid black;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  p{
+    margin: 0!important;
+    padding: 0!important;
+    font-size: 22px;
+    span{
+      color: red;
+    }
+  }
+}
+
+.content{
+  display: flex;
+  flex-direction: column;
+}
+
+.filters{
+  margin-top: 40px;
+  display: flex;
+  justify-content: space-around;
+}
+
+.filter {
+  background-color: cornflowerblue;
+  font-size: 22px;
+  cursor: pointer;
+
+}
diff --git a/tetris.css b/tetris.css
@@ -0,0 +1,79 @@
+#score, #lines, #figures, #setting {
+    margin-top: 20px;
+    margin-left: 60px;
+    font-size: 40px;
+}
+
+.green{
+    background-color: green;
+}
+
+button{
+    font-size: 22px;
+}
+
+#board {
+    height: 30px;
+    width: 30px;
+    display: flex;
+    flex-wrap: wrap;
+    background-color: #dcd6bc;
+    margin-left: 50px;
+    margin-top: 20px;
+    border: 10px solid #dcd6bc;
+    user-select: none;
+}
+
+#board div {
+    height: 30px;
+    width: 30px;
+    font-size: 25px;
+    text-align: center;
+    vertical-align: center;
+    font-family: 'Roboto Mono', monospace;
+    font-weight: bold;
+    cursor: pointer;
+    box-sizing: border-box;
+    border: 5px solid;
+    border-color: #f5f3eb #bab7a9 #bab7a9 #fffd9b
+}
+
+.closed {
+    background-color: #dcd6bc;
+}
+
+.lFigure {
+    background-color: blue;
+}
+
+.jFigure {
+    background-color: green;
+}
+
+.zFigure {
+    background-color: red;
+}
+
+.sFigure {
+    background-color: orange;
+}
+
+.uFigure {
+    background-color: black;
+}
+
+.tFigure {
+    background-color: darkblue;
+}
+
+.oFigure {
+    background-color: darkred;
+}
+
+.iFigure {
+    background-color: darkgreen;
+}
+
+.yFigure {
+    background-color: crimson;
+}