GAS53 · GAS53 · Apr 20, 2022 · Akseonov · Apr 21, 2022 · Akseonov
diff --git a/app.js b/app.js
@@ -0,0 +1,88 @@
+let toBasketBtns = document.querySelectorAll('.toBasketBtn');
+toBasketBtns.forEach(function (btn) {
+    btn.addEventListener('click', function (event) {
+        let id = event.srcElement.dataset.id;
+        let price = event.srcElement.dataset.price;
+        let name = event.srcElement.dataset.name;
+        basket.addProduct({ id: id, price: price, name: name });
+    });
+});
+
+function get_prod_name() {
+    const entities = ['phone', 'Notebook', 'tv'];
+    const colors = ['Samsung', 'Lg', 'Abble', 'Sony'];
+    return colors[randomInt(0, colors.length - 1)] + ' ' + entities[randomInt(0, entities.length - 1)];
+
+}
+
+
+function randomInt(min, max) {
+    let rand = min + Math.random() * (max + 1 - min);
+    return Math.floor(rand);
+}
+
+
+function render_prod_name() {
+    let all_names = document.querySelectorAll('.prod_name')
+    for (i=0;i<all_names.length;i++){
+        all_names[i].textContent = this.get_prod_name()
+    }
+}
+
+render_prod_name()
+
+
+
+let basket = {
+    products: {},
+    addProduct(product) {
+        this.addProductToObject(product);
+        this.renderProductInBasket(product);
+        this.renderTotalSum();
+        this.addRemoveBtnsListeners();
+    },
+
+    renderTotalSum() {
+        document.querySelector('.total').textContent = this.getTotalSum();
+    },
+
+
+    getTotalSum() {
+        let sum = 0;
+        for (let key in this.products) {
+            sum += this.products[key].price * this.products[key].count;
+        }
+        return sum;
+    },
+
+
+    addProductToObject(product) {
+        if (this.products[product.id] == undefined) {
+            this.products[product.id] = {
+                price: product.price,
+                name: product.name,
+                count: 1
+            }
+        } else {
+            this.products[product.id].count++;
+        }
+    },
+
+    renderProductInBasket(product) {
+        let productExist = document.querySelector(`.productCount[data-id="${product.id}"]`);
+        if (productExist) {
+            productExist.textContent++;
+            return;
+        }
+        let productRow = `
+            <tr>
+                <th scope = "row">${product.id}</th>
+                <td>${product.name}</td>
+                <td>${product.price}</td>
+                <td class="productCount" data-id="${product.id}">1</td>
+            </tr>
+        `;
+        let tbody = document.querySelector('tbody');
+        tbody.insertAdjacentHTML('beforeend', productRow);
+    },
+};
diff --git a/index.html b/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <link rel="stylesheet" href="styles/style.css">
+
+</head>
+<body>
+  <div class="container">
+    <nav class="navbar navbar-light bg-dark">
+      <div class="btn-group ml-auto">
+        <div class="dropdown-menu dropdown-menu-right basketPanel">
+          <table class="table table-hover">
+            <thead>
+              <tr>
+                <th scope="col">ID</th>
+                <th scope="col">Имя</th>
+                <th scope="col">Цена</th>
+                <th scope="col">Количество</th>
+                <th scope="col">Количество</th>
+                <th scope="col"></th>
+              </tr>
+            </thead>
+            <tbody></tbody>
+            <tfoot>
+              <tr>
+                <th colspan="2" scope="row">Итого:</th>
+                <td colspan="3">
+                  <span class="total">0</span>
+                  <i class="fas fa-ruble-sign"></i>
+                </td>
+              </tr>
+            </tfoot>
+          </table>
+          <input>укажите адрес доставки</th>
+        </div>
+      </div>
+    </nav>
+
+    <br>
+
+
+    <div class="container">
+      <div class="col-4">
+        <div class="prod_name"></div>
+        <img src="https://placeimg.com/300/200/tech">
+        <div>
+          <span class="productPrice">120</span>
+          <i class="fas fa-ruble-sign"></i>
+        </div>
+        <button type="button" class="btn btn-success mt-3 toBasketBtn" data-id="1" data-price="120" data-name="Товар 1">
+          В корзину
+        </button>
+      </div>
+        <div class="prod_name"></div>
+        <img src="https://placeimg.com/300/200/tech/sepia">
+        <div>
+          <span class="productPrice">75</span>
+          <i class="fas fa-ruble-sign"></i>
+        </div>
+        <button type="button" class="btn btn-success mt-3 toBasketBtn" data-id="2" data-price="75" data-name="Товар 2">
+          В корзину
+        </button>
+      </div>
+      <div class="col-4">
+        <div class="prod_name"></div>
+        <img src="https://placeimg.com/300/200/tech/grayscale">
+        <div class="productPrice"></div>
+        <button type="button" class="btn btn-success mt-3 toBasketBtn" data-id="3" data-price="3000"
+          data-name="Товар 3">
+          В корзину
+        </button>
+      </div>
+    </div>
+  </div>
+
+<script src='app.js'></script>
+</body>
+
+</html>
diff --git a/style.css b/style.css
@@ -0,0 +1,71 @@
+*{
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+header {
+  height: 80px;
+  background: #444;
+  color: white;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 20px;
+}
+
+main {
+  display: flex;
+  justify-content: space-between;
+  padding: 20px;
+  flex-wrap: wrap;
+}
+
+.product-card {
+  width: 30%;
+  padding: 10px;
+  border: 1px solid #444;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin: 20px;
+}
+
+.product-card__img-wrapper{
+  display: flex;
+  justify-content: space-around;
+  margin: 20px;
+}
+
+.product-card__img--small {
+  width: 30%
+}
+
+.product-card__title {
+  font-size: 20px;
+  color: #444;
+  margin: 10px;
+}
+
+.product-card__price {
+  font-size: 16px;
+  color: firebrick;
+}
+
+.product-card__btn {
+  background: firebrick;
+  margin: 10px;
+  padding: 10px 20px;
+  color: white;
+  border: 1px solid firebrick;
+  cursor: pointer;
+}
+
+.product-card__btn:hover {
+  background: white;
+  color: firebrick;
+}
+.bucketPanel {
+  width: 400px;
+  padding: 10px;
+}