Karadesh · Karadesh · May 12, 2021
diff --git a/7/cart/cart.html b/7/cart/cart.html
@@ -0,0 +1,81 @@
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <style>
+        #cart_in{
+            width: 800px;
+            background: #EEE;
+            position: absolute;
+            top: 50px;
+            left: calc( 50% - 400px );
+            border: 2px solid #ccc;
+            border-radius: 6px;
+            padding: 30px;
+            box-shadow: 5px 5px 10px #555;
+            display: none;
+        }
+        #address{
+            width: 800px;
+            background: #EEE;
+            position: absolute;
+            top: 50px;
+            left: calc( 50% - 400px );
+            border: 2px solid #ccc;
+            border-radius: 6px;
+            padding: 30px;
+            box-shadow: 5px 5px 10px #555;
+            display: none;
+        }
+        #comment{
+            width: 800px;
+            background: #EEE;
+            position: absolute;
+            top: 50px;
+            left: calc( 50% - 400px );
+            border: 2px solid #ccc;
+            border-radius: 6px;
+            padding: 30px;
+            box-shadow: 5px 5px 10px #555;
+            display: none;
+        }
+    </style>
+</head>
+<body>
+    <section>
+        <div>
+            <img src="img/avocado.png" alt="">
+            <p>avocado</p>
+            <button class="button plus" data-id="avocado">+</button>
+            <button class="button minus" data-id="avocado">-</button>
+        </div>
+        <div>
+            <img src="img/carrot.jpg" alt="">
+            <p>carrot</p>
+            <button class="button plus" data-id="carrot">+</button>
+            <button class="button minus" data-id="carrot">-</button>
+        </div>
+        <div>
+            <img src="img/basket.png" alt="" class="basket">
+        </div>
+    </section>
+    <div id="cart_in">
+        <p id="cart_items"></p>
+        <p id="cart_text">Cart is empty</p>
+        <button class="nextbutton1">next</button>
+        <button class="closecart_in">close</button>
+    </div>
+    <div id="address">
+        <p id="addresspanel"></p>
+        <button class="nextbutton2">next</button>
+        <button class="closeaddress">close</button>
+    </div>
+    <div id="comment">
+        <p id="commentpanel"></p>
+        <button class="closecomment">close</button>
+    </div>
+
+    <script src="cart.js"></script>
+</body>
+</html>
diff --git a/7/cart/cart.js b/7/cart/cart.js
@@ -0,0 +1,105 @@
+let items = {
+    'carrot': 25,
+    'avocado': 100
+};
+
+let cart = {
+    'carrot': 0,
+    'avocado': 0    
+};
+const cartElement = document.querySelector('#cart_in');
+const butoneElement = document.querySelector('nextbutton1');
+const cartcloseElement = document.querySelector('closecart_in');
+const addressElement = document.querySelector('#address');
+const addcloseElement = document.querySelector('closeadress');
+const buttwoElement = document.querySelector('nextbutton2');
+const commentElement = document.querySelector('#comment');
+const commcloseElement = document.querySelector('closecomment');
+
+document.onclick = event => {  
+    if (event.target.classList.contains("plus")){
+        plusFunc(event.target.dataset.id);
+    };
+    if (event.target.classList.contains("minus")){
+        minusFunc(event.target.dataset.id);
+
+    };
+    if (event.target.classList.contains("basket")){
+        cartElement.style.display = 'block';
+        cartItems();
+        basketAlert();
+    };
+    if (event.target.classList.contains("closecart_in")){
+        cartElement.style.display = 'none';
+    };
+    if (event.target.classList.contains("nextbutton1")){
+        cartElement.style.display = 'none';
+        addressElement.style.display = 'block';
+        addResspanel(); 
+    };
+    if (event.target.classList.contains("closeaddress")){
+        addressElement.style.display = 'none';
+    };
+    if (event.target.classList.contains("nextbutton2")){
+        addressElement.style.display = 'none';
+        commentElement.style.display = 'block';
+        commentPanel(); 
+    };
+    if (event.target.classList.contains("closecomment")){
+        commentElement.style.display = 'none';
+    };
+};
+// plus
+const plusFunc = (id) => {
+    cart[id]++;
+    renderCart();
+};
+
+//minus
+const minusFunc = (id) => {
+    if(cart[id] - 1 == 0){
+        deleteFunc(id);
+        "button".opacity = 0;
+
+        return true
+    };
+    cart[id]--;
+    renderCart();
+};
+
+const renderCart = () => {
+    console.log(cart)
+};
+
+//delete
+const deleteFunc = id => {
+    delete cart[id];
+    renderCart();
+};
+
+
+const basketAlert = () => {
+    var price = 0
+    for(var i in cart){
+            price = price + (cart[i] * items[i])
+    };
+    document.getElementById('cart_text').innerHTML = (price + " rub");
+};
+
+const cartItems = () => {
+    cart_items = "cart is: ";
+    for(key in cart){
+        cart_items = (cart_items + "\n " + key + " : " + cart[key])
+    };
+    document.getElementById('cart_items').innerHTML = cart_items;
+}
+
+const addResspanel = () => {
+    document.getElementById('addresspanel').innerHTML = ("Address is: Moscow, church of army, chaos altar");
+};
+
+const commentPanel = () => {
+    document.getElementById('commentpanel').innerHTML = ("There must be a comment. But where it is?");
+}
+
+renderCart();
diff --git a/7/cart/img/avocado.png b/7/cart/img/avocado.png
diff --git a/7/cart/img/basket.png b/7/cart/img/basket.png
diff --git a/7/cart/img/carrot.jpg b/7/cart/img/carrot.jpg