html/lab6/task3/script.js - main - RoditelevVV/web-static-labs

html/lab6/task3/script.js
177 строк6 KB
karpov
finish lab5, proba lab6
19 мар 2026, 17:02
19 мар 2026, 17:02e0606a0
'use strict';

let taskInput = document.getElementById('taskInput');
let addBtn = document.getElementById('addBtn');
let deleteAllBtn = document.getElementById('deleteAllBtn');
let tasksList = document.getElementById('tasksList');
let stats = document.getElementById('stats');

// Загружаем задачи из localStorage
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];

// Функция для копирования текста (работает везде - и на localhost, и на сервере)
function copyTextToClipboard(text) {
    // Создаем временный textarea элемент
    let textarea = document.createElement('textarea');
    textarea.value = text;
    
    // Делаем элемент невидимым
    textarea.style.position = 'fixed';
    textarea.style.opacity = '0';
    textarea.style.left = '-9999px';
    textarea.style.top = '0';
    
    document.body.appendChild(textarea);
    
    // Выделяем текст и копируем
    textarea.select();
    textarea.setSelectionRange(0, 99999); // Для мобильных устройств
    
    let success = false;
    try {
        success = document.execCommand('copy');
    } catch (err) {
        console.error('Ошибка копирования:', err);
    }
    
    // Удаляем временный элемент
    document.body.removeChild(textarea);
    
    return success;
}

// Функция сохранения задач
function saveTasks() {
    localStorage.setItem('tasks', JSON.stringify(tasks));
    displayTasks();
    updateStats();
}

// Функция отображения задач
function displayTasks() {
    tasksList.innerHTML = '';
    
    if (tasks.length === 0) {
        tasksList.innerHTML = '<div class="empty-list">✨ Список задач пуст</div>';
        return;
    }
    
    // Сортируем от новых к старым
    tasks.sort((a, b) => new Date(b.date) - new Date(a.date));
    
    tasks.forEach((task, index) => {
        let taskDiv = document.createElement('div');
        taskDiv.className = `task-item ${task.completed ? 'completed' : ''}`;
        
        taskDiv.innerHTML = `
            <div class="task-header">
                <div class="task-checkbox">
                    <input type="checkbox" ${task.completed ? 'checked' : ''} data-index="${index}">
                    <span class="task-date">📅 ${new Date(task.date).toLocaleString()}</span>
                </div>
            </div>
            <div class="task-text ${task.completed ? 'completed' : ''}">📌 ${task.text}</div>
            <div class="task-buttons">
                <button class="copy-btn" data-index="${index}">📋 Копировать</button>
                <button class="delete-task" data-index="${index}">🗑️ Удалить</button>
            </div>
        `;
        
        tasksList.appendChild(taskDiv);
    });
    
    // Добавляем обработчики для чекбоксов
    document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
        checkbox.addEventListener('change', function() {
            let index = this.dataset.index;
            tasks[index].completed = this.checked;
            saveTasks();
        });
    });
    
    // ИСПРАВЛЕННЫЙ обработчик для кнопок копирования (работает на сервере)
    document.querySelectorAll('.copy-btn').forEach(btn => {
        btn.addEventListener('click', function() {
            let index = this.dataset.index;
            let text = tasks[index].text;
            
            // Пробуем современный способ (если работает)
            if (navigator.clipboard && window.isSecureContext) {
                navigator.clipboard.writeText(text).then(() => {
                    alert('✅ Текст скопирован в буфер обмена');
                }).catch(() => {
                    // Если не сработал - используем старый способ
                    if (copyTextToClipboard(text)) {
                        alert('✅ Текст скопирован в буфер обмена');
                    } else {
                        alert('❌ Ошибка копирования');
                    }
                });
            } else {
                // Для HTTP используем старый способ
                if (copyTextToClipboard(text)) {
                    alert('✅ Текст скопирован в буфер обмена');
                } else {
                    alert('❌ Ошибка копирования');
                }
            }
        });
    });
    
    // Добавляем обработчики для кнопок удаления
    document.querySelectorAll('.delete-task').forEach(btn => {
        btn.addEventListener('click', function() {
            let index = this.dataset.index;
            tasks.splice(index, 1);
            saveTasks();
        });
    });
}

// Функция обновления статистики
function updateStats() {
    let total = tasks.length;
    let completed = tasks.filter(t => t.completed).length;
    let active = total - completed;
    
    stats.innerHTML = `
        📊 Всего задач: ${total} | ✅ Выполнено: ${completed} | ⏳ Осталось: ${active}
    `;
}

// Добавление новой задачи
addBtn.addEventListener('click', function() {
    let text = taskInput.value.trim();
    
    if (text === '') {
        alert('⚠️ Введите текст задачи');
        return;
    }
    
    tasks.push({
        text: text,
        completed: false,
        date: new Date().toISOString()
    });
    
    taskInput.value = '';
    saveTasks();
});

// Добавление по Enter
taskInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        addBtn.click();
    }
});

// Удаление всех задач
deleteAllBtn.addEventListener('click', function() {
    if (confirm('🗑️ Вы уверены, что хотите удалить все задачи?')) {
        tasks = [];
        saveTasks();
    }
});

// Первоначальное отображение
displayTasks();