добавление заказа

html/add-order-customer.html

@@ -331,4 +331,52 @@
         </main>
     </div>
 </body>
+<script>
+
+    document.querySelector('.order-form').addEventListener('submit', function(e) {
+        e.preventDefault();
+        
+        const orderData = {
+            title: this.querySelector('input[type="text"]').value,
+            description: this.querySelector('textarea').value,
+            tasks: Array.from(this.querySelectorAll('.task-item input')).map(input => input.value),
+            reference: this.querySelector('input[type="url"]').value,
+            duration: this.querySelectorAll('.duration-budget input[type="text"]')[0].value,
+            budget: this.querySelectorAll('.duration-budget input[type="text"]')[1].value,
+            deadline: this.querySelector('input[type="date"]').value,
+            comments: this.querySelectorAll('textarea')[1].value,
+            status: 'Принят', // Статус по умолчанию
+            date: new Date().toLocaleDateString() // Текущая дата
+        };
+
+        //localStorage. f12
+        saveOrder(orderData);
+        
+        window.location.href = 'my-orders-developer.html';
+    });
+
+    // добавление доп задач при создании заказа
+    document.querySelector('.add-task-btn').addEventListener('click', function() {
+        const tasksList = document.querySelector('.tasks-list');
+        const newTask = document.createElement('div');
+        newTask.className = 'task-item';
+        newTask.innerHTML = `
+            <input type="text" placeholder="Новая задача" class="form-control">
+            <button type="button" class="remove-task-btn">×</button>
+        `;
+        tasksList.insertBefore(newTask, this);
+        
+        //обраб. удаления
+        newTask.querySelector('.remove-task-btn').addEventListener('click', function() {
+            tasksList.removeChild(newTask);
+        });
+    });
+
+    //сохранить закзаз
+    function saveOrder(order) {
+        let orders = JSON.parse(localStorage.getItem('orders')) || [];
+        orders.push(order);
+        localStorage.setItem('orders', JSON.stringify(orders));
+    }
+</script>
 </html>

html/my-orders-customer.html

@@ -125,10 +125,9 @@
             text-align: left;
         }
 
-
         .orders-header {
             display: grid;
-            grid-template-columns: 1fr 305px 184px;
+            grid-template-columns: 1fr 305px 184px 40px;
             margin-bottom: 15px;
             font-size: 16px;
             font-weight: normal;
@@ -142,7 +141,6 @@
             display: grid;
             gap: 15px;
             width: 100%;
-
         }
 
         .order-card {
@@ -150,13 +148,14 @@
             border-radius: 8px;
             padding: 15px;
             display: grid;
-            grid-template-columns: 1fr 305px 184px;
+            grid-template-columns: 1fr 305px 184px 40px;
             gap: 15px;
             align-items: center;
         }
+        
         .order-card:last-child {
-    border-bottom: none;
-}
+            border-bottom: none;
+        }
 
         .order-title {
             font-weight: bold;
@@ -202,6 +201,25 @@
             justify-content: center;
         }
 
+        .delete-button {
+            background-color: #FF6464;
+            color: white;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            font-size: 20px;
+            font-weight: bold;
+            cursor: pointer;
+            border: none;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .delete-button:hover {
+            background-color: #e05555;
+        }
+
         .history-button-container {
             display: flex;
             justify-content: flex-end;
@@ -224,6 +242,7 @@
             justify-content: center;
             text-decoration: none;
         }
+        
         .footer {
             margin-top: 40px;
             text-align: center;
@@ -272,27 +291,27 @@
                     <div>Название</div>
                     <div>Прогресс</div>
                     <div></div>
+                    <div></div>
                 </div>
                 
                 <div class="orders-grid">
-
                     <div class="order-card">
                         <div class="order-title">Тревелблог про Чикаго</div>
                         <div class="order-status status-accepted">Принят</div>
                         <button class="details-button">Подробнее</button>
+                        <button class="delete-button">×</button>
                     </div>
                     
-
                     <div class="order-card">
                         <div class="order-title">Видеоролик "Культурные различия Китая и России"</div>
                         <div class="order-status status-in-progress">В процессе...</div>
                         <button class="details-button">Подробнее</button>
+                        <button class="delete-button">×</button>
                     </div>
-                
                 </div>
 
                 <div class="history-button-container">
-                    <a href="order-history.html" class="history-button">Добавить заказ</a>
+                    <a href="add-order-customer.html" class="history-button">Добавить заказ</a>
                 </div>
                 
             </div>
@@ -300,4 +319,95 @@
 
     </div>
 </body>
+<script>
+    let orders = [];
+    
+    function generateId() {
+        return Math.floor(Math.random() * 1000000);
+    }
+    
+    function initializeOrders() {
+        const savedOrders = JSON.parse(localStorage.getItem('orders'));
+        
+        if (!savedOrders || savedOrders.length === 0) {
+            orders = [
+                { id: generateId(), title: "Тревелблог про Чикаго", status: "Принят" },
+                { id: generateId(), title: "Видеоролик \"Культурные различия Китая и России\"", status: "В процессе..." }
+            ];
+            localStorage.setItem('orders', JSON.stringify(orders));
+        } else {
+            orders = savedOrders;
+        }
+    }
+    
+    function renderOrders() {
+        const ordersGrid = document.querySelector('.orders-grid');
+        const ordersCount = document.querySelector('.orders-count');
+        
+
+        while (ordersGrid.children.length > 1) {
+            ordersGrid.removeChild(ordersGrid.lastChild);
+        }
+        
+        orders.forEach(order => {
+            const orderCard = document.createElement('div');
+            orderCard.className = 'order-card';
+            orderCard.dataset.id = order.id; // Добавляем ID в data-атрибут карточки
+            orderCard.innerHTML = `
+                <div class="order-title">${order.title || 'Без названия'}</div>
+                <div class="order-status ${getStatusClass(order.status)}">${order.status || 'Принят'}</div>
+                <button class="details-button">Подробнее</button>
+                <button class="delete-button" data-id="${order.id}">×</button>
+            `;
+            ordersGrid.appendChild(orderCard);
+        });
+        
+        ordersCount.textContent = `Всего: ${orders.length}`;
+    }
+    
+    function getStatusClass(status) {
+        if (status.includes("процесс")) return "status-in-progress";
+        return "status-accepted";
+    }
+    
+    //удаление
+    function deleteOrder(id) {
+        const initialLength = orders.length;
+        orders = orders.filter(order => order.id !== id);
+        
+        if (orders.length < initialLength) {
+            localStorage.setItem('orders', JSON.stringify(orders));
+            
+
+            const cardToRemove = document.querySelector(`.order-card[data-id="${id}"]`);
+            if (cardToRemove) {
+                cardToRemove.remove();
+                document.querySelector('.orders-count').textContent = `Всего: ${orders.length}`;
+            }
+        } else {
+            alert('Не удалось найти заказ для удаления');
+        }
+    }
+    
+    document.addEventListener('DOMContentLoaded', function() {
+        initializeOrders();
+        renderOrders();
+        
+        //"добавить заказ"
+        document.querySelector('.history-button').addEventListener('click', function(e) {
+            e.preventDefault();
+            window.location.href = 'add-order-customer.html';
+        });
+    });
+    
+    document.addEventListener('click', function(e) {
+        if (e.target.classList.contains('delete-button')) {
+            const orderId = parseInt(e.target.getAttribute('data-id'));
+            if (confirm('Вы точно хотите удалить этот заказ?')) {
+                deleteOrder(orderId);
+            }
+        }
+    });
+</script>
+</html>
 </html>