IgoryanM · IgoryanM · Feb 15, 2021 · Feb 15, 2021 · Om1X · Feb 15, 2021
diff --git a/HW_6/1.txt b/HW_6/1.txt
@@ -0,0 +1 @@
+
diff --git a/HW_6/cart.html b/HW_6/cart.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Cart</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div id='cart'></div>
+    <script src="cart.js"></script>   
+</body>
+</html>
diff --git a/HW_6/cart.js b/HW_6/cart.js
@@ -0,0 +1,98 @@
+const cart = {
+  goodsInCart: [],
+  cartDiv: document.getElementById('cart'),
+
+  init() {
+    this.cartDiv.style.backgroundColor = 'orange';
+    this.update(this.cartDiv);
+  },
+
+  countCartPrice() {
+    let CartPrice = 0;
+    this.goodsInCart.forEach(function(item) {
+      CartPrice += item.price * item.quantity;
+    });
+    return CartPrice;
+  },
+
+  update() {
+    if (this.goodsInCart.length > 0) this.cartDiv.textContent = `В корзине  ${this.goodsInCart.length} товара на сумму ${this.countCartPrice()} $.`;
+    else this.cartDiv.textContent = `Ваша корзина пуста.`;
+  }
+
+};
+
+const catalog = {
+  cart,
+  goods: [
+    {
+      title: 'iphone',
+      price: 1000,
+      quantity: 1
+    },
+    {
+      title: 'imac',
+      price: 1500,
+      quantity: 1
+    },
+    {
+      title: 'ipad',
+      price: 1200,
+      quantity: 1
+    }],
+
+  init() {
+    for (let i in this.goods) {
+      const catalogDiv = document.createElement('div');
+      const btn = document.createElement('div');
+
+      catalogDiv.className = 'item';
+      //catalogDiv.id = this.goods[i].title;
+      btn.className = 'button';
+      btn.id = this.goods[i].title;
+
+      document.body.appendChild(catalogDiv);
+      document.body.appendChild(btn);
+      catalogDiv.textContent = this.goods[i].title + ': ' +this.goods[i].price + ' $';
+      btn.textContent = 'Купить';
+
+    this.initClickHandler(btn);
+    }
+  },
+
+  initClickHandler(elem) {
+    elem.addEventListener('click', (event) => this.clickHandler(event));
+  },
+
+  clickHandler(event) {
+      if (event.target.tagName === 'DIV') {
+        this.addToCart(event.target.id);
+        console.log(this.cart.goodsInCart);
+        cart.update();
+      };
+  },
+
+  addToCart(goodTitle) {
+    let goodInCart = false;
+
+    for (let i in this.goods) {
+      if (goodTitle == this.goods[i].title) {
+        if (cart.goodsInCart.length == 0) cart.goodsInCart.push(this.goods[i]);
+        else {
+          for (let j in cart.goodsInCart) {
+                if (cart.goodsInCart[j].title == goodTitle) {
+                  cart.goodsInCart[j].quantity += 1;
+                  goodInCart = true;
+                }
+              } 
+          if (goodInCart == false) cart.goodsInCart.push(this.goods[i]);
+        };
+      };
+    };
+  }
+
+}
+
+
+catalog.init();
+cart.init();
diff --git a/HW_6/style.css b/HW_6/style.css
@@ -0,0 +1,66 @@
+* {
+    margin: 0;
+    padding: 0;
+}
+
+body {
+    font-family: sans-serif
+}
+
+
+.button {
+
+    box-shadow: 5px 20px 50px rgba(16, 112, 177, 0.2);
+    border-radius: 10px;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 26px;
+    text-align: center;
+    color: #2beb6b;
+    text-transform: uppercase;
+    background-color: rgb(68, 9, 146);
+
+ }
+
+
+
+.item {
+    margin: 10px auto;
+    padding: 20px 10px;
+    background-color: lightblue;
+    border: solid;
+    border-color: #8dc3f3;
+    border-width: 3px;
+}
+
+.item:hover {
+    background-color: rgb(76, 197, 238);
+}
+
+.container_top{
+    display: flex;
+    flex-direction: column;
+}
+
+.menu {
+    display: flex;
+    justify-content: space-between; 
+    list-style: none;  
+    padding-top: 34px;    
+}
+
+
+.button_top{
+    font-size: 16px;
+    line-height: 26px;
+    text-align: center;
+    letter-spacing: 0.04em;
+    color: #FFFFFF;
+    background: #5A98D0;
+    box-shadow: 5px 10px 20px rgba(53, 110, 173, 0.2);
+    border-radius: 10px;
+    padding: 15px 50px;
+    display: inline-block;
+    text-decoration: none;
+    margin-top: 71px;
+}