js - master - dashytka/To-Do-List

190 строк5 KB
dashytka
create js
01 ноя 2025, 20:03
01 ноя 2025, 20:039a551db
//To-Do List - Простой список дел
// Веб-приложение для управления ежедневными задачами с сохранением в локальном хранилище

class TodoList {
    constructor() {
        this.tasks = JSON.parse(localStorage.getItem('todoTasks')) || [];
        this.init();
    }

    init() {
        this.renderTasks();
        this.setupEventListeners();
    }

    setupEventListeners() {
        document.getElementById('addTaskBtn').addEventListener('click', () => this.addTask());
        document.getElementById('taskInput').addEventListener('keypress', (e) => {
            if (e.key === 'Enter') this.addTask();
        });
    }

    addTask() {
        const taskInput = document.getElementById('taskInput');
        const text = taskInput.value.trim();
        
        if (text === '') {
            alert('Пожалуйста, введите задачу!');
            return;
        }

        const newTask = {
            id: Date.now(),
            text: text,
            completed: false,
            createdAt: new Date().toLocaleString('ru-RU')
        };

        this.tasks.push(newTask);
        this.saveTasks();
        this.renderTasks();
        taskInput.value = '';
    }

    toggleTask(id) {
        this.tasks = this.tasks.map(task => 
            task.id === id ? {...task, completed: !task.completed} : task
        );
        this.saveTasks();
        this.renderTasks();
    }

    deleteTask(id) {
        if (confirm('Вы уверены, что хотите удалить эту задачу?')) {
            this.tasks = this.tasks.filter(task => task.id !== id);
            this.saveTasks();
            this.renderTasks();
        }
    }

    saveTasks() {
        localStorage.setItem('todoTasks', JSON.stringify(this.tasks));
    }

    renderTasks() {
        const tasksContainer = document.getElementById('tasksContainer');
        tasksContainer.innerHTML = '';

        if (this.tasks.length === 0) {
            tasksContainer.innerHTML = '<p class="no-tasks">Задач пока нет</p>';
            return;
        }

        this.tasks.forEach(task => {
            const taskElement = document.createElement('div');
            taskElement.className = `task-item ${task.completed ? 'completed' : ''}`;
            taskElement.innerHTML = `
                <div class="task-content">
                    <input type="checkbox" ${task.completed ? 'checked' : ''} 
                           onchange="todoList.toggleTask(${task.id})">
                    <span class="task-text">${task.text}</span>
                    <small class="task-date">${task.createdAt}</small>
                </div>
                <button class="delete-btn" onclick="todoList.deleteTask(${task.id})">×</button>
            `;
            tasksContainer.appendChild(taskElement);
        });
    }

    clearCompleted() {
        this.tasks = this.tasks.filter(task => !task.completed);
        this.saveTasks();
        this.renderTasks();
    }

    getStats() {
        const total = this.tasks.length;
        const completed = this.tasks.filter(task => task.completed).length;
        return { total, completed };
    }
}

// HTML структура, которую нужно добавить в body:
/*
<div class="todo-container">
    <h1>📝 Мой список дел</h1>
    <div class="input-section">
        <input type="text" id="taskInput" placeholder="Введите новую задачу...">
        <button id="addTaskBtn">Добавить</button>
    </div>
    <div class="stats" id="stats"></div>
    <div id="tasksContainer" class="tasks-container"></div>
    <button id="clearCompleted" onclick="todoList.clearCompleted()">Очистить выполненные</button>
</div>
*/

// CSS стили:
/*
.todo-container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    font-family: Arial, sans-serif;
}

.input-section {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

#taskInput {
    flex: 1;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#addTaskBtn {
    padding: 10px 20px;
    background: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.task-item.completed .task-text {
    text-decoration: line-through;
    color: #888;
}

.delete-btn {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    cursor: pointer;
}

.stats {
    margin-bottom: 10px;
    color: #666;
}

.no-tasks {
    text-align: center;
    color: #888;
    font-style: italic;
}
*/

// Инициализация приложения
const todoList = new TodoList();

// Обновление статистики каждые 5 секунд
setInterval(() => {
    const stats = todoList.getStats();
    document.getElementById('stats').textContent = 
        `Всего задач: ${stats.total} | Выполнено: ${stats.completed}`;
}, 5000);